JavaScript基础
一、基本认识
JavaScript是一门客户端脚本语言，主要提高网页的互动性，运行于客户端（浏览器）。
日常用途：
1、嵌入动态文本到HTML页面
2、对浏览事件做出响应
3、读写HTML元素
4、在数据被提交到服务器之前验证数据
5、检测访客的浏览信息
6、控制cookies，包括创建和修改等
7、基于Node.js技术进行服务器端编程
分类：
ECMAScript：主要讲述javascript的基础语法。
DOM：document object model 文档对象模型，有一些列api用来操作html页面的标签
BOM：browser object model 浏览器对象模型，有一些api用来和浏览器打交道。
引入方式：
1、内部引入：在html页面将js代码写到一组<script>标签中，<script>标签可以写在<html>标签任意位置
2、外部引入：将js代码写到一个xxx.js文件，然后在html页面的script标签中使用src属性引入xxx.js文件
注意：如果script标签中使用了src属性引入了外部js文件，那么这组script标签体中就不能再写js代码，不会执行，只能重新在使用一组script标签写js代码。
二、基础语法
1、注释（单行注释和多行注释同Java语言）
2、输入语句
输入语句-->prompt(参数1：提示信息,参数2：默认值),var表示声明变量的关键子
var age = prompt("请输入年龄",10);
alert("age="+age)
3、输出语句
//第一种：alert()弹警告框
alert("hello js");
//第二种：将内容展示到浏览器页面上
document.write("hello JavaScript");
//第三种：将内容展示在浏览器的控制台中，需要按f12/fn+12--->选择console查看结果
console.log("展示到浏览器控制台的信息");
4、变量和常量
强类型语言：代码需要进行编译才可以运行，数据有严格的类型规定，声明变量需要指定数据类型,一旦类型固定将不能被改变。例如Java语言。
弱类型语言：不需要编译直接从上往下加载执行，声明变量不需要指定数据类型，变量的类型根据值动态变化。例如：javascript语言
在es5.1中没有常量的概念，只有变量，使用var关键字进行声明，赋值之后可以进行修改
var x=100;
document.write("x="+x+"<br>");
x=10000;
document.write("x="+x+"<br>");
2015年发布ES6版本，也称ES2015，支持常量，使用const关键字声明，变量使用let关键字声明
//定义变量,使用let关键字
let m;
console.log("m="+m);//没有赋值则默认值是：undefined
m=100;
console.log("m="+m);//输出m=100
m="hello";
console.log("m="+m);//输出m=hello
{//代码块
let n=100;
console.log("代码块中输出n="+n);
}
//console.log("n="+n);//异常：ReferenceError: n is not defined
//定义常量，使用const关键字
const PI=3.1415926
console.log("PI="+PI);
PI=10;//会报错，常量不能被修改
5、数据类型和typeof
//原始数据类型--->基本数据类型
let l1 = true;
document.write(typeof(l1) + "<br>"); // boolean
let l2 = null;
document.write(typeof(l2) + "<br>"); // object js原始的一个错误
let l3;
document.write(typeof(l3) + "<br>"); // undefined
let l4 = 10;
document.write(typeof(l4) + "<br>"); // number
let l5 = "hello";
document.write(typeof(l5) + "<br>"); // string
let l6 = 100n;
document.write(typeof(l6) + "<br>"); // bigint
//引用类型--->就是对象
let date = new Date();
document.write(date); //Thu Aug 13 2020 11:17:01 GMT+0800 (中国标准时间)
document.write(date.getFullYear()); //2020
document.write(typeof(date) + "<br>"); //object
6、运算符
和Java中的运算符一样，除了比较运算符==
和===
比较运算符
let m=10;
document.write("m="+m+"<br>");//m=10
document.write(m+10+"<br>");//20
document.write(m+"10"+"<br>");//1010
document.write(m*10+"<br>");//100
let n="10";
document.write("n="+n+"<br>");//n=10
document.write(n+10+"<br>");//1010
document.write(n+"10"+"<br>");//1010
document.write(n*10+"<br>");//100 //string类型是10会自动转成number类型的10，然后做乘法运算
document.write(n-5+"<br>");//5 //string类型是10会自动转成number类型的10，然后做减法运算
document.write((m==n)+"<br>"); //true,只比较值，值一样结果就是true
document.write((m===n)+"<br>"); //false，比较值和类型，值和类型都相同结果才是true。
总结：==
仅仅比较值，值相同结果就是true。===
比较值和类型，值和类型都相同结果才是true
三元运算符
let result=m>5?10:20; //result=10
document.write(result+"<br>");
非boolean类型转boolean类型（注意）
/*
undefined：自动转换成false
null：null自动转换成false,非null的对象会自动转换成true。
string：""字符串自动转成false，非""字符串自动转成true。
number：0自动转成false，非0自动转成true。
*/
let f=0; //false
if(f){
alert(true);
}else{
alert(false);
}
//将来会看到如下写法
if(str){
//如果str为null或者""空字符串，结果就是false，不进入if判断
}
总结：undefined、null、0、“”会自动转成false，其他都转成true。
7、流程控制语句
if、switch、for循环、while循环、do...while循环和Java中的相同，不同在于将Java变量接收的数据类型声明处改成let
for(let i=0;i<10;i++){}8、数组【重要】
特点：数组的长度动态可变，类似于Java中的集合
数组的定义
let arr1=[];//定义了一个长度为0的数组
let arr2=[10,true,"hello",200]; //数组中的元素可以是任意类型
数组遍历【重要】
//方式1：fori的方式遍历，快捷键：itar+回车
for (let i = 0; i < arr.length; i++) {
document.write(arr[i]+"<br>");
}
document.write("==============<br>");
//方式2：forof方式遍历:for(let 变量名 of 数组对象){}，快捷键：iter
for (let el of arr) {
document.write(el+"<br>");
}
扩展运算符：...
复制数组
//复制数组
let arr2 = [...arr];
合并数组
//合并数组
let arr3 = [40,50,60];
let arr4 = [...arr , ...arr3];
将字符串拆成数组
//将字符串转成数组
let arr5 = [..."heima"];
8 、函数【重点】
方式1：普通函数
/*
方式1：普通函数
function 方法名(变量名1,变量名2,...){
方法体;
return 返回值;
}
单独调用：适用于无返回值的方法
方法名(参数值);
赋值调用或者输出调用：适用于有返回值的方法
let 变量=方法名(参数值);
console.log(变量名(参数值)); //将调用方法的结果打印到浏览器控制台
*/
//定义无返回值函数
function show(str) {
alert("hello "+str);
}
//调用函数
show("吴云飞");
//定义有返回值函数
function add(a,b) {
return a+b;
}
let sum=add(10,20);
document.write("sum="+sum+"<br>")
方式2：匿名函数
/*
方式2：匿名函数
let 变量名=function (变量名1,变量名2,...){
方法体;
return 返回值;
}
单独调用：适用于无返回值的方法
变量名(参数值);
赋值调用或者输出调用：适用于有返回值的方法
let 变量=变量名(参数值);
console.log(变量名(参数值)); //将调用方法的结果打印到浏览器控制台
*/
let sub=function (a,b) {
return a-b;
};
let result=sub(10,20);// -10
document.write("result="+result+"<br>");
方式3：箭头函数
/*
方式3：箭头函数,类似于Java中的lambda表达式
()：参数列表
=>：连接参数列表和方法体的箭头
{}：方法体
省略1：如果参数列表只有一个参数，()可以省略不写
省略2：如果方法体中只有一条语句，那么{},分号,return要一起省略。
*/
/*let add2=(a,b)=>{
return a+b;
};*/
//省略2：如果方法体中只有一条语句，那么{},分号,return要一起省略。
let add2=(a,b)=>a+b;
let sum2=add2(100,200);
document.write("sum2="+sum2+"<br>");
补充：函数的参数列表中使用扩展运算符表示可变参数【了解】
function fun(...nums){
let sum=0;
for (let num of nums) {
sum+=num;
}
return sum;
}
document.write("求和结果:"+fun(10,20,30)+"<br>");
函数的特点
特点1：js中的函数是一个对象，类型是function类型,方法名就是对象名🚩特点2：如果方法没有返回值，默认返回undefined。特点3：方法的调用和参数的个数无关，所有的参数会被一个内置的arguments数组对象接收
三、DOM操作
1、概述
DOM（document object model）文档对象模型，浏览器会将页面的标签、属性、文本等都封装成一个个对象，这些对象都存在于一个叫document的对象身上，然后我们可以操作这些对象。
2、DOM操作的基本思路【重要】
【第一步】：通过document获取标签/元素对象【第二步】：操作标签的属性/样式、文本、操作标签对象
页面准备：
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="checkbox" name="hobby"/>抽烟
<input type="checkbox" name="hobby"/>喝酒
<input type="checkbox" name="hobby"/>烫头
<input type="text" name="username"/>
</body>
【第一步】通过document获取标签/元素对象
2.1传统方式（ES5方式）【了解】
//es5的方式：获取元素对象
//1. getElementById() 根据id属性值获取元素对象
var div1 = document.getElementById("div1");
alert(div1);
//2. getElementsByTagName() 根据元素名称获取元素对象们，返回数组
var divs = document.getElementsByTagName("div");
alert(divs.length);
//3. getElementsByClassName() 根据class属性值获取元素对象们，返回数组
var cls = document.getElementsByClassName("cls");
alert(cls.length);
//4. getElementsByName() 根据name属性值获取元素对象们，返回数组
var checkboxs = document.getElementsByName("hobby");
alert(checkboxs.length);
//5. 子元素对象.parentElement属性 获取当前元素的父元素
var body = div1.parentElement;
alert(body);
2.2新的方式（ES6方式）【掌握】
document.querySelector(“css选择器”); 根据css选择器查询一个元素
document.querySelectorAll(“css选择器”); 根据css选择器查询一组元素
//1. 根据id属性值获取元素对象
let div1 = document.querySelector("#div1");
alert(div1);
//根据class属性值获取元素对象们，返回数组
let cls = document.querySelectorAll(".cls");
alert(cls.length); //2
//根据元素名称获取元素对象们，返回数组
let divs = document.querySelectorAll("div");
alert(divs.length); //4
//获取name属性为hobby的input表单对象们
var inputs = document.querySelectorAll("input[name='hobby']");
alert(inputs.length) //3
【第二步】：操作标签的属性/样式、文本、操作标签对象
操作属性和样式【了解】--->推荐使用对象名.属性名的方式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性的操作</title>
<style>
.aColor{
color: blue;
background-color: green;
font-size: 100px;
}
</style>
</head>
<body>
<a id="aId">点我呀</a>
</body>
<script>
//1. setAttribute() 添加属性
//方式1：通过：对象名.属性名=值; 吐血推荐
let aEL = document.querySelector("#aId");
//aEL.href="http://www.itheima.com"
//方式2：通过setAttribute()
aEL.setAttribute("href","http://www.itcast.cn");
//2. getAttribute() 获取属性
//方式1：通过：let 变量名=对象名.属性名; 吐血推荐
let id = aEL.id;
console.log(id); //aId
console.log(aEL.href); //http://www.itcast.cn
//方式2：通过getAttribute()
let href = aEL.getAttribute("href");
console.log(href); //http://www.itcast.cn
//3. removeAttribute() 删除属性
//方式1：通过：对象名.属性名="";
aEL.href="";
//方式2：通过removeAttribute()
aEL.removeAttribute("href");
//4. style属性 添加样式--->适合样式少的情况
/*aEL.style.fontSize="50px";
aEL.style.color="green";*/
//5. className属性 添加指定样式--->适合样式多的情况
aEL.className="aColor";
</script>
</html>
操作文本【重要】
<!--
innerHTML属性【重要】：获取/设置标签内容体html代码的，如果包含标签，浏览器会解析成对应的html元素
innerText属性【了解】：获取/设置标签内容体文本的，如果包含标签，浏览器不会解析，原模原样展示。
value属性【重要】：用来获取/设置输入框中的内容
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本的操作</title>
</head>
<body>
<div id="div"></div>
<input type="text" name="username" id="username" value="tom">
</body>
<script>
//1. innerText 添加/获取文本内容，不解析标签【了解】
//获取元素对象
let div = document.querySelector("#div");
//使用innerText添加内容
// div.innerText="黑马程序员";
// div.innerText="<a href='http://www.itheima.com'>黑马程序员</a>";
//2. innerHTML 添加/获取文本内容，解析标签【重点】
div.innerHTML="<a href='http://www.itheima.com'>黑马程序员</a>";
//获取值
console.log(div.innerHTML);
//追加值
div.innerHTML+="<a href='http://www.itcast.cn'>传智播客</a>";
//3. value 添加/获取输入框内容【重点】
//获取内容
let username = document.querySelector("#username").value;
console.log(username);
//设置内容
document.querySelector("#username").value="jack"
</script>
</html>
操作标签元素【了解】
//1. createElement() 创建新的元素
let option = document.createElement("option"); //<option></option>
option.innerHTML="武汉";
/* //2. appendChild() 将子元素添加到父元素中
var select = document.querySelector("#s");
select.appendChild(option);*/
//通过innerHTML属性添加元素
let select = document.querySelector("#s");
/* select.innerHTML+="<option>武汉</option>";*/
//3. removeChild() 通过父元素删除子s元素
let options = document.querySelectorAll("option");
/*select.removeChild(options[options.length-1])*/
//4. replaceChild() 用新元素替换老元素
select.replaceChild(option,options[3]);//注意是用父标签对象调用方法，不是document
四、事件
事件：用户操作了页面的元素之后，伴随执行的一段代码就叫做事件。
常用事件
1、onload事件：页面加载完成事件，用来解决由于代码从上往下加载过程中没有找到元素的问题2、onclick事件：单击事件，很常用。3、onblur事件：失去焦点事件，用于表单输入框校验。4、onchange事件：内容改变事件，用于下拉列表选中值，例如：省市区联动5、onsubmit事件：表单提交事件，当submit按钮被单击之后出发。用于表单校验，可以提交表单或者阻止表单提交。(很特殊)
了解的事件
onkeydown：某个键盘的键被按下
onkeypress：
onkeyup：
onmousedown：
onmouseup：
onmouseover：
onmouseout：
onfocus：
ondbclick：
方式1:直接给html标签添加事件属性，属性值就是要执行的方法
【第一步】：给html标签添加事件属性
<button id="up" onclick="up()">上一张</button>
<button id="down" onclick="down()">下一张</button>
【第二步】：声明要执行的方法
//显示第一张图片的方法
function up(){
let img = document.getElementById("img");
img.setAttribute("src","img/01.png");
}
//显示第二张图片的方法
function down(){
let img = document.getElementById("img");
img.setAttribute("src","img/02.png");
}
方式2:给标签对象的事件属性赋一个函数对象值
【第一步】：根据选择器获取标签对象
let el=document.querySelector("css选择器");【第二步】：给元素对象的事件属性赋函数对象值
//对象名.事件属性名=函数对象(普通或者匿名函数)
el.onclick=up;//写法1：up是之前的函数名称，也是对象名。
el.onclick=function(){//写法2：
let img = document.getElementById("img");
img.setAttribute("src","img/01.png");
}
文章转载自dunk的日志，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
