第一天：js入门
1、js简介
①、js是世界上最流行的编程语言。
②、js是一种轻量级的编程语言。
③、js是可插入html页面的编程代码，由浏览器执行。
④、js是一门属于网络的脚本语言。
⑤、js被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies以及更多应用。
⑥、js用于html和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
2、引入
页面引入js（同css引入）常见3种引入方式：行内、内部、外部。
①、行内
<button οnclick="alert('我被您点击了')"></button>
②、内部(内联)引入
<html> <head> meta style title </head> <body> <!-- 页面预定义标签 --> div|span|a|h <script> //编辑js脚本 </script> </body>
③、外部引入（推荐使用）
<html> <head> meta style title </head> <body> <!-- 页面预定义标签 --> div|span|a|h <!-- 通过script标签的src引入js文件 --> <script src="./js/js01.js"></script> </body>
优势：
- 分离了HTML和代码
- 更使HTML和JavaScript易于阅读和维护
- 已缓存的JavaScript文件可加速页面加载
js引入注意事项
①、引入js放置body结束标签之前
②、script标签不可嵌套script标签
3、js用途
①、动态输出HTMl
document.write("输出文本");
②、对事件做出反应
<button οnclick="alert('我被您点击了')"></button>
③、改变HTML内容
wp=document.getElementById("wp");
④、改变Image引入
imgW=document.getElementById("img1");
⑤、改变HTML样式
wp=document.getElementById("wp");
⑥、验证输入
if(isNaN("abc")){alert("这是 不是个数字")}
⑦、等等更多功能后续收看
第二天：js组成
1、语句
定义：js语句是向浏览器发出命令，告诉浏览器该做什么。
注意：分号（“；”）代表一句话结束。
2、代码
定义：js代码是js语句的序列。浏览器会按照编写顺序至上而下、至左而右执行每条语句。
3、代码块
定义：js代码块是js多条语句的组合。
注意：①、代码块使用花括号“{多条语句}”包裹。
②、块的作用使语句序列一起执行。
4、其他注意
①、js对大小写敏感（区分大小写）
②、js会忽略语句之间多余的空格。每条语句间折行能提高可读性。
③、字符串内折行使用反斜杆“\”换行。
5、注释
js注释两种
①、单行注释。使用“//”
//alert("单行注释、这个提示不执行");
②、多行注释。使用“/**/”
/*document.write("abc");
注意：多行注释不可嵌套多行注释，可嵌套单行注释
6、变量
定义：js变量是存储信息（数据）的容器。
语法：var 变量名（标识符）= 信息（数据）；
①、变量名
命名规则：
- 以$、_、字母开头和$、_、字母、数字的组合。
- 变量名对大小写敏感。
- 变量名不能使用关键字或保留字命名
②、信息（数据）
js变量存储有很多数据类型。现在只关注字符串及数字
var num=123; var str="这个用双引号引起来的是字符串类型"; var str1='这个用单引号引起来的也是字符串类型';
js变量可存放值和表达式
var num1=23; var num2=34;
③创建变量
创建变量又称声明变量。使用“var”关键字声明。
var a;//声明a; console.log(a);//undefined //只声明未赋值，变量有值为undefined; a=123; / var a=123;//上面的声明方式可以这么简化 // /*var a=1; var b="abc"; var c;*/ var a=1,b="abc",c;//同时声明多个变量时可以使用逗号分隔。简化上面的写法 // var a=123; var a;
7、关键字&保留字
定义：js关键字和保留字主要用于控制语句执行（开始、终止、操作）的特殊字符。
注意：js的关键字及保留字，不能作为变量名使用。
js关键字有：
var new function this return do while for in break continue if else switch case default
js保留字有：
class float public boolean int static import export const extends
第三天：数据类型&运算符
1、数据类型
js数据类型：基本类型（字符串、数字、布尔、null、undefined)、复杂类型(数组、对象)。
1.1、基本类型
①、字符串（String）
定义：存储字符的变量。
显示方式：由一对单引号（'任意字符'）或双引号（"任意字符"）包裹的任意字符。
注意：上述任意字符中不可嵌套对应的引号，若要嵌套可使用反斜杠（\）转义字符。转义字符可转义如下字符：
\n //换行字符 \r //回车 \' //单引号 \" //双引号
②、数字（Number）
定义：保存阿拉伯数字的变量。
数字分为整数、浮点数(小数)
③、布尔类型（Boolean）
定义:保存逻辑的变量。
布尔值仅有true和false
④、null&undefined
区别：
- 都表示变量不含有值 。
- 值不同。null的值是null，undefined的值是undefined。
- 代表的信息不同。null表示指向对象的空指针(不指向任何对象)，undefined表示变量仅声明未赋值。
- 转为数字时值不同。null转数字为0；undefined转为数值时为NaN。
- 赋值时清空的对象不同。undefined用于清空值，值为空。null用于清空对象，表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
- 用法不同。
-
- undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
- 变量被声明了，但没有赋值时，就等于undefined。
- 调用函数时，应该提供的参数没有提供，该参数等于undefined。
- 对象没有赋值的属性，该属性的值为undefined。
- 函数没有返回值时，默认返回undefined。
- null表示"没有对象"，即该处不应该有值。典型用法是：
- 作为函数的参数，表示该函数的参数不是对象。
- 作为对象原型链的终点。
- undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
1.2、复杂类型(引用类型)
①、数组（Array）
定义：存储一系列值的变量
语法：var arr=[中括号包裹，逗号，隔开的，数据];
②、对象（Object）
定义:带有属性及方法的特殊数据类型
语法：var obj={属性名：属性值，标识符：信息，key：value};
2、js运算符
js运算符有四大类分别是：算术运算符、赋值运算符、比较运算符、逻辑运算符。
2.1、算术运算符
定义：用于执行变量或值之间的算术运算。
包含：+(加)|-(减)|*(乘)|/(除)|%(模：求余)|++(累加)|--(累减)
知识点：
- i++和++i的区别；
- i++是先赋值后运算
- ++i是先运算后赋值
var i=5; console.log(i++);//同下 /*console.log(i); i=i+1;*/ /// var j=5; console.log(++j);//同下 /*j=j+1;
2.2、赋值运算符
定义：将运算或值赋值给变量。
包含：=|+=|-=|*=|/=|%=
var i=5;
2.3、比较运算符
定义：测定变量或值是否相等。用于逻辑语句中。
包含：==|===|!=|>|=|
知识点:
- ==和===的区别
- ==仅用于比较值是否相等。类型不同时，数据类型会隐式转化
- ===既比较数据类型，又比较值。
2.4、逻辑运算符
定义：测定变量或值之间的逻辑。
包含：&&(且)|||(或)|!(非)
第四天：条件语句
定义：条件语句用于基于不同的条件执行不同动作（代码块）。
包括：if语句、switch语句
1、if语句
if语句包括：if...|if...else|if...else if..else
1.1 if
只有指定条件为真时其代码块才执行
语法：if(条件){条件为真时，执行代码块}
1.2 if...else...
语法：if(true){条件为真执行代码块}else{条件为假时执行代码块}
1.3 if...else if..else...
语法：if(条件1){条件1为真执行代码块}else if(条件2){条件2为真执行代码块}else{以上条件全为假，执行代码块}
2、switch语句
//语法 switch(key){ //key:待判断的值 case value: //value:比较值 //待判断的值 与 比较值 全等(===)比较后为真时执行的代码 break; //break:阻止代码向下个case执行。 default: //比较全为假执行的代码 break;
工作原理：设置一个带判断的值与switch代码块中每个case至上而下全等比较。如果为真则执行其case关联的代码块。使用break阻止代码向下个case执行。若与各case值比较后全为假，则执行默认（default）关联的代码。
第五天：循环语句&&检错
1、循环语句
定义：将代码块执行指定的次数。
循环包含：for | while | do...while...
1.1、for循环
语法：for(初始化语句；条件语句；运算语句){条件语句为真时执行代码块}
for(var i=1;i<11;i++){ console.log(i);//1.2.3.4.5.6.7.8.9.10
工作原理：页面加载时先执行初始化语句，再执行条件语句。若条件语句为真时执行{}代码块，后执行运算语句，再执行条件语句,为真时执行代码块...；
1.2、while循环
语法：while(条件语句){条件语句为真时执行代码块，代码块里须有可使条件为假的代码，否则会死循环}
var i=1; while(i<11){ console.log(i);//1,2,3,4,5,6,7,8,9,10 i++;
1.3、do...while循环
语法：do{1、加载时先执行一次代码块；2、条件满足时重复执行代码块。（代码块里须有可使条件为假的代码，否则会死循环）}while(条件语句)；
var i=1; do{ console.log(i);//1,2,3,4,5,6,7,8,9,10 i++;
知识点
while循环和do...while循环的区别
- 执行顺序不同：
- while循环先执行条件语句，条件语句为真时，执行代码块
- do...while循环先执行do代码块，再执行条件语句。条件语句为真时执行do代码块。
1.4、关键字(continue&break)
continue:用于跳出本次循环，直接执行下一次循环
for(var i=1;i<11;i++){ if(i==5){ continue; } console.log(i);//1,2,3,4,6,7,8,9,10(不执行5)
break:用于终止循环执行。
for(var i=1;i<11;i++){ if(i==5){ break; } console.log(i);//1,2,3,4(5及以后不执行)
2、代码检错(选读)
2.1、try...catch
语法：try{检测的代码块}catch(error){try代码块错误时执行代码块}
try { console.lag(123); } catch (error) { console.log(error);//TypeError: console.lag is not a function at js-07.html:16
2.2、throw
定义：创建自定义错误（抛出错误或异常）。与try...catch一块使用可控制程序流生成自定义错误。
var age=15; try{ if(i<18){ throw "您还是个未成年人哟" }else { throw "您已经成年了" } } catch(error) { document.write(error);//"您还是个未成年人哟"
2.3、finally
语法：try{测试代码块}catch(error){try代码块错误时执行代码块}finally{无论try|catch结果如何都执行代码块}
var i=13; try { if(i<18){ throw "您是一个未成年人" }else{ throw "您已经成年" } } catch (error) { console.log(error);//"您是一个未成年人" }finally{ console.log("您检测了年龄");//"您检测了年龄"
第六天：函数&对象入门
1、函数入门
定义：函数是由事件驱动的、被调用时执行、可重复使用的代码块。
1.1、创建函数（声明函数）：
①、函数声明
语法：function 函数名(){//调用时可执行代码块}
②、函数表达式
语法：var 函数名=function(){//调用时可执行代码块}
③、知识点：
- 函数声明和函数表达式的区别？
- 函数声明可以先调用后声明。js加载时会优先加载函数声明，在调用时函数已存在。
- 函数表达式必须先声明后调用。js加载时虽然函数变量名会声明前置，但是其值并不存在(undefined)。
1.2、函数传参
语法：function 函数名(形参1，形参2，...){} 函数名(实参1，实参2，...)； (函数表达式同理)
1.3、函数返回值
语法：function 函数名(){return 函数返回值}
注意：函数返回值可有可无。若需要返回使用return关键字返回，其语句后代码不会执行。无返回值时值为undefined。
2、对象入门
定义：对象时具有属性和方法的特殊数据类型。
js外物皆对象。也可以自定义对象。
2.1、创建自定义对象
var obj1=new Object(); var obj2=new Object;//不推荐
2.2、操作对象（增删改查）
var obj={}; //增 obj.a=123; //对象.属性名(同变量命名规则)=属性值 obj["b"]="abc"; //对象["字符串"]=属性值 console.log(obj)//{a:123,b:"abc"}; //删 delete obj.a; delete obj["b"] //改(对象属性名具有唯一性) obj.a=345; obj["b"]="efg"; //查 console.log(obj.a);//345 console.log(obj["b"]);//"efg" //遍历 for(var i in obj){ console.log(i);//a,b console.log(obj[i]);//345,"efg"
第七天：内置对象~数字(Number)、字符串(String)&日期(Date)
1、数字(Number)
创建数字：
var numb1=new Number(123);//不推荐
注意事项：
- js数字均为64位
- 整数最多解析15位
- 小数点后最多解析17位
- 小数运算时并不准确（0.1+0.2）//0.30000000000000004
常用方法：
- toFixed(2):保留小数位数（会将数字转为字符串）
2、字符串(String)
2.1、创建字符串：
var str1=new String("abc");//不推荐
2.2、属性
- length:用于获取字符串长度
2.3、方法
var str="abcdefc"; //增 str+="ghi"; //截取 console.log(str.substr(2,2));//"cd" 参数1：截取的起点索引。参数2：截取的个数（不传，截取到最后） console.log(str.substring(2,5));//"cde" 参数1：截取的起点索引。参数2：截取止点索引（不包含）（不传，截取到最后） //改 console.log(str.replace('c','g'));//"abgdefc" //查 console.log(str.indexOf("c"));//2。获取字符在字符串中首次出现的位置（索引） console.log(str.lastIndexOf("c"));//6。获取字符在字符串中最后出现的位置（索引） console.log(str.charAt(3));//"d"。根据索引获取对应字符 //字符串-->数组 console.log(str.split(""));//["a","b","c","d","e","f","c"]。参数：以什么字符分隔 //字母转大写 console.log(str.toUpperCase());//ABCDEFC console.log(str.toLowerCase());//abcdefc //清楚前后空格
3、日期(Date)
3.1、创建日期对象
var dt=new Date();
3.2、常用方法
var dt=new Date(); console.log(dt.getFullYear());//获取年份 console.log(dt.getMonth());//获取月份（获取的月份+1） console.log(dt.getDate());//获取日 console.log(dt.getDay());//获取星期 console.log(dt.getHours());//获取小时 console.log(dt.getMinutes());//获取分钟 console.log(dt.getSeconds());//获取秒 console.log(dt.getTime());//获取毫秒（时间戳） console.log(dt.toUTCString());//将世界时间转字符串 //获取时间戳的方法 //1、(new Date()).getTime();
第八天：内置对象~数组(Array)、布尔(Boolean)、算数(Math)
1、数组(Array)
1.1、创建数组
var arr=new Array(); var arr1=[];//推荐 //注意
1.2、数组属性&方法
var arr=[1,3,5,7]; //属性 console.log(arr.length);//4。获取数组项数 //方法 //增 arr.unshift("a",null);//["a",null,1,3,5,7]首增 arr.push("b",undefined);//["a",null,1,3,5,7,"b",undefined] //删 arr.shift();//[3,5,7] 首删 arr.pop();//[3,5] 尾删 arr.splice();//不传参全部删除；传一个参数：从索引为多少开始删，其后全部删除；参两个参数：splice(开始删除项的索引,其后删除项数) //改 arr[2]=9;//[1,3,9,7]; arr.splice(1,1,11);//[1,11,9,7] splice(开始修改的索引,其后替换几项,用什么来替换) //查 console.log(arr[1]);//3 [索引]取值 console.log(arr.slice(1,3))//[3,5] 同字符串的substring,slice(开始查询的索引,结束查询索引的前一位); //合并数组 console.log(arr.concat([2,4,6],[11,13]));//[1,3,5,7,2,4,6,11,13] //数组转字符串 console.log(arr.join("-"));//"1-3-5-7" join("用什么字符合并") //倒序（翻转） console.log(arr.reverse());//[7,5,3,1] //排序 arr.sort(funcion(a,b){ //return a-b;//升序排列 return b-a;//降序排列
2、布尔(Boolean)
作用：用于将非逻辑值转换为逻辑值(true|false)
在进行逻辑判断时会将非逻辑值隐式转换为逻辑值再判断，隐式转换规则如下：
| 数据类型 | 转换成true | 转换成false |
| 字符串 | 任何非空字符串 | 空字符串 |
| 数字 | 非0数字 | 0 |
| null | null | |
| undefined | undefined | |
| 复杂类型(引用类型) | 任何对象 |
3、算数(Math)
作用：执行常见的算数任务。
console.log(Math.abs(-123));//123 绝对值 console.log(Math.ceil(2.002));//3 向上取整 console.log(Math.floor(3.9998));//3 向下取整 console.log(Math.max(2,5));//5 获取两个数字较大的 console.log(Math.min(2,5));//2 获取两个数字较小的 console.log(Math.pow(2,3));//8 获取几次幂 console.log(Math.round(3.14));//3 四舍五入
知识点
3.1、随机数公式
- 获取两个数之间的随机整数（不包含最大及最小值）
var num=Math.ceil(Math.random()*(最大值-最小值-1)+最小值);
- 获取两个数之间的随机整数（包含最大及最小值）
var num=Math.floor(Math.random()*(最大值-最小值+1)+最小值);
4、正则表达式(regExp)
4.1 定义：
正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串
4.2 用途：
①、测试字符串内的模式是否满足格式
②、替换文本
③、基于模式匹配从字符串中提取字符串。
4.3 创建
组成：正则表达式的组建可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。
语法：①、字面量：/pattern/attributes ②、创建对象：new RegExp(pattern, attributes);
4.4 方法
第九天：DOM
1、定义：DOM（Document Object Model）是文档对象模型。
2、获取DOM对象
2.1、通过标签名获取DOM对象(getElementsByTagName)
var divs=document.getElementsByTagName("div");//HTMLCollection：HTML集合。得到一个类数组结构
2.2、通过样式名获取DOM对象(getElementsByClassName)
var divs=document.getElementsByClassName("active");//HTMLCollection：HTML集合。得到一个类数组结构
2.3、通过锚点（id）获取DOM对象(getElementById)
var wp=document.getElementById("wp");
2.4、通过name属性获取表单元素
var ipts=document.getElementsByName("hobby");//NodeList:标签列表。类数组
2.5、通过选择器获取一个DOM对象
var wp=document.querySelector("#wp"); console.log(wp); var div1=document.querySelector(".div");
2.6、通过选择器获取一组DOM集合
var divs=document.querySelectorAll(".wp");//NodeList:标签列表。类数组
3、操作Dom
3.1、操作Html元素（innerHTML）
document.write("这是新写入的文档,并不常用"); //html <div id="wp"><span>这是里面的文本</span></div> //js var wp=document.getElementById("wp"); //获取 console.log(wp.innerText);//"这是里面的文本" //获取DOM里的文本 console.log(wp.innerHTML);//"<span>这是里面的文本</span>" //获取DOM里的HTML //修改 wp.innerText="替换文本";//<div id="wp">替换文本</div>。原有的标签也会替换掉
3.2、操作HTML属性（DOM对象.属性名）
//html <div id="wp" class="div1">这个div</div> //js var wp=document.getElementById("wp"); //获取 console.log(wp.id);//"wp" //修改
3.3、操作HTML样式（DOM对象.style.样式属性名(两个及以上单词组成的须改为驼峰式写法)）
//html <div id="wp" style="font-size:20px;">这个是20像素的字体</div> //js var wp=document.getElementById("wp"); //获取 console.log(wp.style.fontSize);//"20px" //修改
3.4、对事件做出反应（DOM对象.on事件类型=function(){}）
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
