脚本不能独立运行，依赖于网页

发展之初，仅仅为了脚本验证

ECMA成立，成员来自于各大浏览器厂商。制定了ECMAScript脚本标准

蹭java热度，—> js

script标签的使用

<script src="demo.js"><script>
alert("警告框的使用");
//运行顺序，自上而下
一个script只能做一个事情，在引入外部的script标签中，不能再写。

js中的输出方法

document.write("输出一条HTML代码，可以解释标签的");
console.log("在控制台输出");//用于调试，彩蛋（招聘）
alert

转义字符 &lt &gt 大于小于号

代码压缩，减少换行空格，如果每一条语句都没有分号，很容易出现问题

常量、变量

常量：

基本数据类型：

数字 number 100，200
布尔 boolean true、false
字符串引号 ‘hello world’

复合数据类型：

null 空
undefined
NaN

变量：值可以被修改

声明变量用var关键字。并赋值，对其初始化。如果暂时未赋初值，则为undefined

var num = 10;
alert(num);

变量命名、弱引用

标识符=变量名：所有用户自定义的名字

命名规则：

只能有数字、字母、下划线和美元符号组成
不能以数字开头
不能是保留字、关键字
大小写敏感
见名知义
驼峰命名法、下划线连接法

弱引用，赋值给他，他就是什么类型

typeof() 输出当前变量的数据类型。

进制转化

十进制、八进制、二进制、十六进制

js运算符

运算符

算数运算符 ±*/ 。其中有一个操作数是字符串，运算符是+，则会进行字符串连接操作。如果操作数是字符串类型，先转化为数字类型，然后做减法。trye转化为1，false变为0
关系运算符 > < =
逻辑运算符 && || !
赋值运算符

赋值运算符

强转化

Boolean() 将值转化为布尔值，非0即真，非空即真

Number()将类型变为数字类型只能将“110”转化，若是"100a",则NaN

parseInt() 取整。从左往右取整数。

parseFloat() 若被转化的数第一个是字母，则NaN

关系、逻辑运算符

流程控制语句

顺序、选择、循环、判断

单分支、多分支

if(判断条件1){执行语句;
}
else if(条件2){执行语句;
}
else{执行语句;
}switch(num):case 1://dobreak;case 2://dobreak;default:break;

循环

//计算机很蠢的，只会计算10.但是优点就是快
//while   do while    for
while(1){document.write("hello<br/>");
}
do{alert(i);i++;
}while(i<10)

函数

//函数声明
/*function 函数名(){//coding
}*/
//函数名需要见名思意
function print(){for(var i=0;i<10;i++){console.log(i);}
}
//调用函数
print();有返回值类型的函数
function say(){return "hello";
}
var str = say();
console.log(str);有参数的函数
function mySelf(name,age){alert("I am"+name+"my age is "+age);
}
mySelf("洋葱",13);
//封装
注意，对函数运行不同结果有不同的处理方式，则将函数设置为又返回类型的函数。return

arguments

每一个函数内部都会有一个arguments。自动生成的

function show(name){            alert(arguments);            alert(arguments.length);            alert(arguments[0]);        }        show("onion");show()

函数作用域

任何程序执行的时候都要占用内存空间。

调用函数时候，系统会分配对应空间给这个函数使用。

当函数使用完毕，将销毁内存---->垃圾回收机制

函数内部变量作用域在花括号里

函数递归

函数自己调用自己
有参数
有return

递归可以解决循环能做到的所有事情，无压力。能解决循环解决不了的

 function sum(n){if (n == 1){return 1;}return sum(n-1)+n;}alert(sum(100))会开辟内存空间

兔子繁殖问题

假设有一对儿新生兔子，从第四个月开始他们每个月月初生一对儿兔子，新生的兔子从第四个月月初开始又每一个月生一对兔子。按照此规律，并假定兔子没有死亡，n(n <= 20) 个月月末共有多少个兔子？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wu5FG9Tw-1647956152172)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1642087063832.png)]

function rabbit(n){if(n<4){return 1;}return rabbit(n-1)+rabbit(n-3);
}

猴子吃桃

有一对桃子不知数目，猴子第一天吃掉一半，觉得不过瘾，又多吃了一个。第二天照此办法，吃掉了剩下的一半，又多吃了一个，到num（num<=10) 天早上，猴子发现只剩一个桃子了，问这堆桃子原来有多少只。？

设还剩n天吃完的桃子数

function peach(n){if(n==1){return 1;}return (peach(n-1)+1)*2
}

数组

用一个变量存储一堆变量

var arr = new Array(100,"onion","wan");
var arr2 = ["abc",12,"jkl"];
//声明数组
//注意，如果第一种方法，的参数只有一个数字10，那么相当于声明了长度为10的数组，值为空
数组有属性，是由每个数据（元素）组成的 。  arr.length
访问数组元素的时候，通过下标来访问，元素。此下标从0开始。arr[0]

