JavaScript入门 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

初识JavaScript

本堂课的重点内容

• 了解什么是JavaScript
• 学习JavaScript中常用语法

问题

什么是JavaScript？

基于对象语言，支持面向对象写法，弱类型语言。定义变量时不需要声明数据类型。

JavaScript

语言特点

• 弱类型语言
• 解释型语言
• 基于对象

语言核心

使用编程语言操纵DOM（文档对象模型——标签元素）和BOM（浏览器对象模型——整个窗体）

BOM 文档对象模型（document object model）：控制页面中所有的元素（标签），更改样式、内容。元素：html标签抽象成一个元素。

DOM 浏览器对象（browser object model）浏览器对象模型 :与浏览器进行交互的方法和接口。

变量与数据类型

分为两种：全局变量和局部变量。

var 全局变量，整个页面中使用，要求宽松。定义完成为window对象的属性

let 局部变量，要求严格。不能重复定义，先定义后使用否则报错（终止），局部作用范围，接近于c和java语言中的变量

函数

function函数，定义在程序主体中。method方法，定义在类中，成员方法。

函数的定义、执行。有参数的函数、有返回值的函数。

多次重复执行的过程，定义成函数。多次调用。

function 函数(参数1..参数2...) 
{
    函数体；
    return 返回值；
}

DOM

文档对象模型（document object model）：控制页面中所有的元素（标签），更改样式、内容。元素：html标签抽象成一个元素。

document.getElementById();//根据id获得一个元素
document.getElementsByTagName();//根据标签名获得多个元素
document.getElementsByClassName();//根据类名获得多个元素
document.getElementsByName();//根据名字获取多个元素
document.querySelector();//根据选择器查找返回一个结果 #dv1|.box|div|div,span|div>span|div span|
document.querySelectorAll();//根据选择器查找返回集合结果

事件

定义事件，定义在标签上。点击事件、获得焦点、键盘按键.....来源于输入设备，特定的动作

以 “on” 开头。

<a onclick="函数名(参数1..)"> //点击标签，执行对应的函数

this 指的是当前的标签，可以当做函数的参数，执行函数通过参数获取当前对象

<a onclick="del(this)">删除</a>

BOM

浏览器对象（browser object model）浏览器对象模型

BOM包含五个子对象：window、document、location、history、navigator浏览器信息。

window.innerHeight // 浏览器窗口的内部高度(包括滚动条)
window.innerWidth // 浏览器窗口的内部宽度(包括滚动条)
window.scrollY // 窗口纵向滚动高度
window.scrollX // 窗口横向滚动高度
window.open() // 打开新窗口

总结

HTML/CSS/JavaScript这三个都十分重要，他们各司其职，发挥着不同的作用，所以我们需要打好一个扎实的基础，只有打好基础才能再去学习框架等其它技术，让我们脚踏实地一步一个脚印。努力成为一个好的前端开发者！

学到这我想大家也对JavaScript有了初步的认识了吧，不如现在就开始动手练习练习吧

如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）

作者：Yifan

日期：2022年7月24日

电子邮箱：1279640748@qq.com