前端学习之Javascript第一天

电玩女神 2022-05-09 03:10 258阅读 0赞

#                                             Javascript基础 #

### 一、聊聊Javascript ###

**    1、Javascript的历史来源**

94年网景公司   研发出世界上第一款浏览器。

95年 sun公司   java语言诞生

网景公司和sun合作。

Java+script   ===> javascript

**2、W3c规范**

☞结构标准        html

☞表现标准        css

☞行为标准      js

**    3、JavaScript和ECMAScript的关系**

ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association，制定的标准。

JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。

**简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。**就是说，你JavaScript学完了，Flash中的程序也会写了。

ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强。但是，浏览器的厂商不能那么快的去追上这个标准。这些新的特性，我们就业班的深入，也会给大家介绍。

**    4、今天的JavaScript：承担更多责任**

**2003****年之前，JavaScript被认为“牛皮鲜”**，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。

**2004****年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用**。并且，那时候人们逐渐开始提升用户体验了。

![70][]

![70 1][]

![70 2][]

![70 3][]

2010年的时候，人们更加了解HTML5技术了，**HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript**。

![70 4][]

2011年，Node.js诞生，使JavaScript能够开发服务器程序了。

**今天，JavaScript工程师是绝对的吃香，能够和iOS、Android工程师比肩，毫不逊色的。**

现在，公司都流行WebApp，就是用网页技术开发手机应用。什么意思呢？手机系统有iOS、安卓、windows phone。那么公司比如说开发一个“携程网”APP，就需要招聘三队人马，比如iOS工程师10人，安卓工程师10人，windows工程师10人。共30人，工资开销大。并且，如果要改版，要改3个版本。所以，现在公司，都用web技术，用html+css+javascript技术来开发app。好处是不用招聘那么多工程师，只需要几个前端开发工程师即可。并且也易于迭代，就是网页一改变，所有的终端都变了。

### 二、Js介绍 ###

◆js是一款运行在客户端的网页编程语言。

◆组成部分

★ecmascript   js标准

★dom        通过js操作网页元素

★bom        通过api操作浏览器

◆特点

★简单易用

★解释执行

编译执行  java  c\#  转化为.dll可执行文件==>电脑读取.dll可执行文件

★基于对象

面向过程

作用

◆表单验证

◆轮播特效

◆开发游戏

**2、Js书写位置**

◆内嵌式

![70 5][]

◆外链式

![70 6][]

★先创建一个外部JS文件

★通过src将外部js调用。

◆写js代码的时候，分号不能省略。

◆推荐将JS代码写在html结束标签后边

将多个JS文件合成为一个JS文件

### 三、输出消息的几种方式 ###

1、alert()  在页面弹出一个对话框，早期JS调试使用。

![70 7][]

2、Confirm()  在页面弹出一个对话框, 常配合if判断使用。

![70 8][]

3、console.log()  将信息输入到控制台，用于js调试。

![70 9][]

4、prompt() 弹出对话框，用于接收用户输入的信息。

![70 10][]

5、document.write()在页面输出消息

![70 11][]

document.write不仅能输出信息，还能输出标签。

◆转义字符

\\”   转双引

\\’转单引

\\n转换行

\\r 转回车

### 四、Js注释 ###

快捷键  ctrl+/

单行注释   //

多行注释  /\*  \*/

### 五、变量 ###

会变化的量。

变量是用来存储数据的容器。

◆定义变量

![70 12][]

◆给变量赋值

“=”是赋值运算符

![70 13][]

◆定义并赋值

![70 14][]

### 六、变量的命名规范 ###

◆不能以数字或者纯数字开头来定义变量名。

◆不推荐使用中文来定义变量名。

◆不能使用特殊符号或者特殊符号开头(-除外);

◆不推荐使用关键字和保留字来定义变量名。

![70 15][]

![70 16][]

★在JS中严格区分大小写的！！！

### 七、数据类型 ###

*  简单数据类型

◆Number   数字类型

包含正数  负数  小数

![70 17][]

数字类型的表达方式

★十进制表示法

![70 18][]

★十六进制表示法

从0-9，a(A)-f(F)表示数字。以0x开头。

![70 19][]

★八进制表示法

0开头，0-7组成。

![70 20][]

◆字符串  String

凡是用双引号或者单引号引起的都是字符串。