数组遍历输出

//1.for
for(var i=0;i<arr.length;i++){document.write(arr[i]);
}
// for in的遍历，没有判断环节，所以速度更快一点
for (var i in arr){document.write(arr[i]);
}

数组的push pop栈结构 && 队列结构

//栈结构，先进后出
//arr.push(20，"onion");为数组末尾添加元素。 push方法有返回值，值为最终数组长度
//arr.pop() 无参数。 返回值为，数组的最后一个元素。之后，元素组会少一个元素
//arr.shift()无参数。返回值为数组的第一个元素。之后数组会少一个元素
//arr.unshift("onion",12),在数组头部插入元素。有一个返回值，数组最终长度。

数组的concat方法

arr.concat(arr1,"onion","wan","360");
合并数组，返回一个新数组arr.slice(开始，结束)     [start,end)提取并且生成新数组，原数组不会被改变
arr3.slice(1,3)splice增删改
1.增 arr.splice(2,0,"hello","world");在第2个元素后面插入两个元素
2.删arr.splice(1,2)删除第一个元素后面数两个元素
3.改arr.splice(2,1,"hello");先删除，后修改join方法
arr.join(字符串)
将数组中的元素用传入的拼接符号，输出字符串reverse方法
arr.reverse() 将数组逆序输出sort方法
arr.sort() 
从小到大排序

数组-引用数据类型

var arr1 = new Array("onion","wan");
var arr2 = ["12","32",22,1211,1209];
var arr3 = arr1;
arr3.push(300,3000);
alert(arr1);
alert(arr3)
数组被赋值给另一个数组，两者将会被相互影响

二维数组

冒泡、选择排序

前后两个数，两两进行比较。

ECMAscript5严格模式

严格模式的特点
变量声明必须加var
函数内部不能重名
arguments对象不允许被动态改变，其值永远为实参值
保留字不能被声明为变量

严格模式的好处

消除JS语法不严谨之处，减少怪异行为
保证代码运行的安全
提高编译器效率，增加运行速度
为未来新版本的JS做好铺垫

function show(num1,num2){num1 = "hello";alert(num1,num2);
}
show(10,20);
//此时，arguments[0]还是10

数组新增方法

1.indexOf(item,start);
var arr = [10,20,30,20];
var index = arr.indexOf(20,0);
alert(index)
输出1，也就是说输出第一个查找到的元素下标。从0开始。2.forEach
arr.forEach(function(item,index,arr){document.write(item+index,arr);
})
//遍历数组，item是每次遍历的元素，index每个元素的下标，arr是整个数组的内容3.map方法
var newArr = arr.map(function(item,index,arr){//做一件事情，映射到另一个数组。元素组不改变return item*1.3;
})4.filter()过滤
var newArr = arr.filter(function(item,index,arr){return item > 3;
})
//新数组的内容将会是大于3的元素

字符串

new 声明字符串
省略new声明字符串
字符串常量赋值

utf-8 三个字符表示一个汉字。
GBK 两个字符表示一个汉字
var str = new String(hello你好);   object
var str = String(hello你好);		string
var str = "hello你好"				string 类型str.charAt(5);即可通过下标访问
str[5];这样访问更加方便
//字符串是只读的，不可以修改单个字符。
str.charCodeAt(5) 第五号元素的字符ascll值
String.fromCharCode(97,98,99);//返回一个所传入ascll值对应的字符串

字符串截取

substring(start,end); 两个参数分别是开始，结束位置。截取，生成新的字符串。

substr(start,length) 返回一个新生成的字符串。注意参数

str.slice(start,end); 则是返回一个字符串，[start,end)于substring一样

字符串替换

newStr = str.replace(旧字符串，新字符串);

字符串分割

str.split(分隔符，length)

在原字符串找到“分隔符”，然后将那个位置切割，出现很多子串，然后将这些子串放到数组返回。如果加了第二个参数，就定死了数组长度，这个时候可能导致数据溢出。

如果分割符为 “”，那么就会将字符串的每一个字符分割为数组元组。 “a”,“p”,“p”,“l”,“e”

字符串大小写方法

str.toLowerCase();

str.toUpperCase();

concat字符串拼接 str = “hello”; str.concat(“world”) -> hello world

var str = "hello";
var newStr = str.substring(1,4);
var str2 = "how are you";
var newStr2 = str2.replace("are","old are");
//此时结果是   how old are you。如果字符串有多个are怎么办，用正则表达式
str2.replace(/are/gi,"old are")   //g全局匹配，i是忽略大小写
a

面向对象

类：一类具有相同特征的抽象概念

对象：具体某一个个体，唯一的实例

