简介
背景历史
94年网景公司 研发出世界上第一款浏览器。
95年 sun公司 java语言诞生
网景公司和sun合作。
Java+script ===> javascript
语言定位
javaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
发展历程
2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。
2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。
语法特点及作用
JS全称JavaScript，是一款运行在客户端的网页编程语言。
特点：
- 简单易用（轻量级）。
- 解释执行。
- 基于对象。
- 面向过程。
作用：
- 表单验证。
- 轮播效果。
- 开发游戏。
- 提升用户体验。
书写位置
内嵌
<head>或<body>中的<script>标签内。
只在本页面生效其它页面无法调用
推荐将JavaScript代码写在html闭标签后面
外链
谁调用谁生效
消息体
警告框/弹窗
语法：window.alert(); 简写 alert();
作用：
- 经常用于确保用户可以得到某些信息。
- 用户需要点击确定按钮才能继续进行操作
确认框
语法：window.confirm(); 简写 confirm();
作用：
- 确认框通常用于验证是否接受用户操作。
- 用户可以点击 "确认" 或者 "取消" 来确定用户操作。
- 点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
提示框
语法：window.prompt(“文本消息”, 默认值); 简写 prompt(“文本消息”, 默认值);
日志
语法:console.log();
作用：将信息输出到浏览器的控制台，多用于JS代码调试。
页面
语法：document.write();
作用：在页面输出信息。
注释
单行注释 //
多行注释 /* */
变量
定义：值会变化的量，用来存取数据的容器。
声明方式
语法：
- var 变量名; 声明变量。 变量名 = 值；
- var 变量名 = 值； 声明变量并赋值。
命名规则
- 不能以数字或者纯数字开头来定义变量名。
- 不推荐使用中文来定义变量名。
- 不能使用特殊符号或者特殊符号开头(-除外);
- 不推荐使用关键字和保留字来定义变量名。
关键字和保留字参照表
| 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 |
数据类型
JS拥有{字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）}这7类数据类型。
字符串（String）
字符串是存储字符的变量。字符串可以是引号中的任意文本。可以使用单引号或双引号。
数字（number）
JS只有一种数字类型。数字可以带小数点，也可以不带。
布尔（Boolean）
布尔（逻辑）只能有两个值：true 或 false。
数组（Array）
用来存放多个值，值可以是不同的数据类型。
取值
数组的下标是从[0]开始的。
数组的长度
使用数组的length属性可以获取数组的数据长度。
数组合并
- arr1.concat(arr2);
将两个数组中的全部数据合并成一个新数组。数据的顺序是括号内数组中的数据的在后，两个数组间的相同的数据并不会合并成一个。
- arr1.join(”“)
将数组中的全部数据用括号内的值拼接成一个字符串。
对象（Object）
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
定义：var person = {name:”帅哥”, age:18, sex:’男’, status:true};
使用：person.name; 或person[“name”];
空（Null）
常用来清空变量的值,当不确定变量的值是什么时可以赋值为null。
未定义（Undefined）
定义了变量，却未给变量赋值、这时候使用该变量除赋值操作外的其它操作JS就会报Undefined，表示变量不含有值。
判断变量的数据类型
typeof(变量名);
运算符
加号 +
- 两个数字类型的变量相加，得到的是一个数字类型。
- 一个数字类型和一个字符串相加，得到的是一个字符串，相当于字符串拼接。
- 两个数字字符串相加，得到的是一个字符串，相当于字符串拼接。
- 只有两个数字类型的变量相加才是加法运算，否则为字符串拼接。
- True = 1 fasle = 0
减号 –
- 两个数字类型的变量相减，得到的是一个数字类型。
- 两个数字字符串变量相减，得到的是一个数字类型。
- 一个数字类型和一个数字字符串相减，得到的是一个数字类型。
- 一个数字类型和一个非数字字符串相减，得到的是NaN,NaN是一个数字类型。
NaN（not a number）是一个特殊值，用来表示运算或者判断变量时得到的结果非数值时的值。
乘 *
因数*因数 = 积 a * b = c
只适用于数字类型。
除 /
被除数/除数 = 商
- 两个数字类型的变量相除，得到的是一个数字类型。
- 一个数字类型和一个数字字符串相除，得到的是一个数字类型。
- 两个数字字符串变量相除，得到的是一个数字类型。
- 一个数字类型和一个非数字字符串相除，得到的是NaN,是一个数字类型。
- 0做为除数的时候，得到结果Infinity （无限大），是一个数字类型。
取余 %
只适用于数字类型。
计算公式 a%b = c == > a – (a/b)向下取整 * b
例如：
5%3余数为2。
公式： 5 - （5/3）向下取整*3
5/3=1.6666..向下取整为1
5-1*3 = 2
规律：
- a<b 时 余数永远是a;
- a=0 时 余数永远是0(不可以做除数);
优先级
有（）的先计算（）内的。
自增 ++
n++ 本次取值还是原来的值，下次取值是+1后的值。
++n 本次取值直接是+1后的值。
只适用于数字类型。
自减 –-
n- - 本次取值还是原来的值，下次取值是-1后的值。
--n 本次取值直接是-1后的值。
只适用于数字类型。
比较运算符
小于< 大于> 小于等于<= 大于等于>= 等等== 非等!=
= = = 比较两个变量值和数据类型是否相等
返回的结果是Boolean值[true/false]
=等号用来赋值。
等等用来比较。
赋值运算符
条件语句
需要为不同的决定来执行不同的动作，就需要使用条件语句来完成。
if如果
只有当指定条件结果为true时才会执行的代码块。
语法：
if(条件语句){
结果为true时需要执行的代码。
}
if else
在条件为 true 时执行代码，在条件为 false 时执行其他代码
语法：
if(条件语句){
结果为true时需要执行的代码。
} else {
结果为false时需要执行的代码。
}
if else if else
选择多个代码块之一来执行。
语法：
if(条件1){
条件1结果为true时执行。
} else if(条件2){
条件1结果为false条件2结果为true时执行。
} else {
条件1和条件2结果都为false时执行。
}
else if 可以存在多个
switch
选择多个代码块之一来执行。
语法：
switch(n){
case x : … break;
case y : … break;
default : … ;
}
n通常是一个变量，n的值会与{}内的每一个case去比较，如果存在匹配则做出对应的操作（===比较）。
case：可以有多个。
break：用于中断匹配。
default：表示当case匹配不存在时所需要的操作。
逻辑运算符 && || !
&&：和。必须两个条件同时都为true才执行。
||：或。只要有一个条件结果为true就执行。
!()：非。颠倒是非。条件结果为true时就变为!true = false。结果为false时变为!false = true。
如何选择使用条件语句
- 当条件必须满足是才可以执行，选用if
- 当同一条件会造成不同结果时 选用 if else
- 当不同条件造成不同结果时 选用 if else if 或switch。
文档对象类型(DOM)
DOM使JS拥有操作HTML元素的能力。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM树
DOM作用
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找HTML元素(找对象)
ID
document.getElementById("ID");
查找本HTML页面内ID属性，所对应的HTML对象。
标签名
document.getElementsByTagName("标签名");
查找本HTML页面内所有对应HTML标签对象。
类名
document.getElementsByClassName("类名");
查找本HTML页面内所有class属性对应的HTML对象。
注意事项
- 通过ID找HTML对象，只能找到唯一对应的一个HTML对象，getElementById()。如果一个HTML页面内包含1个以上相同ID，获取HTML对象时得到的是null。
- 通过类或标签名找HTML对象，可以获取到多个对应HTML对象，getElementsByTagName()/getELementsByClassName()。
改变HTML内容
语法： dom.innerHTML ="新内容";
innerHTML增加新内容后会覆盖掉原来的内容。
改变HTML属性值
语法：dom.attribute = "新值";
attribute代表标签属性：例如想要改变img标签的src属性值 dom.src= "新图片地址"; 改变a标签的href属性的值 dom.href= "新路径地址";
改变HTML样式
语法：dom.style.property= "新样式";
property代表style样式的属性名，通过JS改变或新增的样式都是行内样式，除非碰到 !Important 否则都生效。
创建新HTML元素
语法：
- document.createElement("标签名"); 创建一个新标签对象。
- document.createTextNode("文本"); 创建一个新文本内容对象。
- dom.appendChild(); 将某某对象放入到某某对象内。
注意：
- 新标签对象创建后不会在dom文档中显示，必须手动指定它的位置。
- 新文本对象创建后也不会在dom文档中显示，也必须的手动指定它的位置。
- dom.appendChild()是将()内的对象放到选中的dom内，相当于dom的孩子。
- JS只提供向元素对象内某个元素前添加另一个元素对象，并不提供向元素对象后添加另一个元素对象。 向元素前添加元素使用方法：目标dom.insertBefore(newElement, 目标dom内的位置);
-
向元素对象后添加另一个元素对象需要手动编写JS函数，实现向后添加
删除HTML元素
语法：dom1.removeChild(dom2);
注意：
- JS只提供删除孩子元素对象的方法。
- 想删除某个元素对象，必须先找到它的父元素对象。
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
