JavaScript基础

  • 一、JavaScript 用法
    • 1.< body > 中的 JavaScript
    • 2.< head > 中的 JavaScript 函数
    • 3.< body > 中的 JavaScript 函数
      • 4.外部的 JavaScript
  • 二、JavaScript 语法
    • 1、JavaScript 字面量
    • 2、JavaScript 变量
    • 3、JavaScript 操作符
    • 4、JavaScript 语句、关键字、注释、数据类型、函数
  • 三、JavaScript 语句
    • 1.语句实例
    • 2、JavaScript 语句标识符
  • 四、JavaScript 对象
    • 1、对象定义
    • 2、对象方法
  • 五、JavaScript 函数
    • 1、JavaScript 函数语法
    • 2、调用带参数的函数
    • 3、带有返回值的函数
  • 六、JavaScript 事件
    • 1、HTML 事件
    • 2、常见的HTML事件

一、JavaScript 用法

HTML 中的脚本必须位于 < script > 与 < /script > 标签之间。
脚本可被放置在 HTML 页面的 < body > 和 < head > 部分中。
浏览器会解释并执行位于 之间的 JavaScript 代码

1.< body > 中的 JavaScript

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>document.write("<h1>JavaScript 能够直接写入 HTML 输出流中</h1>");document.write("<p>只能在 HTML 输出流中使用 document.write</p>");</script></body>
</html>

运行结果
学习周记6-编程之家

2.< head > 中的 JavaScript 函数

把一个 JavaScript 函数放置到 HTML 页面的 < head > 部分
点击后会调用函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function myFunction(){document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}</script></head><body><h1>把一个 JavaScript 函数放置到 HTML 页面的 < head > 部分</h1><p id="demo">点击下方按钮调用head中的函数</p><button type="button" onclick="myFunction()">点击这里</button></body>
</html>

运行结果学习周记6-编程之家
点击后结果
学习周记6-编程之家

3.< body > 中的 JavaScript 函数

把一个 JavaScript 函数放置到 HTML 页面的 < body > 部分
点击后会调用函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>把一个 JavaScript 函数放置到 HTML 页面的 < body > 部分</h1><p id="demo">点击下方按钮调用body中的函数</p><button type="button" onclick="myFunction()">点击这里</button><script>function myFunction(){document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}</script></body>
</html>

运行结果学习周记6-编程之家
点击后结果
学习周记6-编程之家

4.外部的 JavaScript

把脚本保存到外部文件中，文件扩展名是 .js
外部文件通常包含被多个网页使用的代码。
使用外部文件要在 < script > 标签的 “src” 属性中设置该 .js 文件
注：可以将脚本放置于 < head > 或者 < body >中
放在 < script > 标签中的脚本与外部引用的脚本运行效果完全一致。

my Script.js 文件代码如下：

