JavaScript学习笔记 第二章 基础语法

一、JavaScript的调用方式

JS的引入方式

页面内引入

<script type=“text/javascript”>
    写JS的代码
<script>

 外部引入

<script type=“text/javascript” src=“外部文件的路径”><script>

二、JS中的注释：

       //单行注释

       /*    */多行注释

三、命名方法：

驼峰命名className （已知数值的常量用大写字母命名，例 PI）

四、变量：

存取在程序执行过程中值可变的量，是系统内存中的一个命名的存储单元。

1. 声明变量：let age = 8; 
2. 声明常量：const age = 8; const声明常量必须赋值
3. var 与 let的区别：let 是块作用域，var 是函数范围。（我也没搞懂）
4. 变量的命名规则：
• • 不能以数字开头，可以以字母或下划线开头
  • 不能占用关键字
  • 区分大小写
  • 变量特性: 存什么他就是什么
5. 变量类型：
• • 数字：number
  • 字符串：string
  • 布尔：boolean(true,false)
  • 空：null
  • 未定义：underfined

*：任何数据类型和字符串拼接都是字符串类型（强转）（“+” 拼接）

五、强制转换：

Number() 可以将字符串转换为数字 （快速方法在需要转换的方法前加+）

六、运算符：

===严格相等运算符，不会进行强制转换（建议使用）

==相等运算符，会进行强制转换

!== 严格不等于

!= 松散不等于

>= 大于等于

<= 小于等于

&& 且：当两个或多个表达式同时为 真 时，返回真，否则假

|| 或：当两个或多个表达式有一个为 真 时，返回为真，否则为假

? : 三元运算符 （if 条件）

Eg:

const age = 23;
// 三元运算符
age >= 18 ? console.log('I like to drink wine🍷') : console.log('I like to drink milk🥛');
// 三元运算符赋值
const drink = age >= 18 ? 'wine🍷' : 'milk🥛';
console.log(drink);

let drink2;
if (age >= 18) {
    drink2 = 'wine🍷';
} else {
    drink2 = 'milk🥛';
}
// 模板文字可以直接写三元运算符
console.log(drink2);
console.log(`${age >= 18 ? 'wine🍷' : 'milk🥛'}`);

！非：非真即假

*：通过value属性，获取页面中用户输入的值，拿到的是字符串。

七、模板文字

        `` （~键）里面可以使用 ''，"" ， ${变量/函数/常量/运算式}

八、常用方法

1. onmouseover:鼠标进入当前元素的事件
2. onmouseout:鼠标离开当前元素的事件
3. this():代表当前元素
4. onclick:鼠标单击事件
5. alert():弹出警示框的方法
6. write();document中的write("")方法允许用户通过JS实现在html文档中写入标签和文本的功能

九、获得页面中的元素

1. 通过ID去获取页面中的元素
2. getElementById()
3. 获取元素时，一定要通过document对象获取

十、隐藏元素的方法

1. display:none; 块不显示，位置也不占
2. visibility:hidden; 块不显示，还占位置

十一、Windows对象的弹窗方法

1. alert() 弹出警示信息
2. confirm() 确认框
3. prompt() 弹出提示信息，可以写入数据

*：parseInt()函数将字符串转换位int数据，若转换失败，返回NaN值（not a number）

十二、NaN  (not a number)

1. isNaN():是不是一个数字？ 返回 True or False，此方法只判断是否为数字，不判断数据类型；返回true，不是数字，False是数字。

十三、严格模式

"use strict";   //使用严格模式，必须在第一行

十四、常用属性

动态获取或添加文本（标记）：innerHTML()

十五、通过标签名获取页面中的元素

document.getElementsByTagName()

*拿到的是一个数组，数组的下标从0开始

*this:写在哪个元素身上，指的就是这个元素本身

document.querySelector('p').textContent;

这个也是获取元素的方法，.textContent获取元素里的具体信息

getElementsByTagName 与 querySelector 的区别

document.getElementByTagName('TagName');通过标签名.返回的是一个对象数组（准确的说是HTMLCollection集合）

querySelector()方法返回匹配指定css选择器的第一个元素,返回所有用querySelectorAll()方法替代

querySelector()方法按CSS规范实现 ，第一个字符不能为数字.

getElement方法性能好,query选择符更方便(舍弃性能)

getElement方法获取的结果是动态的,query所获取的是静态,

十六、计时器

1. setTimeout() 只执行一次; clearTimeout() 关闭定时器
2. setInterval() 每隔固定时长执行一次; clearInterval() 关闭定时器