但是在JS中没有类这个概念，但是有对象

var obj1 = new Object();
var obj2 = Object();
//通过常量来赋值
var obj3 = {name:"Yang",age:23,show : function(){alert('hi')}};
//新增属性
obj.name = "onion";
//新增方法
obj.show = function(){alert("I am an Iron man");
}
obj.show();
//删除属性
delete obj.name;

Math函数

Math.random(); 返回[0,1)
Math.max(a,b);返回最大值
Math.min(a,b);返回最小值
Math.abs(num);返回绝对值
Math.round(num);四舍五入，小数点后一位。3.45 => 3.5;
Math.ceil(num); 向上取整
Math.floor(num); 向下取整
Math.pow(x,y); x的y次方
Math.sqrt(num);开方

日期对象

var d =  new Date();// alert(d)//默认是当前系统时间，Sat Feb 05 2022 17:31:08 GMT+0800 (中国标准时间)//GMT是格林尼治时间// alert(d.toLocaleDateString())// alert(d.toLocaleTimeString())//输出年月日，时秒分 -->  2022/2/5    17:44:20alert(d.getFullYear());alert(d.getMonth()+1); //month 从0开始数alert(d.getDate());var day = d.getDay();//通过返回0~6的数字，即可判断周几var arr = ["周日","周一","周二","周三","周四","周五","周六"];alert("今天是"+arr[day])alert(d.getHours());alert(d.getMinutes());alert(d.getSeconds());//返回当日时间的时、分、秒document.write(Date.parse(d));document.write(d.getTime())//两个方法都是获取当前日期的毫秒数

定时器

var timer = setInterval(匿名函数，毫秒数);
clearInterval(timer);//清除定时器
//demo 如下：
var clockDom = document.getElementsByClassName("clock")[0];var timer = setInterval(function(){var d = new Date();var year = d.getFullYear();var month = d.getMonth()+1;var day = d.getDate();var hour = d.getHours();var minute = d.getMinutes();var second = d.getSeconds();var str = year+"年"+month+"月"+day+"日"+hour+"时"+minute+"分"+second+"秒";clockDom.innerHTML = str;},1000);

BOM浏览器对象面模型

window是浏览器顶级对象
window.alert(); //弹出对话框,可以省略windowvar res = confirm(); 弹出待确定或者取消的弹框
//当用户点击确定的时候，返回true。点击取消，返回false。var res =  prompt("请输入内容",100);//1st参数，提示用户输入。第二个参数是默认输入。点击确定就是返回true，否则返回false//open("打开新页面的网址","该页面的名字","设置页面的宽高以及位置")
$("btn").onclick = function(){open("https://www.baidu.com/","窗口名","width=400,height=400,top=300,left=300")}/*history  当前窗口的历史记录history.length() 当前窗口打开过几条记录history.forward() 前进一条记录history.back() 后退一条记录history.go(0); 当前窗口刷新。如果参数大于0，表示前进n条记录。如果参数小于0，则表示后退n条记录
*//*window下的location对象。url：统一资源定位符协议：域名:端口号/路径/?查询字符串参数location.protocol;可以输出该窗口是什么协议。file文件协议或者http（s）网络协议location.hostname;可以输出当前主机的ip地址location.port;输出端口号
*//*
document.location代表页面的url方法1：跳转。<button οnclick="location.assign('https://www.baidu.com/')">跳转</button>方法2：替换。不会产生历史记录，返回不去上一页了。<button οnclick="location.replace('https://www.baidu.com/')">替换</button>方法3：重载location.reload() 相当于刷新
*/

Dom 对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SE8ZkPEy-1647956152180)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1644158826254.png)]

节点类型：

元素节点
普通的标签之类的
属性节点 id=“box”
文本节点 div文本

元素节点的获取

document.getElementById(id) 通过id获取元素节点
document.getElementByClassName(class名字); IE8以下不兼容
document.getElementByName(name属性的值)
document.getElementByTagName(标签名本身的值)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oRyzrKRh-1647956152182)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1644161513335.png)]

属性节点的获取以及修改（只能获取行内样式）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXorFWgS-1647956152185)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1644160077867.png)]

PS：可以获取当前有效样式，包括头部css

