JavaScript

JS 引入方式

内部脚本

<script>
    alert("Hello JavaScript")
</script>

外部脚本

<script src="js/demo.js"></script>

特性

• 区分大小写
• 结尾分号可有可无

注释

• 单行注释：// 注释内容
• 多行注释：/* 注释内容 */

输出语句

window.alert("Hello JavaScript");   //浏览器弹出警告框
document.write("Hello JavaScript"); //写入HTML,在浏览器展示
console.log("Hello JavaScript");  //写入浏览器控制台

变量声明

• var：声明变量，全局作用域，允许重复声明
• let：声明变量，块级作用域，不允许重复声明
• const：声明常量，可更改常量对象的属性

数据类型

• number：数字（整数、小数、NaN）

  将字符串字面值转为数字。如果字面值不是数字，则转为 NaN

• string：字符串，单双引皆可
• boolean：布尔（true、false）
• null：对象为空
• undefined：当声明的变量未初始化时，默认值是 undefined

运算符

• 算术运算符：+ , - , * , / , % , ++ ,–
• 赋值运算符：= , += , = , *= , /= , %=
• 比较运算符：> , < , >= , <= , != , == , ===

  双等号会进行类型转换，三等号不会进行类型转换

• 逻辑运算符：&& , || , !
• 三元运算符：条件表达式 ? true_value: false_value

类型转换

字符串转为数字

将字符串字面值转为数字。如果字面值不是数字，则转为 NaN。

其他类型转为 boolean

• Number：0 和 NaN 为 false，其他均转为 true。
• String：空字符串为 false，其他均转为 true。
• Null 和 undefined ：均转为 false。

函数

function functionName(参数1,参数2..) {
	//要执行的代码
}
var functionName = function (参数1,参数2..) {
    //要执行的代码
}

基础对象

Array

长度可变，类型可变

// 定义
var arr = new Array(1,2,3,4); 
var arr = [1,2,3,4];

// 属性
console.log(arr.length);

// 方法
arr.forEach(function(e){ // 遍历有值的元素
  console.log(e); // e是形参，接受的是数组遍历时的值
})
arr.forEach((e) => {
  console.log(e);
})

arr.push(7,8,9); //push: 添加元素到数组末尾

arr.splice(2,2); //splice: 删除元素，参数1：起始索引 参数2：删除元素个数

String

// 定义
var str = new String("Hello String");
var str = " Hello String ";

// 属性
console.log(str.length);

// 方法
str.charAt(4); // 返回在指定索引位置的字符
str.indexOf("lo"); // 检索指定内容在字符串中的索引位置
var s = str.trim(); // 去除字符串两边的空格
s.substring(0,5); // 截取字符串的，参数1：起始索引（包含） 参数2：结束索引（不包含）

自定义对象

var user = {
    name:"Tom", 
    age:20, 
    gender:"male",
    eat: function(){
        alert("用膳~");
    }
    eat(){
		alert("用膳~");
	}
};

JSON

用途：前后台交互的数据载体

var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
var obj = JSON.parse(jsonstr); //json字符串js对象
alert(JSON.stringify(obj)); //js对象json字符串

BOM

Window

浏览器窗口对象，window. 可以省略。
window 对象提供了获取其他 BOM 对象的属性
history location navigator document

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

方法

alert()
显示带有一段消息和一个确认按钮的警告框
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框

var flag = confirm("确认删除记录吗?");
// 确认 true 取消 false

setInterval()
按照指定的周期（以毫秒计）来调用函数或计算表达式

var i = 0;
setInterval(function(){
  i++;
  console.log("定时器执行了"+i+"次");
},2000);

setTimeout()
在指定的毫秒数后调用函数或计算表达式

DOM

对象

将 HTML 文档的各个组成部分封装为对象

• Document：整个文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象

获取

HTML 中的 Element 对象可以通过 Document 对象获取

• document.getElementById()
  根据 id 属性值获取，返回单个 Element 对象
• document.getElementsByTagName()
  根据标签名称获取，返回 Element 对象数组
• document.getElementsByName()
  根据 name 属性值获取，返回 Element 对象数组
• document.getElementsByClassName()
  根据 class 属性值获取，返回 Element 对象数组

操作标签属性

HTML DOMTokenList 参考手册

事件监听

绑定方法

通过 HTML 标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
    function on(){
  	  alert('我被点击了!');
    }
</script>

通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
    document.getElementById('btn').onclick=function(){
  	  alert('我被点击了!');
    }
</script>

常见事件

事件	动作
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开