第十六天，开始感受JS的乐趣

鹿啦鹿啦

于 2020-09-25 23:04:23 发布

阅读量591

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_45317318/article/details/108402725

版权

第十六天，开始感受JS的乐趣

课程目标
从今天开始，开始学习在Web开发中使用JavaScript/ECMAScript 来实现各种各样的交互逻辑及数据处理，今天的目标是初步了解 JavaScript/ECMAScript 是什么，开始学习基本的语法。

阅读一
首先我们阅读一些定义和历史，大概浏览一遍。

一文读懂JavaScript和ECMAScript的区别
W3School JavaScript历史

笔记
1.JavaScript 简介

JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式 (CSS)
JavaScript 能够隐藏 HTML 元素
JavaScript 能够显示 HTML 元素

2.什么是 JavaScript？
广义的定义：
JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层，其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解。

HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
JavaScript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

3.它到底可以做什么？
客户端（client-side）JavaScript 语言的核心包含一些普遍的编程特性，以让你可以做到如下的事情：
在变量中储存有用的值。

JavaScript 语言核心之上所构建的功能更令人兴奋。应用程序接口（Application Programming Interfaces（API））将为你的代码提供额外的超能力。

API 是已经建立好的一套代码组件，可以让开发者实现原本很难甚至无法实现的程序。就像现成的家具套件之于家居建设，用一些已经切好的木板组装一个书柜，显然比自己设计，寻找合适的木材，裁切至合适的尺寸和形状，找到正确尺寸的螺钉，再组装成书柜要简单得多。

API 通常分为两类。

浏览器 API 内建于 web 浏览器中，它们可以将数据从周边计算机环境中筛选出来，还可以做实用的复杂工作。例如：

文档对象模型 API（DOM（Document Object Model）API）能通过创建、移除和修改
HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗，或者显示了一些新内容（像上文小 demo
中看到那样），这就是 DOM 在运行。
地理位置 API（Geolocation API）获取地理信息。这就是为什么谷歌地图可以找到你的位置，而且标示在地图上。
画布（Canvas）和 WebGL API 可以创建生动的 2D 和 3D 图像。人们正运用这些 web 技术制作令人惊叹的作品。参见
Chrome Experiments 以及 webglsamples。
诸如 HTMLMediaElement 和 WebRTC 等影音类 API让你可以利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示（试用简易版截图 demo 以理解这个概念）。

第三方 API 并没有默认嵌入浏览器中，一般要从网上取得它们的代码和信息。比如：

Twitter API、新浪微博 API 可以在网站上展示最新推文之类。
谷歌地图 API、高德地图 API 可以在网站嵌入定制的地图等等。

4.JavaScript 在页面上做了什么？
让我们简单回顾一下，浏览器在读取一个网页时都发生什么（CSS 如何工作一文中首次谈及）。浏览器在读取一个网页时，代码（HTML, CSS 和 JavaScript）将在一个运行环境（浏览器标签页）中得到执行。就像一间工厂，将原材料（代码）加工为一件产品（网页）。
在这里插入图片描述
在 HTML 和 CSS 集合组装成一个网页后，浏览器的 JavaScript 引擎将执行 JavaScript 代码。这保证了当 JavaScript 开始运行之前，网页的结构和样式已经就位。

这样很好，因为JavaScript 最普遍的用处是通过 DOM API动态修改 HTML 和 CSS 来更新用户界面（user interface）。如果 JavaScript 在 HTML 和 CSS 就位之前加载运行，就会引发错误。

（1）浏览器安全
每个浏览器标签页就是其自身用来运行代码的独立容器（这些容器用专业术语称为“运行环境”）。大多数情况下，每个标签页中的代码完全独立运行，而且一个标签页中的代码不能直接影响另一个标签页（或者另一个网站）中的代码。这是一个好的安全措施，如果不这样，黑客就可以从其他网站盗取信息，等等。

（2）JavaScript 运行次序
当浏览器执行到一段 JavaScript 代码时，通常会按从上往下的顺序执行这段代码。这意味着你需要注意代码书写的顺序。

（3）解释代码 vs 编译代码

阅读二
1.console.log()的作用是什么？
（1）主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。

（2）相比alert他的优点是：

他能看到结构话的东西，如果是alert，淡出一个对象就是[object object],但是console能看到对象的内容。

（3）console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

（4）console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到:
在这里插入图片描述
2.alert( ) 函数的作用
弹出消息对话框，并且alert消息对话框通常用于一些对用户的提示信息。

阅读二

《JavaScript 高级程序设计》
W3School JS教程，从JS简介阅读到运算符

笔记
1.为何学习 JavaScript？
JavaScript 是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

2.JS简介
（1）JavaScript 能够改变 HTML 内容

实例

document.getElementById("demo").innerHTML = "Hello JavaScript";

使用该方法来“查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：

（2）JavaScript 能够改变 HTML 属性

实例

document.getElementById('myImage').src='/i/eg_bulbon.gif

通过改变标签的 src 属性（source）来改变一张 HTML 图像

（3）JavaScript 能够改变 HTML 样式 (CSS)

实例

document.getElementById("demo").style.fontSize = "25px";