divDom.currentStyle['height];   // IE 兼容
getComputedStyle(divDom)['height]// 火狐、谷歌
//跨浏览器兼容性写法function getStyle(node,cssStyle){return node.currentStyle? node.currentStyle[cssStyle]:getComputedStyle(node)[cssStyle];}

改变字体样式

1.改变颜色

2.改变字体大小。

<div class="box" style="width:960px;border:1px solid red;">div文本内容
</div><script>window.onload = function(){var boxDom = document.getElementsByClassName('box')[0];//设置字体变化速度speedvar speed = 5;var count = 0;setInterval(function(){//1.改变颜色boxDom.style.color = getRandomColor();//2.在原来基础上改变字体大小var zihao = parseInt(getStyle(boxDom,"fontSize"));//200px 去掉单位boxDom.style.fontSize = zihao+speed+'px';//这样字号无限制增大的，需要设置为6次一个周期count++;if(count % 6 == 0){speed *= -1;}},1000);}function getRandomColor(){var str = "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";return str;}function getStyle(node,cssStyle){return node.currentStyle? node.currentStyle[cssStyle]:getComputedStyle(node)[cssStyle];}</script>

Attribute自定义属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hq0MttUx-1647956152187)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1644472586546.png)]

节点创建

创建

document.createElement() 返回值：创建的标签。参数：创建的标签名

插入

node1.appendChild(node2); 将node2节点插入node1的子节点的末尾

创建文本节点（忽略解释h1标签)

node.createTextNode(“

hello

”)

将新节点插入在某一节点前面

box.insertBefore(box2,box1);

box是box1和box2的父节点。将box2插入到box1前面

替换节点

replaceChild()

格式：box1.parentNode.replaceChild(box2,box1);

功能：用box2节点将box1节点替换

克隆节点

cloneNode()

格式：node.cloneNode();

返回：新节点

PS：如果想克隆节点包含子节点，那么就加参数true

node.cloneNode(true)

删除节点 box.parentNode.remove();将box节点删除

//节点创建
var pDom = doucument.create("p");
divDom.appendChild(pDom);//将p节点插入到div里

this关键字

任何一个函数都会内置一个叫做this的变量，this指向当前函数

利用this关键字，弹出每个按钮自己的属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LIJHEUnp-1647956152188)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1644506514403.png)]

选项卡案例

	 <style> *{padding:0;margin:0;}.box{width:300px;height: 400px;border:1px solid black;margin:50px auto;;}.menu{width: 100%-4px;border:1px solid red;min-height: 24px;;}.menu button{width: 50px;height: 24px;margin:3px 0 3px 30px;}.active{background-color: orange;}.detail{padding:5px;box-sizing: border-box;}.detail div{width: 100%-4px;display: none;text-indent: 2em;}.menu button:hover{cursor:pointer;}</style>
<script>    window.onload = function(){var btns =  document.getElementsByTagName("button");var detDom = document.getElementsByClassName("detail")[0];var divs = detDom.getElementsByTagName("div");for(var i=0;i<btns.length;i++){btns[i].setAttribute("index",i);btns[i].onclick = function(){for(var j=0;j<btns.length;j++){btns[j].className = "";divs[j].style.display = "none";}this.className = "active";var index = this.getAttribute("index");divs[index].style.display = "block";}}}
</script>
<div class="box"><div class="menu"><button class="active">HTML5</button><button>python</button><button>java</button></div><div class="detail"><div style="display:block;">HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准</div><div>Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆 于1990 年代初设计，作为一门叫做ABC语言的替代品。Python提供了高效的高级数据结构，还能简单有效地面向对象编程。Python语法和动态类型，以及解释型语言的本质，使它成为多数平台上写脚本和 </div><div>Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的高级程序设计语言。Java 可运行于多个平台，如 Windows, Mac OS 及其他多种 UNIX 版本的系统。本教程通过简单的实例将让大家更好的了解 Java 编程语言。移动操作系统 Android 大部分的代码采用 Java 编程语言</div></div></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZyGqOV6W-1647956152189)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1644512564374.png)]

offset家族

offsetWidth = width + padding×2 + border×2

offsetHeight = height + padding×2 + border×2

offsetLeft和offsettop就是在原有的值上面加了margin

注意：offset都是没有单位的。

事件

老师讲课，提出问题，触发了学生的好奇心事件，学生举手回答问题（事件的处理）

鼠标事件
- click 单击
- dbclick
- mouseover 鼠标移入
- mouseout 鼠标移出
- mousemove 鼠标移动（会不停触发）
- mouseout 鼠标移出
- mouseenter 鼠标移入
- mousedown 鼠标按下
- mouseup 鼠标抬起
键盘事件
- keydown 键盘按下
- keyup 键盘抬起
- keypress 键盘按下（只支持字母键）
HTML事件
- window事件
  - load页面加载完成后触发
  - scroll 页面滚动
  - resize 当窗口大小发生变化的时候触发
- 表单事件
  - focus 获取焦点
  - blur 失去焦点
  - select 对输入框的文本框选会触发
  - 修改输入框的文本并失去焦点会触发 change事件
  - submit 必须添加在form元素，点击submit按钮才能触发
  - reset 点击reset按钮才能触发
ipt.onselect = function(){}

btn.onsubmit = function(){}

btn.onreset = function(){}

JavaScript入门语法