I. 基本使用
Java和Javascript的区别：只是名字类似，并没有联系。
1>JavaScript 是什么
JavaScript原名liveScript（以下简称JS）， 是一门动态类型，弱类型基于原型的脚本语言
不同于python的是CSS和JS不会有明显的报错
参考文档：JavaScript 简介
2>js的书写位置
2.1>script标签里
直接写入html的script中
<script>
// console.log('ok') //在Console里显示ok，F12
alert('ok') //弹窗，内容为ok
</script>
2.2>导入外部JS文件
在script标签属性中，通过<script src="test.js"></script>导入外部的JS文件。
注意：要么导入，要么写在标签里，不能再导入js文件的script标签内再写js代码。
3>JS代码的存放位置&修改元素内容
script代码可以放到head里，也可以放到body标签结束前，这里存在一个先后顺序的问题，推荐后者，这里以object.innerHTML修改元素为例：
<body>
<div>hello world</div>
<script>
var object = document.getElementsByTagName("div")[0];
object.innerHTML = "Hello,World!" //修改div中的内容
</script>
</body>
如果直接放在head标签里就不会有修改的作用，想要在head里修改，可以用
<script>
window.onload=function () {
var object = document.getElementsByTagName("div")[0];
object.innerHTML = "Hello,World!"
}
</script>
4>JS 一些注意事项
- 严格区分大小写
- 每一行完整语句后面加分号
- 变量名不能使用关键字和保留字
- 代码要缩进，保持可读性
5>JS 获取元素
5.1>通过id:
document.getElementById("");
//通过id来获取对象,唯一
var obj = document.getElementById("box1");
console.log(obj);
5.2>通过classname:
document.getElementsByClassName("");
//class,可多个
var obj1 = document.getElementsByClassName("box")[1];
console.log(obj1);
5.3>通过标签名:
document.getElementsByTagName("");
//tagName,可多个
var obj2 = document.getElementsByTagName("div")[1];
console.log(obj2);
5.4>通过 name的属性
一般用于input:document.getElementsByName("");
//name,可多个
var obj3 = document.getElementsByName("phone")[0];
console.log(obj3);
5.5>通过CSS选择器
5.5.1>获取一个:
document.querySelector ("");
//CSS选择器，通过class选择
var obj4 = document.querySelector(".box");
console.log(obj4);
//通过id选择
var obj6 = document.querySelector("#box1");
console.log(obj4);
//通过tagName选择
var obj7 = document.querySelector("div");
console.log(obj4);
5.5.2>获取所有:
document.querySelectorAll("");
//通过class选择所有
var obj5 = document.querySelectorAll(".box")[1];//获取一个数组，可以通过访问下标来获取单个属性
console.log(obj5);
II. 基础事件
javascript提供的一些事件，当完成相应的动作时就会触发相应的效果，这里的做法是触发动作后执行一个函数（function）里面的内容
1>点击事件
<div>点击事件</div>
<script>
var box = document.querySelector("div");
//点击事件
box.onclick = function () {
console.log("单击"); //当触发单击时，会在console里产生单击事件
};
box.ondblclick = function () {
console.log("双击"); //当触发双击时，会在console里产生双击事件
}
</script>
2>滑入滑出事件
<script>
//鼠标的滑入
box.onmouseenter =function () {
box.style.backgroundColor = "red"; //滑入时颜色变为红色
};
//鼠标滑出
box.onmouseleave = function () {
box.style.backgroundColor = "skyblue"; //滑出时颜色变为天蓝色
};
</script>
3>改变窗口事件
<script>
//窗口变化，浏览器的窗口发生变化时触发
window.onresize = function () {
console.log("窗口变化了");
};
</script>
4>改变下拉框事件
<script>
var dropdown = document.querySelector("select");
dropdown.onchange = function () {
console.log("下拉框内容被改变")
}
</script>
III. 修改样式
通过调用对象方法style可以直接再script语句中改写标签的样式，可以直接通过访问属性obj.style.color等方式修改单个样式，亦可以通过obj.style.cssText 来修改多个样式，不过在修改多个样式时会替换掉之前已设置的所有样式。
<div>我就是我，不一样的烟火</div>
<input type="button" value="改变字体颜色">
<script>
var btn = document.querySelector("input");
var obj = document.querySelector("div");
btn.onclick = function () {
//修改单个样式
obj.style.color = "red"; //修改字体颜色1
obj.style["color"]="red"; //修改字体颜色2
console.log("color"); //上面执行成功了才会执行这个
//修改多个样式
obj.style.cssText = "height:200px;width:200px;background:skyblue;";
//这里的更改会直接替换掉之前的更改，因此只会应用这里的改动，而不会应用字体的颜色
console.log("size") //上面执行成功了才会执行这个
};
</script>
使用obj.style["color"]="red";可以实现传参修改样式，而obj.style.color = "red";的使用就比较固定
obj.style.cssText=样式的属性可以用字符串拼接来实现
属性操作
什么是属性？ 标签内除了标签以外其他的部分，标签内的属性又分为：合法属性，自定义属性
属性的操作分为：增 删 改 查
<style>
.box{
color: red;
}
.up{
color: skyblue;
}
</style>
<script>
var box = document.querySelector("div");
// 合法属性
box.className = "box"; //给div定义一个class="box"，无则增，有则改
box.className = "up"; //将className改为class="up",div已经有className，这里就改
console.log(box.className); //查询div当前的className
box.removeAttribute("class")； //删除掉指定的属性
// 自定义属性
box.setAttribute("a","b"); //增加一个自定义属性a，属性值为b，同样是无则增，有则改
box.setAttribute("a","c"); //更改自定义属性a的属性值到c
console.log(box.hasAttribute("a")); //查询是否有属性a
box.removeAttribute("a"); //删除掉指定的属性,和合法属性的操作一样
</script>
数据类型
javascript 中有六种主要的数据类型：
string(字符串)、number(数值)、boolean(布尔值)、undefined(未定义)、null(空)、object(对象)
<script>
var name = "test"; //String:：length属性（字符串长度）
var age = 18; //Number：整数和小数
var flag = true; //Boolean：True和False
var a; //undefined：如果定义时没有赋值，则默认为类型
var b = null; //由于没有类的共性，所以被单独分为一个类型
console.log(typeof a); //：undefined
console.log(name. length); //字符串类型的对象可以调用length查看长度: 4
console.log(typeof b); //object
//object类型:数组，json
var arr = [1,2,3]; //数组
var user = {name:"jack",age:18}; //Josn
</script>
运算符
JS中也有运算符，大部分运算符的使用方法与python相似，主要分为四大类：算术运算符，赋值运算符，比较运算符，逻辑运算符
算术运算符
除了常见的 加、减、乘、除之外，JS中还有 取模（%）等运算符，这里简单介绍一些常用的
字符串运算
JS里的加号的两边只要有了字符串，则加号就会变成拼接符号，得到的最终结果就会是一个拼接的字符串。
但是执行 减、乘、除、取余**（- * / %）时，会尽量将字符串转换成数字**进行运算（隐式类型转换），如下
var a = 8;
var b = "5";
var c = "q";
var d = a-c;
console.log(a+b); //将8和5拼接：85 string
console.log(a-b); //3 number
console.log(a*b); //40 number
console.log(a/b); //1.6 number
console.log(a%b); //3 number
console.log(d); //但是当运算的字符串不是数字时就会计算为：NaN, Not a Number
console.log(typeof d); //number
对于算术运算符要注意的是，字符串和数字之间的相加减，以及布尔类型和字符，数字之间的相加减
console.log(a+true); //9
console.log(a+false); //8
console.log(b+true); //5true
console.log(b+false); //5false
赋值运算符
赋值运算符包括：=、+=、-=、*=、/=、%=，其计算方式为：a+=3 <==> a=a+3
<div id="box">999</div>
var oBox = document.getElementById("box");
oBox.innerHTML += "<h1>666</h1>"; //追加一个h1标签，这种操作仅限于加法运算，即拼接
-=、*=、/=、%=在做关于字符串的赋值时会变成NaN，例如
var b = '15';
var c = '23';
var d = 'aa';
console.log(b*=c); //150
console.log(d*=c); //NaN //NaN :Not a Number number类型，一般在非法运算的时候才会 出现NaN
自增（++）& 自减（–）
放在对象后面表示每执行一次就会加一（i++ ==> i = i+1）和JAVA类似，自减同理，两个都存在隐式类型转换，会全部转换为数字
var b = "5";
b++;
console.log(b); //6
b--;
console.log(b); //5
//运算顺序
var x = 5;
var y = x ++; //y = x ; x = x + 1;
console.log(x,y); // 6 5
var a = 5;
var b = ++ a; //a = a + 1; b = a;
console.log(a,b); // 6 6
比较运算符
比较运算符有: >、>=、<、<=、、=（全等）
var a = 10;
var b = 15;
var c = '10';
console.log(a>b); //false
console.log(a>=b); //false
console.log(a<b); //true
console.log(a<=b); //true
console.log(a==c); //只比较数值是否相等：true
console.log(a===c); //不仅仅比较数值，还会比较类型：false
逻辑运算符
/*针对布尔值 true false
&& 与 两边都为真，结果才为真，其他为假
|| 或 两边都为假，结果才为假，其他都是真
! 非 取反，真变假，假变真*/
var a = true && true && false; //false
var a = false || true; //true
var a = false || false; //false
var a = !false; //true
/*当逻辑运算符，两边不一定是布尔值的时候
&& 遇到假就停，返回最后一个参与运算的值，但是不会进行类型转换
|| 遇到真就停，返回最后一个参与运算的值，但是不会进行类型转换
！ 隐式类型转换，将后面的数据先转换为布尔值再取反*/
console.log(8 && true && 5); //5
console.log(8 && 0 && false); //0
console.log(false || 0 || -5 || 8); //-5
console.log(false || 0); //0
console.log(!''); //true
console.log(!'0'); //false
流程控制
if else语句
和python类似，JS也有 if else语句用来控制执行的流程
//当if的条件 运算完后不是布尔值的时候 会被强制性的转换为布尔值
/*哪些值，在转换为布尔值的时候为false
0 number
false boolean
"" string
null object/null
undefined undefined
NaN number //NaN :Not a Number number类型，一般在非法运算的时候才会 出现NaN*/
//条件为真时执行真语句，否则执行假语句
if(""){
alert("真");//条件为真的时候执行
}else{
alert("假");//条件为假的时候执行
}
//当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件的后面
if(8>5) alert("8大于5");
//真语句一行，假语句一行 三目运算
//条件为真?真语句:假语句; //条件为真时执行真语句，否则执行假语句
""?alert("真语句执行"):alert("假语句执行");
var a;
8>3?a=8:a=3; //a=8
//当三目的真假语句都是给同一个变量赋值的时候，可以更近一步简写
a= 8>3?8:3; //a=8
/*在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
在两个值比较的时候，能用===判断的时候，就用===判断*/
alert("8" == 8);//true
alert("8" === 8);//false
switch语句
var name = "jack";
//全等判断 break 来阻止代码自动地向下一个 case 运行
switch(name){
case "jack":
alert(name + "真阔爱");
break;
case "mack":
alert(name + "真帅");
break;
default:
alert(name + "你是谁");
break;
}
循环语句
for循环
for(var i = 1;i < 10; i ++){
if(i == 5){
//break; //终止循环 结束循环 没有执行的代码不会继续执行 1234
continue; //跳出本次循环 未执行的代码继续执行 1234 6789
}
console.log(i);
}
//语句中至少要有两个分号
var i = 1;
for(;i < 5;){
console.log(i);
i ++;
}
while循环
如果条件不满足，则不会执行
var i = 10;
while(i<6){
console.log(i);
i++;
}
do while循环
至少会执行一次，无论条件满足与否
var a = 100;
do{ //至少执行一次
console.log(a); //100
a ++;
}while(a < 11);
字符串方法
JS中的字符串的索引、下标、偏移量都是从0开始，其方法参照下表
| 关键字 | 作用 |
|---|---|
| str[index]; | 通过索引取字符串 |
| str.length; | 获取长度 空格也算 |
| str.substring(start,end) | 截取字符串 会比较参数值的大小，小的参数在前面，负数变为0 |
| str.slice(start,end) | 切片，开始大于结束取不到值， 负数可以反向取值，有点像python的索引概念 |
| str.split(separator,limit) | 按指定分隔符切割，返回数组，limit传入数字，表示限制切割次数 |
| str.indexOf(searchStr, position) | 查找字符串，成功返回索引，否则返回-1， 第二个参数传入开始索引点 |
| str.toUpperCase() | 全部转换大写 |
| str.toLowerCase() | 全部到小写 |
索引访问
通过索引取的字符串，只能查看，不能改写
var str = "wo shi shui";
console.log(str.length); //:11
console.log(str[4]); //可读性：h
str[0] = "Q"; //不可写 不能修改
console.log(str); //:wo shi shui
数组方法
数组 主要存放数据的一个序列
| 关键字 | 作用 |
|---|---|
| arr.length | 查看数组的个数 |
| arr[] | 可以读可写，和str不同，数组可以通过索引改写 |
| arr.push() | 在后面添加 能同时添加多个值 |
| arr.unshift() | 在前面添加 能同时添加多个值 |
| arr.pop() | 删除数组的最后一个 |
| arr.shift() | 删除数组的第一个 |
| arr.splice() | 删除指定数量的元素，如有必要，插入新元素，返回已删除的元素 |
| arr.sort() | 顺序来排序 |
| arr.reverse() | 倒序排序 |
| arr.join() | 将数组拼接成字符串，默认以逗号为间隔符，传入参数可以更改间隔符 |
splice()
var arr = ["Jack","Mack","Jax"];
arr.splice(2); //删除指定索引上的元素："Jax"
console.log(arr); //剩余的元素：["Jack","Mack"]
arr.splice(1,2); //从索引1开始，删除2位
console.log(arr); 剩余的元素：["Jax"]
arr.splice(1,0,"Bob","Nacy"); //从索引1开始，删除0位(即不删除)，插入后面两个元素："Bob","Nacy"
console.log(arr);
join()
var arr2 = ["I","just","wanner","run"];
var str = arr2.join("_"); //以_为间隔符
console.log(arr2); //:I_just_wanner_run
其他方法
在js里面的小数和整数统一都是数字，-2^53到 2^53，超出范围之后精度就会不准确
| 关键字 | 作用 |
|---|---|
| isNaN(obj) | 判断提供的对象是否为非数字，返回布尔值 |
| value.toString(); | 将指定对象转换为字符串 |
| value.toFixed(n); | 返回用定点表示法表示数字的字符串。 四舍五入保留n位小数，返回值为string类型 |
| isArray() | 判断是否为数组，返回布尔值 |
| parseInt() | 将参数转换为数字，整数部分遇到不是数字就停 |
| parseFloat() | 将参数转换为数字，直到小数部分遇到不是数字就停 |
| Number() | 字符串转数字，参数中必须能被转换成数字，否则返回NaN |
toString();
将指定对象转换为字符串
var a = 8; //number
console.log(typeof a.toString()); //:string //typeof obj, 获取obj的类型
isNaN()
isNaN(参数) 非常讨厌数字，首先尽量把参数转换成数字，然后当参数是 数字，返回 false，当参数不是数字，返回 true
var a='1',
b='s';
alert(isNaN(a+b)); //a+b='1s': true
Number()
var str = "555";//555
// var str = "aaa";//NaN
var num = Number(str);
console.log(num);
console.log(typeof num); //number
parseInt() & parseFloat()
var str1 = "88.89qq99";
console.log(parseInt(str1)); //只取整数位：88
console.log(parseFloat(str1)); //取到小数位：88.89
Math 数学函数
| 关键字 | 作用 |
|---|---|
| Math.pow(16, 2) | 十六的平方 256 |
| Math.round(5.5) | 四舍五入（整数）6 |
| Math.ceil(0.2) | 向上取整 1 |
| Math.floor(0.9) | 向下取整 0 |
| Math.max() | 取一组参数中最大的值 |
| Math.min() | 取一组参数中最小的值 |
| Math.PI | 常量 π |
| Math.abs() | 求绝对值 |
| Math.random() | 0-1的随机数(0,1) |
| Math.random()*m+n | 通过设置m和n的值，实现从指定范围生成的随机数，生成 n ~ (m+n) |
日期对象
var data = new Date();
console.log(data); //Sun Mar 31 2019 16:50:30 GMT+0800 (中国标准时间)
console.log(data.getTime()); //1554022230009
var year = data.getFullYear(); //年
var mon = data.getMonth()+1; //月，从0开始算,所以要+1
var date = data.getDate(); //日
var hour = data.getHours(); //时
var min = data.getMinutes(); //分
var sec = data.getSeconds(); //秒
var day = data.getDay(); //星期
document.body.innerHTML = year+"年"+mon+"月"+date+"日"+hour+"时"+min+"分"+sec+"秒"+"星期"+day;
//2019年3月31日16时50分30秒星期0
思考：如果秒数小于10，或者分钟数小于10，那么显示的个位数，并不会前面补0,应该怎样修改代码，可以让达到小于10，就补0?
解决方法：
var tmp1 = minutes>9? ":":":0";
var tmp2 = second>9? ":":":0";
title[1].innerText = "北京时间："+year+"年"+month+"月"+day+"日 "+hour+tmp1+minutes+tmp2+second;
函数
函数是通常是把一系列重复使用的操作封装成一个方法，可以通过事件驱动函数
在JS中其主要分为：有名函数、匿名函数
有名函数
即有名字的函数，可以通过函数名加括号执行，或者可以充当事件函数执行
fn(); //函数定义 可以在定义前加括号执行，也可以在定义后加括号执行
function fn() { //fn就是函数的名字
alert(2);
}
匿名函数
即没有名字的函数，匿名函数不能单独出现，一般充当事件函数
var aDiv = document.getElementsByTagName("div");
aDiv[1].onclick = function (){ //该函数仅用于这一个事件，没有名字
alert(2);
};
函数表达式
() + - ! ~ 可以将匿名函数变为函数表达式
特点：可以在后面加括号立即执行
//函数表达式
fn(); //Uncaught TypeError: fn is not a function
var fn = function () { //通过var 的函数，只能在后面运行
alert(1);
};
fn();
~function () {alert(1);}();
+function () {alert(2);}();
-function () {alert(3);}();
!function () {alert(4);}();
(function () {alert(5);})();
(function () {alert(6);}());
实参与形参
实参
function fn(x) {//形参（相当于函数局部的变量，命名规则和var相同）(定义，无中生有)
console.log(x*x);
}
形参
//执行函数时 可以传递 实参(用已知的变量 / 具体的数据)
var a = 9;
fn(a); //:81
fn(15); //:225
特性
//实参和形参个数不一定非得一样，但是不一样的时候要注意一一对应的关系
sum(1,2,3);
function sum(x,y) {
alert(x+y); //1+2=3,第三个参数没有被使用
}
sum(1,2); //8
function sum(x,y,z) {
// var x,y,z;
// alert(x);
// alert(y);
// alert(z); //当z没有被传参时,为undefind
x = x || 5;
y = y || 5;
z = z || 5; //设置一个或值，即当z没有被传参时，其值为5
alert(x+y+z);
}
不定参arguments
sum(1,2,3,4,5,6,7,8,9,10); //不定参可以接收任意个的参数
function sum() {
console.log(arguments.length); //10
console.log(arguments[5]); //6
console.log(typeof arguments); //object
let x = 0;
for(var i = 0,len = arguments.length; i < len; i++){
x += arguments[i]; //求和
}
console.log(x); //55
}
作用域
javascript解析顺序
1.（定义）先解析var function 参数
a.该步骤的var只定义变量，后面的=赋值不解析
b.该步骤的函数只定义函数，函数的执行不解析
c.重名的只留一个，var 和 函数重名 函数优先
2.（执行）再从上至下执行其他代码
作用域：作用：读写 ，域：范围，区域
var a = 1;
function fn() {
alert(2);
a = 5;
}
fn();
alert(a);
/*
1 找
1) var a ===> a = undefind
2) function fn()
2 执行
1) a = 1;
2) fn();
(1)找 a = 1;
(2)执行
-1- alert(2); //:2
-2- a = 5; //如果此函数没有的话 会从里往外找 去父级作用域
3) alert(a);
(1)找 a = 5;
(2)执行 alert(5);
*/
return
如果没有指定return的值，则每个函数默认返回 return undefined，如果设置了return值，可以同给赋值给对象来获得这个值
function fn() {
return 5;
}
var a = fn();
alert(a); //5
定时器
延迟定时器（Timeout）
//设置延迟定时器 1000毫秒之后 只执行一次
setTimeout(function () {
console.log(1);
},1000);//1000毫秒 1s = 1000
清除定时器
clearTimeout(定时器的名字)
清除定时器的时候，要给定时器加个名字
间隔定时器（Interval）
//设置间隔定时器 每过1000毫秒执行一次
setInterval(function () {
console.log(2);
},1000)
清除定时器
clearInterval(定时器的名字)
清除定时器的时候，指定定时器的名字
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
