《Head First HTML5 Programming》学习笔记——第二章

JavaScript基本介绍

目录

JavaScript基本介绍

介绍

JS工作方式

功能

JS如何实现与页面交互

---

 

介绍

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JS工作方式

功能

①创建一个变量并赋值（以完成一定的基本操作或使用 JS库的内置功能）

<!-- 创建变量 -->
//          赋值
  var scoops = 10; //注意结尾要带分号
//（声明变量）

 注：变量是个框啥都能往里装

        变量命名规则：

                #1变量要以一个字母、下划线或者美元符($)开头

                #2可以使用任意多个字母、数字、下划线或美元符（$）

                #3 一定要避开JavaScript的保留字

                 #4创建多次变量时使用“Camel case”记法（除第一个单词外，将每个单词首字母大写：twoHeadedDragonWithFire）

②实现循环（反反复复）

        其中while循环更可读，for循环更紧凑

<!-- while 循环 -->
var scoops = 10; //创建一个变量

while (scoops > 0) {    <!--完成条件测试-->
    alert ("More icecream!");
    scoops = scoops - 1;  <!--条件测试为True时执行-->
}

<!-- 为False执行 -->

alert ("Life without icecream isn't the same");
    

<!-- for循环 -->
for (scoops = 10; scoops > 0; scoop --) {
    alert ("There's more icecream!");  //为True时跳出循环
}
alert("Life ……");  //为False时跳出循环

③进行判断

        运用布尔表达式(boolean)进行判断，编写根据应用的状态并按条件执行的代码.

if (isReallyCool) {
    invite = "You're invited!";
}   else if () {
    invite = "……"
}   else {        <!-- else作为收纳箱，进行收纳判断为否的选项-->
    invite = "Sorry, we're at capacity.";
}

JS如何实现与页面交互

实现交互需要3个角色参与：浏览器、HTML、JavaScript

①浏览器加载页面

        a.解析HTML；

        b.创建文档的内部模型（DOM, Document Object Model）,内含HTML标记中的所有元素；

②JS与DOM交互访问元素极其内容（包括创建与删除）

③JS修改DOM是，浏览器会实时更新页面（只要你文件保存了浏览器刷新了就能看到更新）

DOM的功能：

1.从DOM得到元素，可获得一组元素（方法1：getElementById）

2.向DOM中创建或添加元素

3.向DOM中删除元素

4.获取和设置元素的属性

⚠️注：HTML等阅读顺序是自上而下，自动刷新的。所以，在页面加载完成之前请不要打扰DOM，所以可以运用window函数，在页面加载完成时再执行后续代码

<!—-运用window.on load使在页面加载完成后再运行init代码—->

window.onload = init;