改变 HTML 元素的样式，是改变 HTML 属性的一种变种

（4）JavaScript 能够隐藏 HTML 元素

实例

document.getElementById("demo").style.display="none";

可通过改变 display 样式来隐藏 HTML 元素：

（5）JavaScript 能够显示 HTML 元素

实例

document.getElementById("demo").style.display="block";

可通过改变 display 样式来显示隐藏的 HTML 元素

3.JS使用

（1）标签之间。

注:旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

(2)<head> 或 <body> 中的 JavaScript
能够在 HTML 文档中放置任意数量的脚本。

脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。

(3)外部脚本

脚本可放置与外部文件中：

外部文件：myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

外部脚本很实用，如果相同的脚本被用于许多不同的网页。

JavaScript 文件的文件扩展名是 .js。

如需使用外部脚本，需要在 <script> 标签的 src (source) 属性中设置脚本的名称：

实例

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

可以在 <head> 或 <body> 中放置外部脚本引用。

（4）外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

实例

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

（5）外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本：

本例使用完整的 URL 来链接至脚本：

实例

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

4.JS输出
注：JavaScript 不提供任何内建的打印或显示函数。

（1）JavaScript 显示数据方案

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

（2）使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容

（3）使用 document.write()
出于测试目的，使用 document.write() 比较方便

注：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ，该方法仅用于测试。

（4）使用 window.alert()
能够使用警告框来显示数据

（5）使用 console.log()
在浏览器中，您可使用 console.log() 方法来显示数据。
通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。

五.JS语句

1.在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。

2.JavaScript 语句

JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。

3.分号
分号分隔 JavaScript 语句。
如果有分号分隔，允许在同一行写多条语句：

4.JavaScript 空白字符
JavaScript 会忽略多个空格。可以向脚本添加空格，以增强可读性。

5.JavaScript 行长度和折行
为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。
如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符

6.JavaScript 代码块
JavaScript 语句可以用花括号（{…}）组合在代码块中。
代码块的作用是定义一同执行的语句。

7.JavaScript 关键词
在这里插入图片描述
六.JS语法
1.JavaScript 值
JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。

2.JavaScript 字面量
书写混合值最重要的规则是：
写数值有无小数点均可。
字符串是文本，由双引号或单引号包围

3.JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用 var 关键词来声明变量。
= 号用于为变量赋值。

4.JavaScript 关键词
JavaScript 关键词用于标识被执行的动作。
var 关键词告知浏览器创建新的变量。

5。JavaScript 注释
双斜杠 // 或 /* 与 */ 之间的代码被视为注释。

6.JavaScript 标识符
在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
在大多数编程语言中，合法名称的规则大多相同。
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
连串的字符可以是字母、数字、下划线或美元符号。

注：数值不可以作为首字符。

7.JavaScript 对大小写敏感
所有 JavaScript 标识符对大小写敏感。
变量 lastName 和 lastname，是两个不同的变量

8.JavaScript 与驼峰式大小写

历史上，程序员曾使用三种把多个单词连接为一个变量名的方法：
（1）连字符：

first-name, last-name, master-card, inter-city.

注：JavaScript 中不能使用连字符。它是为减法预留的。

（2）下划线：

first_name, last_name, master_card, inter_city.

（3）驼峰式大小写（Camel Case）：

FirstName, LastName, MasterCard, InterCity.

JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写：

firstName, lastName, masterCard, interCity

9.JavaScript 字符集
JavaScript 使用 Unicode 字符集。

Unicode 覆盖世界上几乎所有的字符、标点和符号。

七.JavaScript 注释

作用：
JavaScript 注释用于解释 JavaScript 代码，增强其可读性。
JavaScript 注释也可以用于在测试替代代码时阻止执行。

1.单行注释
单行注释以 // 开头。

2.多行注释
多行注释以 /* 开头，以 */ 结尾。

3.使用注释来阻止执行
使用注释来防止代码执行很适合代码测试。
在代码行之前添加 // 会把可执行的代码行更改为注释。

八.JS变量

1.JavaScript 标识符
所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。

2.赋值运算符
在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符。

注：JavaScript 中的“等于”运算符是 ==。

3.一条语句，多个变量
您可以在一条语句中声明许多变量。

以 var 作为语句的开头，并以逗号分隔变量

4.Value = undefined
在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。

不带有值的变量，它的值将是 undefined。

九.JavaScript 运算符

1.JavaScript 算数运算符
在这里插入图片描述
2.JavaScript 赋值运算符

3.JavaScript 比较运算符

在这里插入图片描述

4.JavaScript 类型运算符

在这里插入图片描述
5.JavaScript 位运算符

鹿啦鹿啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十六天，开始感受JS的乐趣

第十六天，开始干啥JS的乐趣课程目标从今天开始，开始学习在Web开发中使用JavaScript/ECMAScript 来实现各种各样的交互逻辑及数据处理，今天的目标是初步了解 JavaScript/ECMAScript 是什么，开始学习基本的语法。阅读首先我们阅读一些定义和历史，大概浏览一遍。W3School JavaScriptMDN 什么是JavaScript？一文读懂JavaScript和ECMAScript的区别W3School JavaScript历史笔记1.JavaScr
复制链接

扫一扫