[笔记] 狂神 js 视频笔记 01

2024-04-12 22:28:50

相关页面 ↓

首页-KuangStudy

遇见狂神说的个人空间 - 哔哩哔哩 ( ゜- ゜)つロ乾杯~ Bilibili

【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

1 概述

1.1、前言

略

1.2、JavaScript历史

略

1.3、ECMAScript

因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA(European Computer Manufacturers Association)组织定制了JavaScript语言的标准，被称为ECMAScript标准。

所以简单说来就是，ECMAScript 是一种语言标准，而 JavaScript 是网景公司对 ECMAScript 标准的一种实现。那为什么不直接把 JavaScript 定为标准呢?因为 JavaScript 是网景的注册商标。不过大多数时候，我们还是用 JavaScript 这个词。如果你遇到 ECMAScript 这个词，简单把它替换为 JavaScript 就行了。

1.4、JavaScript版本

JavaScript语言是在10天时间内设计出来的，虽然语言的设计者水平非常NB，但谁也架不住“时间紧，任务重”，所以，JavaScript有很多设计缺陷，我们后面会慢慢讲到。

此外，由于JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 6标准(简称ES6)已经在2015年6月正式发布了，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。

由于浏览器在发布时就确定了JavaScript的版本，加上很多用户还在使用IE6这种古老的浏览器，这就导致你在写 JavaScript 的时候，要照顾一下老用户，不能一上来就用最新的ES6标准写，否则，老用户的浏览器是无法运行新版本的JavaScript代码的。

1.5、引入JavaScript

JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到 head 中

<html>
<head>
<script>
    alert('Hello, world');
  </script>
</head>
<body>
...
</body>
</html>

由 <script></script> 包含的代码就是 JavaScript 代码，它将直接被浏览器执行。

第二种方法是把JavaScript代码放到一个单独的.js文件，然后在HTML中通过 <script src="..."></script> 引入这个文件:

<html>
<head>
  <script src="/static/js/abc.js"></script>
</head>
<body>
...
</body>
</html>

这样， /static/js/abc.js 就会被浏览器执行。
把 JavaScript 代码放入一个单独的 .js 文件中更利于维护代码，并且多个页面可以各自引用同一份 .js 文件。可以在同一个页面中引入多个 .js 文件，还可以在页面中多次编写 <script> ... </script> ，浏览器按照顺序依次执行。

有些时候你会看到 <script> 标签还设置了一个type属性:

<script type="text/javascript">
  ...
</script>

但这是没有必要的，因为默认的 type 就是JavaScript，所以不必显式地把 type 指定为 JavaScript。

1.6、IDE推荐

可以用任何文本编辑器来编写JavaScript代码。这里我们推荐以下几种文本编辑器:

Visual Studio Code
Sublime Text
Notepad++
WebStorm
IDEA
HBuilder

1.7、运行JavaScript

要让浏览器运行JavaScript，必须先有一个HTML页面，在HTML页面中引入JavaScript，然后，让浏览器加载该HTML页面，就可以执行JavaScript代码。

你也许会想，直接在我的硬盘上创建好HTML和JavaScript文件，然后用浏览器打开，不就可以看到效果了吗?
这种方式运行部分JavaScript代码没有问题，但由于浏览器的安全限制，以 file:// 开头的地址无法执行如联网等 JavaScript 代码，最终，你还是需要架设一个Web服务器，然后以 http:// 开头的地址来正常执行所有JavaScript代码。

我的第一个javaScript程序

<html>
<head>
  <script>
    // 以双斜杠开头直到行末的是注释，注释是给人看的，会被浏览器忽略 
    /* 在这中间的也是注释，将被浏览器忽略 */
    alert('Hello,world');

  </script>
</head>
<body>
</body>
</html>

浏览器将弹出一个对话框，显示“Hello, world”。

1.8、调试

怎么在浏览器中调试JavaScript代码呢?
首先，你需要安装Google Chrome浏览器，Chrome浏览器对开发者非常友好，可以让你方便地调试 JavaScript代码。

安装后，随便打开一个网页，然后点击菜单“查看(View)”-“开发者(Developer)”-“开发者工具(DeveloperTools)”，浏览器窗口就会一分为二，下方就是开发者工具：

先点击“控制台(Console)“，在这个面板里可以直接输入JavaScript代码，按回车后执行。

要查看一个变量的内容，在Console中输入 console.log(a) ，回车后显示的值就是变量的内容。

关闭Console请点击右上角的“×”按钮。请熟练掌握Console的使用方法，在编写JavaScript代码时，经常需要在Console运行测试代码。如果你对自己还有更高的要求，可以研究开发者工具的“源码(Sources)”，掌握断点、单步执行等高级调试技巧。

码农公寓