![70 21][]

◆布尔数据类型    Boolean

只有2个值一个是true, 一个是false.   实际运算中true=1,false=0

![70 22][]

◆undefined    变量未初始化

定义了变量，没有给变量赋值

![70 23][]

◆null  变量未引用  值为空   object

![70 24][]

### 八、复杂数据类型 ###

★ object  对象

★ array  数组

1、判断数据类型

typeof()

![70 25][]

2、比较运算符

<  >   <=  >=   ==  !=

3、算术运算符

◆+ 加号

★两个数字类型的变量相加，得到的是一个数字类型。

★一个数字类型和一个字符串相加，得到的是一个字符串。

◆— 减号

★两个数字类型的变量相减，得到的是一个数字类型。

★一个数字类型和一个数字字符串相减，得到的是一个数字类型。

★一个数字类型和一个非数字字符串相减，得到的是NaN,是一个数字类型。

NaN,    not a number

◆/ 除号

★两个数字类型的变量相除，得到的是一个数字类型。

★一个数字类型和一个数字字符串相除，得到的是一个数字类型。

★一个数字类型和一个非数字字符串相除，得到的是NaN,是一个数字类型。

★0做为除数的时候，得到结果  Infinity （无限大），是一个数字类型。

◆%  取余数

◆优先级  有()先计算()里边的

### 九、带操作的赋值运算 ###

![70 26][]

![70 27][]

如果有疑问联系博主：y19970821ywty

![70 28][]

要用到的工具，视频教程，关注公众号（Java学习之乐）直接免费获取：

![70 29][]

[70]: /images/20220509/e37dd71b8cef4db1a382b053fb3e2a69.png
[70 1]: /images/20220509/f40b6e108dc542e8924c56670b1a934f.png
[70 2]: /images/20220509/fe301e88f4a34ca3beb591f330e223ea.png
[70 3]: /images/20220509/4bb3892f5d974264b023d46db70c6600.png
[70 4]: /images/20220509/342820258c4b4194a40049f44181e5d0.png
[70 5]: /images/20220509/c73f2e69a47c4150a1a3ad177d5dd633.png
[70 6]: /images/20220509/f1b24987a6c2480ea2a090975a6013a5.png
[70 7]: /images/20220509/9b3b3d8e259b4f3eb31165356b290721.png
[70 8]: /images/20220509/be10c1baae004658bedb520972089f7e.png
[70 9]: /images/20220509/35f9b043d00d427082ade571310b83fb.png
[70 10]: /images/20220509/428c8a02d1ea432099f0149de0d71493.png
[70 11]: /images/20220509/06033731760c4bfdac433f43a499a5fc.png
[70 12]: /images/20220509/dc834fa1c2c549a6bccf548a08448e8b.png
[70 13]: /images/20220509/ac899db398274dbea1d1ef90a669ddff.png
[70 14]: /images/20220509/568facba8d0144b9a49a152071b20f77.png
[70 15]: /images/20220509/99778bbf8d50440dbe19b112033b606c.png
[70 16]: /images/20220509/51fde73b69f5487ab76b9ad2b7c990a2.png
[70 17]: /images/20220509/d89e047b5afc47b49d1bf5ddda13ba06.png
[70 18]: /images/20220509/9f9fe5a663ec470095eda53dc2c8edd3.png
[70 19]: /images/20220509/01ff10b09fc245259378bd6f994a85f3.png
[70 20]: /images/20220509/063480a1aa374b15ad583fd3ba828ddf.png
[70 21]: /images/20220509/8905fa56d507412caba21ef636cd79b6.png
[70 22]: /images/20220509/defe103829e840e49f10f8c3fa167d0e.png
[70 23]: /images/20220509/97184a9884a444b694bbe0463da3564e.png
[70 24]: /images/20220509/6d147e345dd64dfe92c52443478c3fbf.png
[70 25]: /images/20220509/227a29819a4240f1802a8c1845a361e4.png
[70 26]: /images/20220509/fb319e4be53541adbf8829a608267b49.png
[70 27]: /images/20220509/505169676c9745eb8d28dc604e641ccb.png
[70 28]: /images/20220509/cada8920c382467488712677fc5b704d.png
[70 29]: /images/20220509/c19d791e216c4731b372f9ec4b746b2f.png