一、jiavascrip 的使用
可以放在html页面中的<body>或<head>中，可以放入多个js。
1.内部写法
<script >js代码区域</script>
2.外部js文档引用
<script src="javascript.js"></script>
3.脚本调用策略：
HTML 元素是按其在页面中出现的次序调用的，所以欲操作的HTML元素未加载完成就执行js容易报错。
1.内部代码解决方法：
监听浏览器的"DOMContentLoaded"事件：等HTML文档体加载、解释完毕再执行js
document.addEventListener("DOMContentLoaded",functin(){
HTML文档体加载、解释完毕才调用此处的代码
})
2.外部代码解决方法：
async 异步属性：可以不中断继续加载html后续内容
<script src="script.js" async></script>
无法控制先加载完运行哪个js脚本，容易报错。
defer 属性可以控制js在页面中出现的先后顺序加载和运行
<script defer src="jquery.js"></script>//可以确保jquery.js加载于script2.js和script3.js之前
<script defer src="script2.js"></script>//可以确保script2.js加载于script3.js之前
<script defer src="script3.js"></script>
3.可以将js放置在html的最后面
此方法和上述的 DOMContentLoaded 方法对拥有大量js代码的网站会带来性能损耗，建议使用 async 属性。
二、变量
常用 var let const 三种声明方法
1.作用域
1.全局作用域：写在函数外的变量,可以在本js中任意地方访问
var carname;
let carname2;
const carname3=2;//第一次用const声明的变量必须赋值
//这里可以使用carname、carname2、carname3变量
function myFunction(){
//这里可以使用carname、carname2、carname3变量
}
2.函数作用域：写在函数内的变量属于局部变量，只能在本函数内使用。
function myFunction(){
var carname="奥迪";
//这里可以使用carname变量
}
3.块作用域：写在{}中的变量，如：if和for语句里面的{}
var声明的变量没有块作用域，可以从块之外访问
{
var carname；
}
//此处可以访问carname
let或const声明的变量有块作用域，不可以从块之外访问
{
let carname；
const carname2="奥迪"；
}
//此处不可以访问carname、carname2
2.变量命名规则
1.名称可以包含字母、数字、下划线
2.名称必须以字母开头
3.名称区分大小写
4.名称不可为关键词
var carname;
var carName;//驼峰式，建议使用
var CarName;//驼峰式
var car_name;//下划线
var car6name;
3.变量赋值
1.var 声明的变量可赋值，以最新的为准
var carname=2;
document.write(carname);//输出结果为2
var carname=3;
document.write(carname);//输出结果为3
2.在同一作用域内用var声明的变量不允许重新用let声明；
var carname=2;
let carname=3;//不允许
{
var carname=2;允许
let carname=3;//不允许
}
3.在同一作用域内用let声明的变量不允许重新用let或var声明
let carname=2;
let carname=3;//不允许
{
let carname=2;允许
let carname=3;//不允许
}
let carname=2;
var carname=3;//不允许
{
let carname=2;允许
var carname=3;//不允许
}
4.const 声明方法及用法
const声明的变量不可以重新赋值
const carname=2;
carname=3;//出错
carname=carname+2;//出错
const声明的变量为对象时可以更改
const car = {carname:"奥迪",carcolor="red",carwidth=500};
car.carcolor="blue";//可修改属性值
car.carheight=200;//可以增加新属性carheight
const声明的变量为数组时可以更改
const car = ["奥迪","red",500];
car[2]="blue";//可修改元素
car.push("200g");//可以增加新元素200g
三、数据类型和运算符
1.数据类型
| 名称 | 写法 | 类型(typeof) |
|---|---|---|
| 字符串 | 一对单引号( '内容' )或双引号("内容")。 | string |
| 数字 | 由数字组成，可以有小数点 | number |
| 布尔值 | 布尔值只有ture和false(真和假) | boolean |
| 数组 | 一对中括号( [内容] ) | object |
| 对象 | 一对单花括号({内容} ) | function |
2.算数运算符
在运算符前后添加空格养成好习惯，不加也可以。
| 运算符 | 描述 |
|---|---|
| = | 赋值 |
| + | 加法 |
| - | 减法 |
| * | 乘法 |
| / | 除法 |
| % | 取模（余数） |
| ++ | 递加 |
| -- | 递减 |
提示：数字跟数字运算结果是数字；数字和字符串运算结果是字符串
3.赋值运算符
| 运算符 | 描述 | 等同于 |
|---|---|---|
| = | x=y | x=y |
| += | x + = y | x =x + y |
| -= | x -= y | x = x - y |
| *= | x * = y | x = x * y |
| /= | x / = y | x = x / y |
| %= | x %= y | x = x % y |
4.比较运算符
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 等值等型 |
| != | 不等于 |
| !== | 不等值或不等型 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| ? | 三运运算符 |
| 三元运算书写格式：表达式1?表达式2:表达式3 | 说明：如果表达式1为true ，则整个表达式的结果就是表达式2的值，如果表达式false，则整个表达式的结果就是表达式3的值. |
5.逻辑运算符
| 运算符 | 描述 |
|---|---|
| && | 逻辑与 |
| II（这是两个竖杠） | 逻辑或 |
| ! | 逻辑非 |
四、函数
函数是执行特定任务的代码块，调用时被执行。
1.语法书写
function 函数名(参数1,参数2,参数3){
要执行的代码块
}
例如：
functon myfunction(num1,num2){
return num1 + num2;
}
2.调用方法
return返回值将返回给调用者
document.write(myfunction(7,8))//结果为：15
五、对象
对象也是变量，但是包含多个值。值以名称:值对的方式书写：
var person = {
fistName:"Bill",
lastName:"Gates",
age:18,
fullName:function(){
return this.fistName + this.lastName;
}
};
访问对象属性
person.fistName
//或者
person["fistName"]
访问对象方法
name = person.fullName(); //返回值：Bill Gates
name = person.fullName; /*返回函数定义：function(){ return this.fistName + this.lastName;}*/
六、获取DOM元素方法
1.通过元素的ID值获取：getElementByID
document.getElementById("元素id的值")
2.通过元素的name属性的值获取：getElementByName
document.getElementByName("元素name的值")
3.通过元素的标签名获取：getElementByTagName
document.getElementByTagNam的值获取：getElementByName
4.通过元素的class类名获取：getElementByClassName
document.getElementByClassName("class类名")
5.通过选择器获取一个元素：querySelector
document.qureySelector("参数")
//参数可以是一个元素（div、a、input）
//可以是类名/id值（div.carName、#carName）
//返回的值只获取第一个元素
6.通过选择器获取一个元素：querySelectorAll
document.qureySelectorAll("参数")
//返回的值是获取的所有元素（一个类数组）
七、常用事件
| 事件 | 描述 |
|---|---|
| onchange | HTML元素已被改变。如：下拉框选择不同的选项值 |
| onclick | 用户点击了HTML元素 |
| onmouseover | 用户把鼠标移动到HTML元素上 |
| onmouseout | 用户把鼠标移开HTML元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
八、js常用语句
1.条件语句if
//if 语句
if(条件){
条件为true时执行的代码
}
//else 语句
if (条件) {
条件为 true 时执行的代码块
} else {
条件为 false 时执行的代码块
}
//else if 语句
if (条件 1) {
条件 1 为 true 时执行的代码块
} else if (条件 2) {
条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
条件 1 和条件 2 同时为 false 时执行的代码块
}
//实例
if(new Date().getHours() < 6){
console.log("天还没亮，再睡会吧~");
}else if(new Date().getHours() < 12){
console.log("上午好")
}else if(new Date().getHours() < 18){
console.log("下午好")
}else if(new Date().getHours() < 23){
console.log("晚上好")
}else{
console.log("夜已深，早点休息吧~")
}
