JavaScript入门语法

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

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

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

蹭java热度，—> js

script标签的使用

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

js中的输出方法

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

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

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

常量、变量

常量：

基本数据类型：

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

复合数据类型：

1. null 空
2. undefined
3. NaN

变量：值可以被修改

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

var num = 10;
alert(num);

变量命名、弱引用

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

命名规则：

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

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

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

进制转化

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

js运算符

运算符

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

赋值运算符

强转化

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

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

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

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

关系、逻辑运算符

流程控制语句

顺序、选择、循环、判断

单分支、多分支

if(判断条件1){
    执行语句;
}
else if(条件2){
    执行语句;
}
else{
    执行语句;
}

switch(num):
    case 1:
    	//do
    	break;
    case 2:
    	//do
    	break;
    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() 

函数作用域

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

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

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

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

函数递归

1. 函数自己调用自己
2. 有参数
3. 有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对象不允许被动态改变，其值永远为实参值
保留字不能被声明为变量

严格模式的好处

1. 消除JS语法不严谨之处，减少怪异行为
2. 保证代码运行的安全
3. 提高编译器效率，增加运行速度
4. 为未来新版本的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的元素

字符串

1. new 声明字符串
2. 省略new声明字符串
3. 字符串常量赋值

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:20

    alert(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(); //弹出对话框,可以省略window

var 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)]

节点类型：

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

元素节点的获取

1. document.getElementById(id) 通过id获取元素节点
2. document.getElementByClassName(class名字); IE8以下不兼容
3. document.getElementByName(name属性的值)
4. document.getElementByTagName(标签名本身的值)
5. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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];
            //设置字体变化速度speed
            var 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都是没有单位的。

事件

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

1. 鼠标事件

   • click 单击
   • dbclick
   • mouseover 鼠标移入
   • mouseout 鼠标移出
   • mousemove 鼠标移动（会不停触发）
   • mouseout 鼠标移出
   • mouseenter 鼠标移入
   • mousedown 鼠标按下
   • mouseup 鼠标抬起

2. 键盘事件

   • keydown 键盘按下
   • keyup 键盘抬起
   • keypress 键盘按下（只支持字母键）

3. HTML事件

   • window事件
     • load页面加载完成后触发
     • scroll 页面滚动
     • resize 当窗口大小发生变化的时候触发
   • 表单事件
     • focus 获取焦点
     • blur 失去焦点
     • select 对输入框的文本框选会触发
     • 修改输入框的文本并失去焦点会触发 change事件
     • submit 必须添加在form元素，点击submit按钮才能触发
     • reset 点击reset按钮才能触发

   ipt.onselect = function(){}

   btn.onsubmit = function(){}

   btn.onreset = function(){}