JavaScript入门

JavaScript简介

web前端有三层：

• html 页面结构
• css 页面样式
• javascript 行为 （与用户交互）

用途：

• 数据验证
• 网页特效
• 游戏开发
• 动态加载数据
• node.js开发服务器
• 手机app

为什么要学习JavaScript

在web前端里，JavaScript能跨平台，跨浏览器驱动页面，与用户交互。

它的功能很强大，用途很广泛。

它有着很大的社区，广泛的图书与文献，代码资源丰富。

JavaScript简介

JavaScript 一个面向对象的跨平台脚本语言

什么是面向对象？

我想吃鱼香肉丝

对于面向过程：

​ 1.去买菜

​ 2.买调料

​ 3.查一下菜谱

​ 4.开始做

​ 5.做好了

​ 6.倒掉

对于面向对象：

​ 1.盖一家饭店

​ 2.请一个厨师

​ 3.让他给你做饭

​ 4.开吃。

面向过程：

​ 优点：性能比面向对象好（开销比较小，比较节省资源）

​ 缺点：不易维护，不易复用。

面向对象：

​ 优点：易维护，易复用。

​ 缺点：性能比面向过程差。

什么是跨平台

平台：就是运行环境，一般指的是 操作系统。

• Windows
• IOS
• linux
• Android

什么是脚本？

脚本语言：不具备开发操作系统的能力，而是要配合其他应用程序来使用。js必须配合浏览器。

发展史

1995年诞生，最初是为了解决表单的频繁验证。频繁的与服务器交互，会加大服务器的压力，同时会影响用户的体验。

网景公司在96年就将这门语言用到了Navigator2浏览器中，并起名为 LiveScript。网景公司与sun公司达成了合作，为了推广LiveScript，将其改名为JavaScript。

​ JavaScript1.0获得的关注越来越高。网景公司浏览器的市场份额一度达到了90%。1996年，微软就在IE3中加入了名为JScript的JavaScript克隆版。

制定标准

网景将JavaScript提交给了欧洲计算机制造商协会（ECMA），ECMA指定了一套规范。初期时。JScript成为JavaScript语言的标准。

ECMA不是一门语言，而是一个标准

ECMA与JavaScript的关系：JavaScript是ECMA标准的实现。ECMA是JavaScript的规格标准。

ECMA版本的发展

1998年 ECMA2.0发布

1999年 ECMA3.0发布，成为了当时JavaScript的通行标准，并且获得了很大的支持。

谷歌，微软，MOzilla

3.1 Harmony 和谐

ECMAScript 5

ECMA 6.0

JavaScript发展

搜索引擎

04年谷歌公司带头使用了ajax技术。异步请求。

应用场景：百度搜索，输入框下面的智能提示。

10年 HTML5推出canvas画布 利用的也是js

11年 node.js 令js可以开发服务器。

js入门

1.学习环境非常好。

2.简单 Java c++ ruby

3.与主流语言相似性

js组成

JavaScript基础分为三大部分：

• ECMAScript :JavaScript的语法标准。 主要学习语法 ：变量，运算符，表达式，函数 数组，循环
• DOM：操作网页上的元素。
• BOM：操作浏览器部分功能。

JS链入方式

1.内嵌式
使用的是Script标签，该标签可以写在html文档中的任何位置
【强调】一般情况下，我们应该将其写在head标签中。

2.外链式
通过script标签的src属性，引入外部的js文件。

3.常见错误写法：

<script src="js/demo.js">
    alert("看看能不能用");
</script>

不要在同一个Script标签中同时使用内嵌式与外链式。
如果设置了src属性，Script标签中的内容就会被忽略。

<script src="js/demo.js"></script>

4.外链式的优点
1.提高代码的复用性。
2.提高网页的加载速度。
注释方式
//单行注释 ctrl+/

    /*
        多行注释
    */

输出语句

1. alert
   翻译：警报
   用途：弹出警告框。（在打开网页时，就立即弹出）
   格式：

alert('弹出内容');

2. console.log();
   在控制台输出
3. document.write("输出内容");
   在页面中输出
   语句:执行行为的语法结构和命令。
   通俗的说：语句是为了完成某个目的而进行的操作。
   语句以;结尾，一个分号就表示一个语句结束了。
   可以将多个语句写在同一行，但是每个语句独占一行可以调高代码的可读性。
   

分号：
当存在换行时，分号可以省略，但是不推荐这样做，因为若js文件被压缩，会出现错误。
变量是一个存放数据的容器，可以保存任何数据类型。

变量的定义和赋值
1.定义（声明）。 使用var关键字来定义变量。 var 后面跟一个空格，然后是变量名。
2.赋值。 = 等于赋值 将=右边的值赋给左边。

变量要先定义，再使用。
1.声明变量，没有赋值，直接使用，不会报错，但是结果是undefined（未定义）。
2.没有声明变量，直接使用，报错。

变量声明提升
执行顺序：
1.var a
2.var b
3.alert(a);

