01-JavaScript开篇-指趣学院

2018-10-31 本文已影响1163人极客江南

什么是JavaScript？

JavaScript简称JS，是前端开发的一门脚本语言(解释型语言)
- 解释型语言：程序执行之前，不需要编译就可以直接运行, 运行时再边解析边执行的语言
- 编译型语言：程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件

User Interface 用户界面，我们所看到的浏览器
Browser engine 浏览器引擎，用来查询和操作渲染引擎
Rendering engine 用来显示请求的内容，负责解析HTML、CSS，并把解析的内容显示出来
Networking 网络，负责发送网络请求
JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码
UI Backend UI后端，用来绘制类似组合框和弹出窗口
Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage

JavaScript作用

HTML 提供网页上显示的内容（结构）
CSS 美化网页（样式）
JavaScript 控制网页行为（行为）

JavaScript发展史

JavaScript起源于Netscape公司的LiveScript语言
- 1994年网景公司发布历史上第一个比较成熟的浏览器(Navigator 0.9), 但是只能浏览不能交互
- 1995年为了解决表单有效性验证就要与服务器进行多次地往返交互问题，网景公司录用Brendan Eich(布兰登·艾奇)，他在 10 天内开发出 LiveScript 语言
- 在 Netscape Navigator 2.0 即将正式发布前，Netscape 将LiveScript 更名为 JavaScript，目的是为了蹭Java的热度
- 所以Java和 JavaScript之间的关系就像老婆和老婆饼一样

参考文献

JavaScript组成

ECMAScript：JavaScript的语法标准
- ECMA是European Computer Manufacturers Association的缩写，即欧洲计算机制造商协会
- ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
- JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
DOM(Document Object Model)：JavaScript操作网页上的元素(标签)的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
BOM(Browser Object Model)：JavaScript操作浏览器的部分功能的API
- 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

ECMAScript起源

JavaScript书写格式

和CSS书写格式一样, JavaScript也有三种书写格式, 分别是"行内式"、"内嵌式"、"外链式"
和CSS书写格式一样, JavaScript三种书写格式中也推荐大家使用"外链式", 遵守结构、样式、行为分离

行内式格式(不推荐)

<div onclick="alert('hello world');">我是div</div>

内嵌式格式

</body>
... ...
<script type="text/javascript">
       alert("hello world");
</script>
</body>

内嵌式注意点
- 通常将js代码放在body的最后, 因为HTML是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
- HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看
- 如果不愿意把js代码放在body的最后, 也可以放在head标签中, 但是为了保证执行js代码时HTML一定已经被加载了, 那么需要添加一些额外代码.(不推荐)

<head>
    <script>
        window.onload = function () { // 必须添加这句
            alert("hello world");
        }
    </script>
</head>

外链式格式

<script type="text/javascript" src="01-js书写格式.js"></script>

外链式注意点
- 外链式的script代码块中不能编写js代码, 即便写了也不会执行

<script type="text/javascript" src="01-js书写格式.js">
    alert("hello world"); // 不会被执行
</script>

由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度

JS中的常见输出方式

在浏览器弹窗中显示内容

alert("hello world");

prompt("请输入内容：");

confirm("你好吗?");

在页面中显示内容

document.write("hello world2");

在控制台中显示内容

console.log("hello world3");
console.error("错误信息");
console.warn("警告信息");

注意点：
- 和C语言一样, JS中严格区分大小写

alert("hello world"); // 正确 
Alert("hello world"); // 错误

和C语言一样, 每一条JS语句以分号(;)结尾
- 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
- 并且有些时候浏览器会加错分号，所以在开发中分号必须写
JS中会忽略多个空格和换行

alert
(
"hello world"
);

01-JavaScript开篇-指趣学院

什么是JavaScript？

JavaScript作用

JavaScript发展史

JavaScript组成

JavaScript书写格式

JS中的常见输出方式

猜你喜欢

热点阅读