目录
2、JavaScript HTML DOM - 改变 HTML
一、JavaScript简介
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
简而言之,html是弄网页内容的,css是弄网页布局的,而JavaScript是来控制网页的行为的!
二、JavaScript的用法
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script>
alert("我的第一个 JavaScript");
</script>
可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
三、JavaScript输出
JavaScript 可以通过不同的方式来输出数据:
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
- 使用 innerHTML 写入到 HTML 元素。
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法,请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容
- 使用 console.log() 写入到浏览器的控制台。
四、JavaScript基础语法
1、字面量
数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e): 12 12.12
字符串(String)字面量 可以使用单引号或双引号: 'zzq' ''zzq''
表达式字面量 用于计算:5 * 7
数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]
对象(Object)字面量 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}
2、变量
JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值。变量是一个名称。字面量是一个值。
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可(一条语句中声明的多个变量不可以同时赋同一个值):
var lastname="Doe", age=30, job="carpenter";
如果重新声明 JavaScript 变量,该变量的值不会丢失
在 2015 年以前,我们使用 var 关键字来声明 JavaScript 变量。在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量
变量作用域
1)局部变量
变量在函数内声明,变量为局部变量,具有局部作用域。局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
2)全局变量
变量在函数外定义,即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。以下实例中 carName 在函数内,但是为全局变量。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
3、操作符
JavaScript使用 算术运算符 来计算值,使用赋值运算符给变量赋值
4、JS语句
- 在 HTML 中,JavaScript 语句用于向浏览器发出命令。语句是用分号分隔
- JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。
- 您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:
document.write("你好 \
世界!");
5、JS关键字
abstract | else | instanceof | super |
boolean | enum | int | switch |
break | export | interface | synchronized |
byte | extends | let | this |
case | false | long | throw |
catch | final | native | throws |
char | finally | new | transient |
class | float | null | true |
const | for | package | try |
continue | function | private | typeof |
debugger | goto | protected | var |
default | if | public | void |
delete | implements | return | volatile |
do | import | short | while |
double | in | static | with |
6、JS注释
和Java一样,JS也可以用//来写单行注释
多行注释以 /* 开始,以 */ 结尾。
7、数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
- 布尔(逻辑)只能有两个值:true 或 false。
- 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
- Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
- JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象
类型转换:
将数字转换为字符串
//1.将数字转换为字符串
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
x.toString()
(123).toString()
(100 + 23).toString()
//2.将布尔值转换为字符串
String(false) // 返回 "false"
String(true) // 返回 "true"
false.toString() // 返回 "false"
true.toString() // 返回 "true"
//3.将日期转换为字符串
Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
obj = new Date()
obj.toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
//4.将字符串转换为数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
//5.将布尔值转换为数字
Number(false) // 返回 0
Number(true) // 返回 1
//6.将日期转换为数字
d = new Date();
Number(d) // 返回 1404568027739
d = new Date();
d.getTime() // 返回 1404568027739
8、JS对象
对象定义:var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
对象属性:person.lastName;或person["lastName"];访问属性
对象方法:
创建:
methodName : function() {
// 代码
}
访问:objectName.methodName()
9、JavaScript 函数
JavaScript 语句可以写在函数内,函数可以重复引用:引用一个函数 = 调用函数(执行函数内的语句)。
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕,本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明,可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
10、字母大小写
JavaScript 对大小写是敏感的。当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。同样,变量 myVariable 与 MyVariable 也是不同的
11、字符集
JavaScript 使用 Unicode 字符集。Unicode 覆盖了所有的字符,包含标点等字符
12、JavaScript 事件
JavaScript 可以做什么?
事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
- 等等 ...
可以使用多种方法来执行 JavaScript 事件代码:
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
- 你可以阻止事件的发生。
- 等等 ...
常见的HTML事件:
事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 鼠标指针移动到指定的元素上时发生 |
onmouseout | 用户从一个 HTML 元素上移开鼠标时发生 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
13、JavaScript 字符串
字符串可以存储一系列字符,如 "John Doe"。字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号:
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
//可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
//也可以在字符串添加转义字符来使用引号
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
//我们也可以使用 new 关键字将字符串定义为一个对象
var firstName = new String("John")// 不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用
可以使用索引位置来访问字符串中的每个字符:
var character = carname[7];
可以使用内置属性 length 来计算字符串的长度:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
字符串属性:
属性 | 描述 |
---|---|
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
字符串方法:
方法 | 描述 |
---|---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
14、JavaScript 运算符
1)JavaScript 算术运算符
运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
---|---|---|---|---|
+ | 加法 | x=y+2 | 7 | 5 |
- | 减法 | x=y-2 | 3 | 5 |
* | 乘法 | x=y*2 | 10 | 5 |
/ | 除法 | x=y/2 | 2.5 | 5 |
% | 取模(余数) | x=y%2 | 1 | 5 |
++ | 自增 | x=++y | 6 | 6 |
x=y++ | 5 | 6 | ||
-- | 自减 | x=--y | 4 | 4 |
x=y-- | 5 | 4 |
2)JavaScript 赋值运算符:
运算符 | 例子 | 等同于 | 运算结果 |
---|---|---|---|
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
-= | x-=y | x=x-y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/=y | x=x/y | x=2 |
%= | x%=y | x=x%y | x=0 |
3)比较运算符:
运算符 | 描述 | 比较 | 返回值 |
---|---|---|---|
== | 等于 | x==8 | false |
x==5 | true | ||
=== | 绝对等于(值和类型均相等) | x==="5" | false |
x===5 | true | ||
!= | 不等于 | x!=8 | true |
!== | 不绝对等于(值和类型有一个不相等,或两个都不相等) | x!=="5" | true |
x!==5 | false | ||
> | 大于 | x>8 | false |
< | 小于 | x<8 | true |
>= | 大于或等于 | x>=8 | false |
<= | 小于或等于 | x<=8 | true |
4)逻辑运算符:
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x==5 || y==5) 为 false |
! | not | !(x==y) 为 true |
5)条件运算符(三元运算符):
variablename=(condition)?value1:value2
15、条件语句
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
16、分支语句
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
17、循环语句
For 循环
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
For/In 循环
//for/in 语句循环遍历对象的属性
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
while 循环
while (i<5)
{
x=x + "The number is " + i + "<br>";
}
do/while 循环
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
18、JS表单
HTML 表单自动验证
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
约束验证 HTML 输入属性
属性 | 描述 |
---|---|
disabled | 规定输入的元素不可用 |
max | 规定输入元素的最大值 |
min | 规定输入元素的最小值 |
pattern | 规定输入元素值的模式 |
required | 规定输入元素字段是必需的 |
type | 规定输入元素的类型 |
约束验证 CSS 伪类选择器
选择器 | 描述 |
---|---|
:disabled | 选取属性为 "disabled" 属性的 input 元素 |
:invalid | 选取无效的 input 元素 |
:optional | 选择没有"optional"属性的 input 元素 |
:required | 选择有"required"属性的 input 元素 |
:valid | 选取有效值的 input 元素 |
19、this关键字
- 在方法中,this 表示该方法所属的对象。
- 如果单独使用,this 表示全局对象。
- 在函数中,this 表示全局对象。
- 在函数中,在严格模式下,this 是未定义的(undefined)。
- 在事件中,this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
20、let 和 const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量。
//使用 var 关键字重新声明变量可能会带来问题。在块中重新声明变量也会重新声明块外的变量:
var x = 10;
// 这里输出 x 为 10
{
var x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 2
//let 关键字就可以解决这个问题,因为它只在 let 命令所在的代码块 {} 内有效。
var x = 10;
// 这里输出 x 为 10
{
let x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 10
const 关键字
//const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:
const PI = 3.141592653589793;
PI = 3.14; // 报错
PI = PI + 10; // 报错
const
定义常量与使用let
定义的变量相似:
- 二者都是块级作用域
- 都不能和它所在作用域内的其他变量或函数拥有相同的名称
两者还有以下两点区别:
const
声明的常量必须初始化,而let
声明的变量不用- const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。
五、JavaScript 函数
1、函数声明
//由于函数声明不是一个可执行语句,所以不以分号结束。
function myFunction(a, b) {
return a * b;
}
函数可作为一个值使用,函数是对象
2、函数表达式
//JavaScript 函数可以通过一个表达式定义。函数表达式可以存储在变量中:
var x = function (a, b) {return a * b};
//在函数表达式存储在变量后,变量也可作为一个函数使用:
var z = x(4, 3);
//上述函数以分号结尾,因为它是一个执行语句。
3、 Function() 构造函数
var myFunction = new Function("a", "b", "return a * b");
//var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);
//在 JavaScript 中,很多时候,你需要避免使用 new 关键字。
4、函数提升(Hoisting)
提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的行为。提升(Hoisting)应用在变量的声明与函数的声明。因此,函数可以在声明之前调用。使用表达式定义函数时无法提升
myFunction(5);
function myFunction(y) {
return y * y;
}
5、箭头函数(ES6 新增)
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
//当只有一个参数时,圆括号是可选的:
//没有参数的函数应该写成一对圆括号:
箭头函数是不能提升的,所以需要在使用之前定义。使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。如果函数部分只是一个语句,则可以省略 return 关键字和大括号 {},这样做是一个比较好的习惯:
六、JS类
待更新。。。
七、JS DOM
1、查找 HTML 元素
1)通过 id 查找 HTML 元素
var x=document.getElementById("intro");
//如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。如果未找到该元素,则 x 将包含 null。
2)通过标签名查找 HTML 元素
//查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
3)通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
2、JavaScript HTML DOM - 改变 HTML
1)改变 HTML 输出流
绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
2)改变 HTML 内容
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
3)改变 HTML 属性
JavaScript 更改此元素的内容 (innerHTML)
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
3、JavaScript HTML DOM - 改变CSS
1)改变 HTML 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>
2)使用事件
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>
</body>
</html>