标识符：
用户自定义的名字叫做标识符。变量名是标识符。函数名也是标识符。
1.标识符可以由任一的大小写字母，数字，下划线_和美元符（$）组成，但是不能以数字开头.
2.标识符区分大小写。强烈不建议使用同一个单词的大小写来区分两个变量。
3.见名知意
4.不要使用js的保留字与关键字

关键字：js具有一些功能性的词语。
abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private 、transient、debugger、implements、protected 、volatile、double、import、public。

保留字：目前没有特殊功能，但是js保留下来可能以后使用。
abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield
可以将声明与赋值写在一起

var userName = "张三"; 

八大数据类型：

数值： number 整数和小数 1 3.1415926
字符串： string ‘hello’ “word”
布尔值： boolean 真假 true false
undefind：表示 未定义 或者 不存在。
null：表示空值，表示变量的值为：什么都没有。
对象 ：Pobject
数组： array
函数 ：function

原始类型（简单数据类型）：number string boolean
引用数据类型：object array function
特殊值：undefined null。

number

整数和浮点数（有理数）（无限不循环小数：无理数）
浮点数不是精确的值，涉及小数的计算和比较时一定要小心。
js内部，所有的数字都是以64位的浮点数形式存储的。

二进制转10进制：
10 = 1 * 2的一次方 + 0 * 2的0次方
0 = 0
1 = 1
10 = 2
11 = 3 2 + 1
100 = 4 1 * 2的二次方 + 0 * 2的1次方 + 0 * 2的0次方

10进制转2进制
整数： 除2取余，倒序排列。
小数： 乘2取整，顺序排列
2.1分为两部分
2 2/2=1 0 10
10.000110011001100
0.1 2 = 0.2 0
0.22 = 0.4 0
0.42 = 0.8 0
0.82 = 1.6 1
0.6 * 2 =1.2 1
0.2*2
1000.1111

数值范围：
±9007199254740991
当输出的值大于或小于9007199254740991时，会有一定的差别

数值的表示方式
科学计数法
12300 123*10的二次方 123e2
有两种情况，js会自动将数值转换为科学计数法
（1）小数点的数字多于21位。
（2）小数点后紧跟5个以上的零

数值的进制
console.log/alert中，会将其他进制的数字默认转为10进制。
二进制 0 1
十进制 0-9
八进制 0-7 有前缀为0o或0O的数值。
十六进制 0-9 a-f 前缀为0x或0X的数值
15 * 16 + 15 * 1
特殊数值
NaN：not a number 这不是一个数字。主要出现在字符串转数字出错的场合。
NaN与任何数（包括自身）的运算，得到的都是NaN。

Infinity 表示：无穷
+Infinity:无穷大
-Infinity 无穷小。

字符串

字符串是由零个或多个排列在一起的字符，放在单引号或双引号之中。
单引号与双引号可以嵌套使用。
如果想要在双引号中使用双引号，可以再嵌套的双引号前面加反斜杠 /

错误写法：
var str = “1 2
3”;

转义：
一些特殊字符需要转义才能在js中使用。
转义字符为：
\n 表示换行
\ 表示
\t 制表符
\x (ASCII)

操作字符串：
str.length 长度

str[下标] 获取单个字符。

str.toUpperCase() 将英文字符专为大写

toLowerCase()将英文字符专为小写

indexOf:(“参数”)返回字符串中指定字符的位置（下标）。

str.substr(“参数1”,“参数2”)返回字符串中从参数1开始的参数2个字符

substring(“参数1”,“参数2”):返回指定区域的字符串
str.substring(0,5)表示从下标为0的字符开始，到下标为5的字符结束，不包括结束字符。
str.substring(1)表示从下标为1的字符开始，直到字符串结束。

类型转换

javascript 是一种动态类型语言。
变量没有类型限制，可以随时赋予变量任意类型的值。

强制转换

Number（）

将任意类型的值专为数字
数值：转换后仍然是原来的值
字符串：
可以解析，转换成相应的数值
不可以解析，返回的是NaN
“” 返回 0

布尔值：
true 1
false 0
null 0
undefined NaN

parseInt()
字符串：将字符串转整数
数值：将数值取整数

parseFloat() 将字符串转浮点数

String（）

将任意类型的值专为字符串

Boolean（）

将任意类型的值专为布尔值
数值：非0即真。
字符串：’'为false，其他都为true

下面这五个值会转为false，其余都为true。
0
null
undefined
“”
NaN
布尔值：
true 1
false 0
null 0
undefined NaN

自动转换

其他数据类型转字符串
任何类型的数据和字符串类型的数据做相加操作 （+）

• 并不是算数运算，而是字符串拼接。
  此时其他的数据类型会自动转为字符串。

其他类型转数字
除了字符串与数字做相加运算外，其他会自动转数字进行运算。
NaN与任何类型做运算都为NaN ，包括它自身。

在什么情况下其他数据转布尔，if…else,
下面这五个值会转为false，其余都为true。
0
null
undefined
“”
NaN

输入语句

prompt（）
prompt（title,[default]）
title 是给用户显示的文本。

点击取消会返回null
什么也不写，点击确定会返回 空字符串

[default] 中括号表示参数是可选的， default 默认值

confirm（问题）
点击确定返回 true 点击取消 返回false