JS学习总结_js结课总结-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45652400/article/details/139806884

JS学习总结

1、介绍
2、js核心机制

1、介绍

（1）联系

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

（2）Javascript

js的一个非常常见的用途是通过文档对象模型 API（如上所述）动态修改 HTML 和 CSS，以更新用户界面。请注意，网页文档中的代码通常按照其在页面上出现的顺序加载和执行。如果 JavaScript 先于要修改的 HTML 和 CSS 加载和运行，则可能发生错误。

构建网站需要用的html、css、javascript；html先渲染一个元素，css美化样式，js为该元素提供交互、动画等等。所以，简单来说，js是为网站提供交互的动态编程语言，通过浏览器内置接口以及第三方api实现交互，有很多第三方框架和库用于快速构建网站及app

JavaScript 可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）；是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性；JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等；JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使开发工作事半功倍。其中包括：

浏览器应用程序接口（API）——浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
第三方 API——让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
第三方框架和库——用来快速构建网站和应用。

（3）使用js

1、代码内使用js
使用 <style> 元素向 HTML 嵌入内部样式表，而 JavaScript 这里只需一个元素——<script>
2、外部js
在.html文件的<body>标签内的底部插入如下语句：

<script src="文件名.js" defer></script>
// defer 属性）来解决这一问题，它告知浏览器在遇到 <script> 元素时继续下载 HTML 内容。

之后在相应.js文件内编写即可

2、js核心机制

（1）变量

	a、声明变量
	let
	var
	b、数据类型
	string字符、单引号
	number数字、无需引号
	boolean布尔值、真假
	array数组、单一引用存储多值
	object对象、js内均为对象都可存储在变量里

在这里插入图片描述

（2）运算符

在这里插入图片描述

（3）条件语句

在这里插入图片描述
如果有多个条件判定，后面都是else if

（4）函数function

封装可复用功能
a、浏览器内置函数
document.querySelector 和 alert 是浏览器内置的函数，随时可用
alert（）函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。
代码中有一个类似变量名后加小括号 () 的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。
b、自定义函数

在这里插入图片描述
函数作用域在函数内，所以需要返回数字就要用到return语句

（5）事件

捕捉浏览器操作并运行一些代码做为响应（例如点击事件）
在这里插入图片描述
将事件与元素绑定有许多方法。在这里选用了元素，然后调用了它的 addEventListener() 方法，将事件名称（‘click’）以及其回调函数（当事件发生时，调用该函数）传入该函数中作为调用参数。

刚刚我们传递给 addEventListener() 的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种我们称之为箭头函数的写法，箭头函数使用 () => 代替 function ()：
在这里插入图片描述

（6）注释

单行注释//
多行注释/**/

（7）API

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

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

p.s. 第三方 API 并没有默认嵌入浏览器中，一般要从网上取得它们的代码和信息（例如twitter，新浪微博等的API）