Web/04-JavaScript基础/01-JS简介.md
qianguyihao b15f81617d fix #71
2019-12-03 19:11:10 +08:00

359 lines
12 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## JavaScript背景
Web前端有三层
- HTML从语义的角度描述页面**结构**
- CSS从审美的角度描述**样式**(美化页面)
- JavaScript从交互的角度描述**行为**(提升用户体验)
JavaScript是世界上用的最多的**脚本语言**。
### 发展历史
JavaScript诞生于**1995年**。布兰登 • 艾奇Brendan Eich1961年1995年在网景公司发明的JavaScript。
JavaScript是由**网景**公司发明起初命名为LiveScript1995年年12月SUN公司合作因市场宣传需要改名为 JavaScript。
后来 Sun 公司 被Oracle收购JavaScript版权归Oracle所有。
> 备注由于当时Java这个语言特别火所以为了傍大牌就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。
同时期还有其他的网页语言比如VBScript、JScript等等但是后来都被JavaScript打败了所以现在的浏览器中只运行一种脚本语言就是JavaScript。
### JavaScript的发展蒸蒸日上
2003年之前JavaScript被认为“牛皮鲜”用来制作页面上的广告弹窗、漂浮的广告。什么东西让人烦什么东西就是JavaScript开发的。所以很多浏览器就推出了屏蔽广告功能。
2004年JavaScript命运开始改变。那一年**谷歌公司开始带头使用Ajax技术**Ajax技术就是JavaScript的一个应用。并且那时候人们逐渐开始提升用户体验了。Ajax有一些应用场景。比如当我们在百度搜索框搜文字时输入框下方的智能提示可以通过Ajax实现。比如当我们注册网易邮箱时能够及时发现用户名是否被占用而不用调到另外一个页面。
2007年乔布斯发布了第一款iPhone这一年开始用户就多了上网的途径就是用移动设备上网。
**JavaScript在移动页面中也是不可或缺的**。并且这一年互联网开始标准化按照W3C规则三层分离JavaScript越来越被重视。
2010年人们更加了解**HTML5技术****HTML5推出了一个东西叫做Canvas**画布工程师可以在Canvas上进行游戏制作利用的就是JavaScript。
2011年**Node.js诞生**使JavaScript能够开发服务器程序了。
如今,**WebApp**已经非常流行,就是用**网页技术开发手机应用**。手机系统有iOS、安卓。比如公司要开发一个“携程网”App就需要招聘三队人马比如iOS工程师10人安卓工程师10人前端工程师10人。共30人开发成本大而且如果要改版要改3个版本。现在假设公司都用web技术用html+css+javascript技术就可以开发App。也易于迭代网页一改变所有的终端都变了
虽然目前WebAppWeb应用在功能和性能上的体验远不如Native App原生应用但是“在原生App中内嵌一部分H5页面”已经是一种趋势。
## JavaScript介绍
### JavaScript入门易学性
- JavaScript对初学者比较友好、简单易用。可以使用任何文本编辑工具编写只需要浏览器就可以执行程序。
- JavaScript是有界面效果的相比之下C语言却只有白底黑字
- JavaScript是**弱变量类型**的语言,变量只需要用 var/let/const 来声明。而Java中变量的声明要根据变量的类型来定义。
比如Java中需要定义如下变量
```java
int a;
float a;
double a;
String a;
boolean a;
```
而JavaScript中只需要用一种方式来定义
```JavaScript
// ES5 写法
var a;
// ES6 写法
const a;
let a;
```
### JavaScript是前端语言
JavaScript是前端语言而不是后台语言。
JavaScript运行在用户的终端网页上而不是服务器上所以我们称为“**前端语言**”。就是服务于页面的交互效果、美化,不能操作数据库。
**后台语言**是运行在服务器上的比如PHP、ASP、JSP等等这些语言都能够操作数据库都能够对数据库进行“增删改查”操作。
备注Node.js是用 JavaScript 开发的,但属于后台的技术栈。
### JavaScript的组成
JavaScript基础分为三个部分
- ECMAScriptJavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- **DOM**:文档对象模型,操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。
- **BOM**:浏览器对象模型,操作**浏览器部分功能**的API。比如让浏览器自动滚动。
### 浏览器工作原理
![](http://img.smyhvae.com/20180124_1700.png)
1、User Interface 用户界面,我们所看到的浏览器
2、Browser engine 浏览器引擎,用来查询和操作渲染引擎
3、Rendering engine 用来显示请求的内容负责解析HTML、CSS
4、Networking 网络,负责发送网络请求
5、JavaScript Interpreter(解析者) JavaScript解析器负责执行JavaScript的代码
6、UI Backend UI后端用来绘制类似组合框和弹出窗口
7、Data Persistence(持久化) 数据持久化,数据存储 cookie、HTML5中的sessionStorage
参考链接:<https://www.2cto.com/kf/201202/118111.html>
**浏览器的组成**
- shell部分。
- 内核部分。包括渲染引擎语法规则和渲染、js引擎、其他模块。
## JavaScript 的特点
### 特点1解释型语言
**解释型语言**:不需要事先被翻译为机器码;而是边翻译边执行(翻译一行,执行一行)。
> 由于少了实现编译这一步骤所以解释型语言开发起来尤为方便但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术使得运行速度得以改善。
### 补充知识:编程语言的分类
> 所谓的“翻译”,指的是编译成计算机能够执行的指令。
**编译型语言**
- 定义:事先把所有的代码 一次性翻译好然后整体执行。比如说c语言的代码文件是`.c`后缀,翻译之后文件是`.obj`后缀(系统执行的是 obj 文件);再比如, java 语言的代码文件是`.java`后缀,翻译之后的文件是`.class`后缀。注意Java 语言不是严格的 编译型语言,这个一会儿会讲)
- 优点:运行更快。
- 不足:移植性不好,不跨平台。
- 编译型语言举例c、c++
**解释型语言**
- 定义:**边翻译边执行**,不需要事先一次性编译。
- 优点:移植性好,跨平台。
- 缺点:运行更慢。
- 解释型语言举例JavaScript、php、Python。
**Java语言**
Java 语言既不是编译型语言,也不是解释型语言。编译过程:
1`.java`代码文件先通过 javac 命令编译成`.class`文件。
2`.class`文件再通过 jvm 虚拟机,解释执行。有了 jvm 的存在,让 java 跨平台了。
### 特点2单线程
### 特点3ECMAScript标准
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association制定和发布的脚本语言规范。
JavaScript是由公司开发而成的问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织牵头制定JavaScript的标准取名为ECMAScript。
简单来说,**ECMAScript不是一门语言而是一个标准**。
ECMAScript在2015年6月发布了ECMAScript 6版本ES6语言的能力更强也包含了很多新特性。但是浏览器的厂商不会那么快去追上这个标准需要时间。
## 开始写第一行JavaScript代码
### JavaScript代码的书写位置
1内嵌的方式
页面中,我们可以在`<body>`标签里放入`<script type=”text/javascript”></script>`标签对儿,并在`<script>`里书写JavaScript程序
```
<script type="text/javascript">
</script>
```
text表示纯文本因为JavaScript也是一个纯文本的语言。
PS在Sublime Text里输入`<sc`按tab键可以自动补齐
2外链式引入外部JavaScript文件放到body标签里可以和内嵌的js代码并列
```
<script src="tool.js"></script>
```
### alert语句
我们要学习的第一个语句就是alert语句
```
<script type="text/javascript">
alert("生命壹号");
</script>
```
**alert**英文翻译为警报”)的用途**弹出警告框”**。
`alert("")`警告框的效果如下
![](http://img.smyhvae.com/20180116_1735.gif)
这个警告框在IE浏览器中长这样
![](http://img.smyhvae.com/20180116_1906.png)
上面的代码中如果写了两个alert()语句的话网页的效果是弹出第一个警告框点击确定后继续弹出第二个警告框
### 语法规则
学习程序是有规律可循的就是程序是有相同的部分这些部分就是一种规定不能更改我们成为语法
1JavaScript对换行缩进空格不敏感每一条语句以分号结尾
也就是说
代码一
```
<script type="text/javascript">
alert("今天蓝天白云");
alert("我很高兴");
</script>
```
等价于代码二
```
<script type="text/javascript">
alert("今天蓝天白云");alert("我很高兴");
</script>
```
备注每一条语句末尾要加上分号虽然分号不是必须加的如果不写分号浏览器会自动添加但是会消耗一些系统资源
2所有的符号都是英语的比如**括号**、引号分号
如果你用的是搜狗拼音**建议不要用shift切换中英文**可以在搜狗软件里进行设置不然很容易输入中文的分号建议用ctrl+space切换中英文输入法
3严格区分大小写
### 注释
我们不要把htmlCSSJavaScript三者的注释格式搞混淆了
1**html的注释**
```html
<!-- 我是注释 -->
```
2**CSS的注释**
```html
<style type="text/css">
/*
我是注释
*/
p{
font-weight: bold;
font-style: italic;
color: red;
}
</style>
```
注意CSS只有`/* */`这种注释没有`//`这种注释而且注释要写在`<style>`标签里面才算生效哦。
3**JavaScript的注释**
单行注释:
```
// 我是注释
```
多行注释:
```
/*
多行注释1
多行注释2
*/
```
备注sublime中单行注释的快捷键是`ctrl+/`,多行注释的快捷键是`ctrl+shift+/`。
## Javascript 网页中输出信息的写法
### 弹出警告框alert("")
我们在上一段讲到了alert语句这里不再赘述。
### 控制台输出console.log("")
`console.log("")`表示在控制台中输出。console表示“控制台”log表示“输出”。
控制台在Chrome浏览器的F12中。控制台是工程师、程序员调试程序的地方。程序员经常使用这条语句输出一些东西来测试程序是否正确。
`console.log("")`效果如下:
![](http://img.smyhvae.com/20180116_2008.gif)
普通人是不会在意控制台的,但是有些网站另藏玄机。有个很有意思的地方是,百度首页的控制台,悄悄地放了一段招聘信息:
![](http://img.smyhvae.com/20180116_2010.png)
毕竟做前端的人是经常使用控制台的。
接下来我们开始学习JavaScript语法。
### 用户输入prompt()语句
`prompt()`就是专门用来弹出能够让用户输入的对话框。用得少,测试的时候可能会用。
JS代码如下
```javascript
var a = prompt("请随便输入点什么东西吧");
console.log(a);
```
上方代码中,用户输入的内容,将被传递到变量 a 里面。
效果如下:
![](http://img.smyhvae.com/20180116_2230.gif)
**prompt()语句中,用户不管输入什么内容,都是字符串。**
**alert和prompt的区别**
```javascript
alert("从前有座山"); //直接使用,不需要变量
var a = prompt("请输入一个数字"); // 必须用一个变量,来接收用户输入的值
```
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/20160401_01.jpg)