function myFunction()
{document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

JS文件代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body><h1>新建一个外部脚本文件.js</h1>
<p id="demo">将脚本放置于body或head中，点击运行函数</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="my Script.js"></script></body>
</html>

运行结果
学习周记6-编程之家
点击后结果学习周记6-编程之家

二、JavaScript 语法

JavaScript 是一个程序语言。
JavaScript 是一个脚本语言。

1、JavaScript 字面量

字面量 分类、示例
数字字面量 整数（1009）或者是小数（3.14）科学计数(e)（123e5）
字符串字面量 单引号（‘John Doe’）或双引号（“John Doe”）
表达式字面量 用于计算(3+4,5*6等 )
数组字面量 定义一个数组
对象字面量 定义一个对象
函数字面量 定义一个函数

上述实例
（a）document.getElementById(“demo”).innerHTML = 123e5; 结果为12300000
（b）document.getElementById(“demo”).innerHTML = ‘John Doe’; 结果为John Doe
（c）document.getElementById(“demo”).innerHTML = 5 * 10; 结果为50
学习周记6-编程之家

2、JavaScript 变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值
实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body><p id="demo"></p>
<script>
var d;
d =36;
document.getElementById("demo").innerHTML = d;
</script></body>
</html>

结果
学习周记6-编程之家
注：
变量可以通过变量名访问。
在指令式语言中，变量通常是可变的。
字面量是一个恒定的值。
变量是一个名称。字面量是一个值。

3、JavaScript 操作符

JavaScript使用 算术运算符 来计算值（加减乘除表达式）
JavaScript使用***赋值运算符***给变量赋值
实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body><p id="demo"></p>
<script>
var x, y, z;
x = 35;
y = 26;
z = (x + y) * 10/2;
document.getElementById("demo").innerHTML = z;
</script></body>
</html>

结果
学习周记6-编程之家
JS中运算符分类

类型 实例
赋值，算术和位运算符 = + – * /
条件，比较及逻辑运算符 == != < >

4、JavaScript 语句、关键字、注释、数据类型、函数

（1）语句是用分号分隔，如 x = 5 + 6;y = x * 10;
（2）JavaScript 关键字用于标识要执行的操作.如 var 关键字告诉浏览器创建一个新的变量
（3）JavaScript 注释，双斜杠 // 后的内容将会被浏览器忽略
（4）JavaScript 有多种数据类型：数字，字符串，数组，对象等
学习周记6-编程之家
（5）
JavaScript 语句可以写在函数内，函数可以重复引用
引用一个函数 = 调用函数(执行函数内的语句)。

三、JavaScript 语句

1.语句实例

下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” ：
document.getElementById(“demo”).innerHTML = “你好 Dolly”;

2、JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。

语句 描述
break 用于跳出循环
catch 语句块，在 try 语句块执行出错时执行 catch 语句块
continue 跳过循环中的一个迭代
do … while 执行一个语句块，在条件语句为 true 时继续执行该语句块
for 在条件语句为 true 时，可以将代码块执行指定的次数
for … in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）
function 定义一个函数
if … else 用于基于不同的条件来执行不同的动作
return 退出函数
switch 用于基于不同的条件来执行不同的动作
throw 抛出（生成）错误
try 实现错误处理，与 catch 一同使用
var 声明一个变量
while 当条件语句为 true 时，执行语句块

四、JavaScript 对象

1、对象定义

可以使用字符来定义和创建 JavaScript 对象，空格和换行不影响
实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body><h>创建 JavaScript 对象。</h>
<p id="a"></p>
<p id="b"></p>
<script>
var person = {firstName : "John",lastName  : "Doe",age       : 50,eyeColor  : "blue"
};
document.getElementById("a").innerHTML =person.firstName + " 现在 " + person.age + " 岁。";
document.getElementById("b").innerHTML =person.firstName +person.lastName+" 是 " + person.eyeColor + "眼睛";
</script></body>
</html>

结果
学习周记6-编程之家

2、对象方法

对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {firstName: "John",lastName : "Doe",id : 5566,fullName : function() {return this.firstName + " " + this.lastName;}
};
document.getElementById("demo").innerHTML = person.fullName()+"的学号是"+person.id;
</script></body>
</html>

结果
学习周记6-编程之家
上述实例中用person.fullName()
访问函数
fullName : function()
{
return this.firstName + " " + this.lastName;
}
注意一定要加（）不添加 (), 它会返回函数的定义

五、JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

1、JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
// 执行代码
}
当调用该函数时，会执行函数内的代码。
注：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

2、调用带参数的函数

在调用函数时，可以向其传递参数。这些参数可以在函数中使用。
可以发送任意多的参数，由逗号 (,) 分隔
如：myFunction(argument1,argument2)
声明函数时，把参数作为变量来声明：
如：
function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body><p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{alert("Welcome " + name + ", the " + job);
}
</script></body>
</html>

点击后结果
学习周记6-编程之家

3、带有返回值的函数

使用 return 语句就可以实现函数将值返回调用它的地方。
在使用 return 语句时，函数会停止执行，并返回指定的值。
语法
function myFunction()
{
var x=5;
return x;
}
可以不把它保存为变量使用返回值：
document.getElementById(“demo”).innerHTML=myFunction();
实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body><p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){return a*b;
}
document.getElementById("demo").innerHTML=myFunction(5,7);
</script></body>
</html>

结果
学习周记6-编程之家

六、JavaScript 事件

1、HTML 事件

在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码)
实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body><button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p></body>
</html>

结果
学习周记6-编程之家
点击后
学习周记6-编程之家

2、常见的HTML事件

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载