今日内容
-
概念
-
ECMAScript
-
DOM
-
BOM
概念
就是一门浏览器客户端的脚本语言
-
运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎。
-
脚本语言，不需要编译，直接就可以被浏览器解析执行。
好处：
可以增强一些用户的体验，实现人与页面(html)的动态交互，也可以使用 js来控制页面的元素内容，让页面有一些动态效果(轮播图)。
历史：
C-- LiveScript 网景公司NetScape 1995 Java ---> JavaScript 微软 JScript IE
ECMA欧洲计算机制造商协会 ECMAScript 统一制定了客户端脚本语言的标准。
JavaScript = ECMAScript + JavaScript语言自己本身的内容(DOM + BOM)
ECMAScript核心语法
-
基本语法：
-
书写方式：内联式、外联式
-
内联式：直接在html文件中使用<script>标签书写js代码
-
外联式：首先在html页面文件外部创建一个js文件，在js文件中书写js代码，其次在html文件中通过<script>标签中的属性src引入外部的js文件代码
注意事项：
-
<script>可以定义在html的任何地方，但是定义的位置不同加载顺序不同，如果书写在<head>标签内，首先加载，如果放在<body>标签中(js文件放在body标签的最后面)，等待标签加载完加载js代码
-
<script>可以定义多个。
-
-
-
注释：单行注释、多行注释 源码可见
-
单行注释： // 注释的内容
-
多行注释：/被注释的内容/
-
-
数据类型：java当中数据类型：基本数据类型和引用类型
-
原始数据类型：
-
number型：数字型。整形/浮点型 整数、小数、NaN(not a number) 不是数字的数字类型
-
string型：字符串类型。"a" 'a' "abc" 'abc' "你好" '你好'
-
boolean型: 布尔型 true/false
-
null型：一个对象为空的类型
-
undefined：未定义类型。如果一个声明的变量没有给初始值，那么浏览器默认会给该变量赋值为undefined
-
-
引用数据类型：对象
-
-
4.变量
本质：一小块存储数据类型的内存空间
java语言是强类型的语言，需要显式的指定内存空间的数据类型
而JavaScript是弱类型的语言，不需要显式的指定内存空间的数据类型。可以存储整数、小数、布尔、字符串....
1、强类型：在申请存储空间的时候，需要显式定义空间将来存储的数据的数据类型。只能存储固定类型的数据。
2、弱类型：在申请存储空间的时候，不需要定义空间将来存储数据的数据类型，可以存放任意的数据类型的数据。
String str = "abc";
int num = 123;
boolean flag = true;语法：
var 变量名 = 初始化值;代码示例如下：
<script>
//number类型的定义
var num = 123;
// alert(num);
num = "123";
//alert(num);
var num01 = 123;
var num02 = 1.23;
var num03 = NaN;// 一个不是数字的数字类型
// 提前使用下document.write(); 把write中的内容输出到页面上
document.write(num01 + "<br>");
document.write(num02 + "<br>");
document.write(num03 + "<br>");
document.write("<hr>");
// string字符串类型定义 双引号和单引号都可以
var str01 = "abc";
var str02 = 'abc';
var str03 = "你好";
document.write(str01 + "<br>");
document.write(str02 + "<br>");
document.write(str03 + "<br>");
document.write("<hr>");
// boolean类型的定义
var flag = true;
var flag02 = false;
document.write(flag + "<br>");
document.write(flag02 + "<br>");
document.write("<hr>");
// null类型的定义
var obj01 = null;// 空类型值
document.write(obj01 + "<br>");
document.write("<hr>");
// undefined类型的定义
var obj02 = undefined;// 未定义值
var obj03;// 浏览器自定会给该变量赋值为undefined
document.write(obj02 + "<br>");
document.write(obj03 + "<br>");// undefined
document.write("<hr>");
</script>typeof 运算符--->可以获取数据对应的数据类型
备注：null被typeof解析后获取的类型是object,而不是null
//number类型的定义
var num01 = 123;
var num02 = 1.23;
var num03 = NaN;// 一个不是数字的数字类型
// 提前使用下document.write(); 把write中的内容输出到页面上
document.write(num01 +"----"+typeof(num01) +"<br>");// number
document.write(num02 +"----"+typeof(num02) + "<br>");// number
document.write(num03 +"----"+typeof(num03) + "<br>");// number
document.write("<hr>");
// string字符串类型定义 双引号和单引号都可以
var str01 = "abc";
var str02 = 'abc';
var str03 = "你好";
var str04 = "123";
document.write(str01 +"----"+typeof(str01) + "<br>");// string
document.write(str02 +"----"+typeof(str02) + "<br>");// string
document.write(str03 +"----"+typeof(str03) + "<br>");// string
document.write(str04 +"----"+typeof(str04) + "<br>");// string运算符
-
一元运算符
-
算术运算符
-
赋值运算符
-
比较运算符
-
逻辑运算符
-
三元运算符
js当中的bug调试，打开浏览器，按下F12,找到Console窗口--->,查看console当中的错误类型、错误原因、错误发生的位置。
流程控制语句
##### 条件语句
if else ....
switch case ....
循环语句
-
for循环
-
while循环
-
do-while循环
-
for each增强循环
JS对象
-
Function 函数对象
-
Array 数组对象
-
Math数学对象
-
Date日期对象
-
RegExp正则3表达式对象
-
正则表达式：定义字符串的组成规则
单个字符：
[] 如：[a],[ab] ,[a-zA-Z], [a-zA0-9]
特殊字符：
可以表示特殊含义的单个字符：
\d:单个数字字符【0-9】
\w:单个单词字符 等价于[a-zA-Z0-9_$#@....]
2量词符号
? :表示出现0次或者1次 0<=x<=1
*：表示出现0次或者多次 x>=0
+:出现1次或者多次 x>=1
{m,n}:表示-->最少m次最多n次 m<=x<=n
缺省配置
{m,}:最小m次 x>=m
{n}:最多n次 x<=n
3.开始和结束符号
^:代表正则表达式的开始
$：代表正则表达式的开始
2.正则对象的创建
有两种方式：
第一种方式：var reg=new RegExp（“正则表达式”）：不用
第二种方式：var reg=/正则表达式/;
方法：
test(参数)：验证指定的字符串是否符合正则表达式的
-
代码编译器
title>js引入方式</title>
<!--源码可见-->
<script>
alert("我是第一个js标签");
// 这是注释内容
/*
* 这是多行注释
*
* */
</script>
<script>
alert("我是第二个js标签");
</script>
<script src="./js/外部js.js" ></script>
<meta charset="UTF-8">
<title>变量定义</title>
<script>
//number类型的定义
var num = 123;
// alert(num);
num = "123";
//alert(num);
var num01 = 123;
var num02 = 1.23;
var num03 = NaN;// 一个不是数字的数字类型
// 提前使用下document.write(); 把write中的内容输出到页面上
document.write(num01 + "<br>");
document.write(num02 + "<br>");
document.write(num03 + "<br>");
document.write("<hr>");
// string字符串类型定义 双引号和单引号都可以
var str01 = "abc";
var str02 = 'abc';
var str03 = "你好";
document.write(str01 + "<br>");
document.write(str02 + "<br>");
document.write(str03 + "<br>");
document.write("<hr>");
// boolean类型的定义
var flag = true;
var flag02 = false;
document.write(flag + "<br>");
document.write(flag02 + "<br>");
document.write("<hr>");
// null类型的定义
var obj01 = null;// 空类型值
document.write(obj01 + "<br>");
document.write("<hr>");
// undefined类型的定义
var obj02 = undefined;// 未定义值
var obj03;// 浏览器自定会给该变量赋值为undefined
document.write(obj02 + "<br>");
document.write(obj03 + "<br>");// undefined
document.write("<hr>");
/* 五种变量定义
1.string 字符串
2.number 数字
3.boolean 类型定义
4.null 空类型
5.undefined 类型的定义*/
</script><meta charset="UTF-8">
<title>变量定义</title>
<script>
//number类型的定义
var num = 123;
// alert(num);
num = "123";
//alert(num);
var num01 = 123;
var num02 = 1.23;
var num03 = NaN;// 一个不是数字的数字类型
// 提前使用下document.write(); 把write中的内容输出到页面上
document.write(num01 +"----"+typeof(num01) +"<br>");
document.write(num02 +"----"+typeof(num02) + "<br>");
document.write(num03 +"----"+typeof(num03) + "<br>");
document.write("<hr>");
// string字符串类型定义 双引号和单引号都可以
var str01 = "abc";
var str02 = 'abc';
var str03 = "你好";
var str04 = "123";
document.write(str01 +"----"+typeof(str01) + "<br>");
document.write(str02 +"----"+typeof(str02) + "<br>");
document.write(str03 +"----"+typeof(str03) + "<br>");
document.write(str04 +"----"+typeof(str04) + "<br>");
document.write("<hr>");
// boolean类型的定义
var flag = true;
var flag02 = false;
document.write(flag +"----"+typeof(flag) + "<br>");
document.write(flag02 +"----"+typeof(flag02) + "<br>");
document.write("<hr>");
// null类型的定义
var obj01 = null;// 空类型值
document.write(obj01 +"----"+typeof(obj01) + "<br>");
document.write("<hr>");
// undefined类型的定义
var obj02 = undefined;// 未定义值
var obj03;// 浏览器自定会给该变量赋值为undefined
document.write(obj02 +"----"+typeof(obj02) + "<br>");
document.write(obj03 +"----"+typeof(obj03) + "<br>");// undefined
document.write("<hr>");
/* 在输出值后面输出类型
样式:
document.write(obj02 +"----"+typeof(obj02) + "<br>");
只要加个typeof就可以了*/
</script>
</head>
<body><title>一元运算符</title>
<script>
/*
一元运算符： 只有一个运算数参与运算的运算符
++ -- +(正数号) -(负数号)
++、--w
前++：++a ---> 先自增1，后进行其他运算
后++：a++ ---> 先进行其他运算，后变量自增1
前--：--a ---> 规则如上
后--：a-- ---> 规则如上
+、-(正负号)
注意：在js中，如果运算数不是所要求的类型，那么js解析引擎会将运算数转换成对应的数据类型
类型转换 ：
其他类型转换成number
1. string转number：按照字面值转换，如果字面值不是数字，则转为NaN值(其他数值和NaN相加的结果还是NaN)
2. boolean转number：1为true，0为false 布尔类型注意识记
3. null、undefined转number： null转换成0 undefined转为NaN类型
*/
var num = 123;
num++;
document.write(num);//124
document.write("<hr>");
// 字符串转number类型
var str = "123abc";
document.write(typeof (str) +"<br>");
document.write(typeof (+str)+ "-------" + (+ str+ 1) + "<br>");// 1231 /
document.write("<hr>");
// boolean转number类型
var flag = true;
var flag02 = false;
document.write((+flag + 10) + "----" + typeof(+flag) + "<br>");// 1 11
document.write((+flag02 - 5 )+ "----" + typeof(+flag) + "<br>");// 0 -5
document.write("<hr>");
// null/undefined 转number
var obj = null;
var obj02 = undefined;
document.write(+obj + "<br>")
document.write(+obj02 + "<br>")
</script><title>算术运算符</title>
<script>
// + - * / %
var num01 = 10;
var num02 = 3;
document.write(num01 + num02 + "<br>")// 30
document.write(num01 * num02 + "<br>")// 200
document.write(num01 / num02 + "<br>")// 0.5 number 包含整数、小数
document.write(num01 - num02 + "<br>")// -10
document.write(num01 % num02 + "<br>")//
</script><title>赋值运算符</title>
<script>
// += -= *= /= %= =
var num01 = 10;
document.write( "= " + num01 + "<br>")// 20
num01 += 10;
document.write( "+= " + num01 + "<br>")// 20
num01 -= 10;
document.write("-= " + num01 + "<br>")// 200
num01 *= 10;
document.write("*= " + num01 + "<br>")// 0.5 number 包含整数、小数
num01 /= 10;
document.write("/= " + num01 + "<br>")// -10
num01 %= 10;
document.write("%= " + num01 + "<br>")//
</script> <title>比较运算符</title>
<script>
/*
比较运算符：
比较方式：
第一种：只比较内容值
类型相同：直接比较
字符串：按照字典顺序进行比较。按位逐一进行比较，直到比较两者的大小
如果类型不同，先进行类型转换，在进行比较
第二种：比较内容值和数据类型
=== 全等于 先进行类型判断，如果类型不一致直接返回false
*/
var str = "abf";
var str02 = "abb";
document.write((str > str02) + "<br>");// true
document.write("<hr>");
var num = 123;
var num02 = "123";
document.write((num == num02) + "<br>");//true
document.write("<hr>");
document.write((num === num02 )+ "<br>");//falsg
var str03 = "123";
var str04 = 123;
document.write("<hr>");
document.write(((+str03) === str04) + "<br>");//falsg
</script><title>逻辑运算符</title>
<script>
/*
逻辑运算符
&& 短路与
|| 短路或
! 取反
其他类型转换成boolean类型
1. number转换成boolean： 0或者NaN 为false 其他的数字为true
2. string转换成boolean： 除了空字符串("")为false，其他一律为true;
3. null或者undefined： 转换成false
4. 对象：所有的对象一律转为true。
*/
var flag = true;
document.write(flag + "<br>");
document.write("<hr>");
//1. number转换成boolean： 0或者NaN 为false 其他的数字为true
var num01 = 0;// false
var num02 = NaN;// false
var num03 = 1;// true
var num04 = 100;// true
document.write(!!num01 + "<br>");// false
document.write(!!num02 + "<br>");// false
document.write(!!num03 + "<br>");// true
document.write(!!num04 + "<br>");// true
document.write("<hr>");
/*if (num01) {
alert(num03);
} else {
alert("我是一个false值");
}*/
// 2. string转换成boolean： 除了空字符串("")为false，其他一律为true;
var str01 = "";
var str02 = "abc";
var str03 = "123";
document.write(!!str01 + "<br>");// false
document.write(!!str02 + "<br>");// true
document.write(!!str03 + "<br>");// true
document.write("<hr>");
//3. null或者undefined： 转换成false
var obj01 = null;
var obj02 = undefined;
var obj03;
document.write( obj01 +"---"+ !!obj01 + "<br>");//
document.write( obj02 +"---"+ !!obj02 + "<br>");//
document.write( obj03 +"---"+ !!obj03 + "<br>");//
document.write("<hr>");
//4. 对象：所有的对象一律转为true。
var date = new Date();// 创建了一个日期对象
document.write( date + "---" + !!date + "<br>" );// true
var array = new Array();// 创建了一个数组对象
document.write( array + "---" + !!array + "<br>")
var obj04 = "123";
if (obj04 != null && obj04.length >0) {
alert(obj04+"-----");
}
var obj05 = "";
var obj06 = null;
// 可读性差 防止空指针异常
if (obj05) {
alert(obj05+"-----");
}
</script><title>三元运算符</title>
<script>
/*
三元运算符 ? :
布尔表达水 ? 结果值1 : 结果值2;
*/
var num01 = 10;
var num02 = 20;
var num03 = num01 > num02 ? "为true" : false;
document.write(num03 + "<br>");
</script> <title>特殊语法</title>
<script>
/*
1. 在java当中，语句的结束用分号";",但是js当中语句的结束是回车换行(使用分号也可以)
2. 在java当中，变量的定义使用 数据类型 变量名 = 变量值
而js当中，可以不要前面的数据类型 变量名 = 变量值;
使用var： 定义的变量如果在方法内，那么就是局部变量
不使用var：定义的变量如果在方法内，那么就是全局变量。(不建议)
*/
/*num01 = 123;
num02 = 124;
alert(num01);
alert(num02);*/
// 定义一个方法
function method01() {
var num01 = 123;
}
// 方法调用
method01();
alert(num01);
var num02;
// 定义一个方法
function method02() {
num02 = 124;
}
// 方法调用
method02();
alert(num02);
</script> <script>
/*
// 1.初始化语句
while(2.判断条件) {
// 3.循环体内容
// 4.迭代语句
}
*/
// 求前5项的乘积 120
var num = 1;
var result = 1;
while (num <= 5) {
result *= num;
num++;
}
document.write(result);
</script><title>do-while循环结构</title>
<script>
/*
*/
// 求前5项的乘积 120
var num = 1;
var result = 1;
do {
//
result *= num;
num++;
}while (num <= 5);
document.write(result);// 120
// 练习 九九乘法表
</script><title>循环练习</title>
<style>
* {
box-sizing: border-box;
}
tr {
border: 1px dotted red;
}
td {
display: inline-block;
/*显示行内块*/
border: 1px solid black;
/*固定黑色的*/
margin-right: 10px;
/*外边距*/
}
</style>
<script>
/*
table
tr
td
*/
// 1. 先写入table标签
document.write("<table align = 'center'>");
// 2. 循环语句 外层for循环中的循环变量 i 控制行数
for(var i = 1; i <= 9; i++) {
// 3每外层循环一次，需要写入一个tr
document.write("<tr>");
// 4. 每进行一次外循环，需要循环遍历该行所有的乘法口诀
for(var j = 1; j <= i; j++) {
// 5. 每内层循环一次，需要写入一个td
document.write("<td>");
// 6. 往td标签中写入文本内容
document.write(j + "*" + i + "=" + (j * i)); //
// 7. 内容写完，需要添加结束标签td
document.write("</td>");
}
// 8. 行内容写完，需要写入tr的结束标签
document.write("</tr>");
}
// 9. 表格内容写完，添加table的结束标签
document.write("</table>");<script>
/*
Function 函数对象--->方法对象
1. 方法的创建
有两种方式：
1. var fun = new Function(形参列表, 方法体); 不用
2. function 方法名称(形参列表) {
// 方法体内容
}
2. 属性
length：代表方法中形参个数
3. 特点
1. 方法定义时，形参的参数数据类型不需要，返回值类型也不需要定义。但是想要获取该方法的返回值还需要借助于return语句。
2. 方法是一个对象，如果定义的方法名称相同，后面的会把覆盖前面定义的方法。
3. 在js当中，方法的参数列表个数在调用时，可以不用考虑。换句话说方法调用只和方法名称有关，和参数列表无关。
4. 在方法声明中有一个隐藏的的内置对象，参数对象 arguments,封装了所有的实际参数。
*/
// 方法创建的第一种方式 java当中定义形参列表 数据类型 参数名称
/*var fun = new Function("num01","num02","num03","alert(num01+num02);");
// 调用方法
fun(123,124,125);*/
// 方法创建的第二种方式
var d;
function show(a,b,c) {
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
document.write(d + "<br>");// 一个未定义的变量被引用了
alert(show.length);// 获取形参的个数
// 返回a、b、c三个变量的和
return a+b+c+d;
}
// 方法调用
var result = show(1,2,3);
document.write(result + "<br>");// 6
document.write("<hr>");
function show(str01,str02){
document.write(str01 + "<br>");//
document.write(str02 + "<br>");
return str01 + str02;
}
document.write("<hr>");
// 方法调用
var result02 = show("Hello","World");
document.write(result02 + "<br>");
// 方法调用
var result03 = show();// undefined + undefined --->NaN
document.write(result03 + "<br>");// NaN
// 方法调用
var result04 = show(123);
document.write(result04 + "<br>");// abcundefined
//4. 在方法声明中有一个隐藏的的内置对象，参数对象 arguments(数组),封装了所有的实际参数。
// 求一下1~10的和
document.write("<hr>");
function sum() {
//
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
document.write(arguments[0] + "<br>");
document.write(arguments[1] + "<br>");
document.write(arguments[2] + "<br>");
return sum;
}
// 求一下1~10的和
var sum = sum(1,2,3);
alert(sum);// 55
</script><script>
/*
Array：数组对象
1. 创建
有三种方式：
1. var array = new Array(数组长度);
2. var array02 = new Array(元素列表);
3. var array03 = [元素列表];
2. 方法
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3.属性
lenght:数组的长度
4.js中的数组特点
1.数组元素的数据类型不限制
2.数组的长度是可变的。
*/
// 1.var array = new Array(数组长度);
// 创建一个数组长度为5的容器
var array = new Array(5);
alert("array数组长度值为：" + array.length);
// 第二种 var array02 = new Array(元素列表);
var arr02 = new Array(1,2,3,4);
document.write(arr02 + "<br>");
document.write("<hr>");
// 第三种 var array03 = [元素列表];
var array03 = [1,true,null,undefined,NaN,new Date(),"abc"];
document.write(array03 + "<br>")
// join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var arr01 = [1,2,3,4,5];
/*var result01 = arr01.join("-");
document.write("<hr>");
document.write(result01 + "<br>");*/
var result = arr01.pop();
var length = arr01.length;
document.write("删除并获取最后一个元素：" + result + "<br>");
document.write( "此时数组长度为：" +length + "<br>");
document.write( arr01 + "<br>");
// arr01 ----> 1,2,3,4
// push() 向数组的末尾添加一个或更多元素，并返回新的长度。
var newLength = arr01.push(5,6,7,8);
document.write("<hr>");
document.write( "此时数组长度为：" +newLength + "<br>");
document.write( arr01 + "<br>");
//构建一个数组
var arr05=new Array(5);
arr05[10]=123;
document.write(arr05+"<br/>");
document.write(arr05)
</script><title>Date日期对象</title>
<script>
/*
* Date对象：日期对象
* 1.创建日期对象
* new Date()
* 2.方法
* 1.getTime():获取距离1970年1月1日零时至今的毫秒数
* 2.toLocalString()
*/
//创建日期对象
var date=new Date();
document.write(date+"<br/>");
//getTime()
var time=date.getTime();
document.write(time+"<br/>");
document.write("<hr/>");
date.toLocaleDateString()
</script><script>
/*
* Global:全局对象，它也没有对应的构造方法，直接调用 方法名称()
* 1.方法
* decodeURI() 解码某个编码URI
* decodeURIComponent() 解码一个编码的URI组件
* encodeURI() 把字符串编码为
* encodeURIComponent() 把字符串编码为URI组件
*/
var num01="123";
var number=parseInt(num01);
document.write("<hr/>");
document.write(number+typeof (number)+"<br/>");
</script><title>Math数学对象</title>
<script>
/*
* Math:数学对象
* 1.创建：不用创建，直接使用 格式Math,方法名()/属性名
*
* 2.属性：
* PI:圆周率
*
* 3.方法：
* random():随机数[0,1] number小数
* round():四舍五入
* ceil():向上取整
* floor():向下取整
* pow(x,y):返回x的y次幂
*/
//查看圆周率
var pi=Math.PI;
document.write(pi+"<br/>");
//random
var number=Math.random();
document.write(number+"<br/>");
</script><title>正则表达式</title>
<!--<script>
//创建正则表达式
//第一种方法
//6-12位的字母和其他符号
var reg01=new RegExp("\\w{6,12}$");
//定义一个变量
var str="fdghyj54j6";
//正则效验
var flag=reg01.test(str);
document.write("cwrgv3rtbgv4ehb是否满足正则要求:"+flag+"<br/>");
</script>-->
<script>
//第一种方法
//6-12位的字母和其他符号
var reg01=new RegExp("\\w{6,12}$");
//定义一个变量
var str="cwrgvbrg";
//正则效验
var flag=reg01.test(str);
document.write("cwrgvbrg是否满足正则要求:"+flag+"<br/>");
</script>
1060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
