JavaScript 学习笔记

JavaScript 学习笔记
一．引入方式
1.内部脚本：将JS定义在HTML中
2.外部脚本，将JS定义在外部JS文件，引入到HTML

①．

②．

二．JavaScript基础语法
1.书写语法

document.write(“hello js”)//写入html界面
window.alert(“hello js”)//写入警告框
console.log("fasd ") //写入浏览器控制台

2.变量

var：
1.作用域：全局变量

3.数据类型

4.运算符

==：
1.判断类型是否一样，如果不一样先进行类型转换
2.再去比较其值
===：全等于
1：判断类型是否一样，不一样直接返回false
3.再去比较其值

类型转化：
*其他类型转为number：
1.String;按照字符串的字面值转为数字，若原本不是数字则转为NAN(not a number)
2.boolean:true 转1，false转0

*其他类型转换为Boolean
1.number:0和NAN转false 其他转true
2.string：空字符串转为false，其它字符串转为true
3.null：false
4.undefined: false

5.流程控制语句

/*
//1. if
var count = 3;
if (count == 3) {
alert(count);
}*/

/*

//2. switch
var num = 3;
switch (num) {
    case 1: {
        alert("星期一");
        break;
    }

    case 2: {
        alert("星期二");
        break;
    }

    case 3: {
        alert("星期三");
        break;
    }

    case 4: {
        alert("星期四");
        break;
    }

    case 5: {
        alert("星期五");
        break;
    }

    case 6: {
        alert("星期六");
        break;
    }

    case 7: {
        alert("星期日");
        break;
    }


    default: {
        alert("输入的星期有误");
        break;
    }
}

*/

// 3. for

/*

var sum = 0;
for (let i = 1; i <= 100; i++) {
    sum += i;
}
alert(sum);

*/

/*
// 4. while

var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);*/


// 5. do...while

var sum = 0;
var i = 1;
do {
    sum += i;
    i++;
}
while (i <= 100);
alert(sum);

注意：for ，while 循环里的i 使用LET来定义而不是用var，因为var是全局变量，let是局部

6.函数

注意：形式参数不需要类型
返回值类型也不用定义，可以在内部直接用return返回

NAN+数字 = NAN

三．JavaScript对象
1.Array

2.String

3.自定义对象

四．BOM
BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
BOM 中包含了如下对象：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

// alert
// window.alert(“abc”);
// alert(“bbb”);

// confirm，点击确定按钮，返回true，点击取消按钮，返回false
/*var flag = confirm("确认删除？");

//alert(flag);

if(flag){
   //删除逻辑

}

定时器
/*
setTimeout(function,毫秒值): 在一定的时间间隔后执行一个function，只执行一次

    setInterval(function,毫秒值):在一定的时间间隔后执行一个function，循环执行
 */

/*setTimeout(function (){
    alert("hehe");	 
},3000);*/

History

Location
Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

//3秒跳转到首页

document.write("3秒跳转到首页...");
setTimeout(function (){
    location.href = "https://www.baidu.com"
},3000);

五．DOM
1.DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏
览器解析。封装的对象分为
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

2.作用：
JavaScript 通过 DOM， 就能够对 HTML进行操作了
改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

3.获取 Element对象
HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。
Document 对象中提供了以下获取 Element 元素对象的函数
getElementById() ：根据id属性值获取，返回单个Element对象
getElementsByTagName() ：根据标签名称获取，返回Element对象数组
getElementsByName() ：根据name属性值获取，返回Element对象数组
getElementsByClassName() ：根据class属性值获取，返回Element对象数组

六．事件监听
1.事件绑定
方式一：通过 HTML标签中的事件属性进行绑定
如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性 ，在事件属性中绑定函数。 onclick 就是 单击事件 的
事件属性。 οnclick=‘on（）’ 表示该点击事件绑定了一个名为 on() 的函数
下面是点击事件绑定的 on() 函数
方式二：通过 DOM 元素属性绑定
如下面代码是按钮标签，在该标签上我们并没有使用 事件属性 ，绑定事件的操作需要在 js 代码中实现
下面 js 代码是获取了 id=‘btn’ 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事
件触发后自动执行
代码演示：
<input type=“button” οnclick='on()’>
1
function on(){
alert(“我被点了”);
}
1
2
3

1
document.getElementById(“btn”).onclick = function (){
alert(“我被点了”);
}

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