前端JavaScript-day01
JavaScript历史回顾
1990年，欧洲的伯纳斯·李 发明了浏览器，不可以浏览图片。
1992年，NCSA开始开发一个独立的浏览器，叫做Mosaic，可以浏览图片。
1994年12月，navigator发布了1.0版
1995年5月，Brendan Eich只用了10天，就设计完成了这种语言的第一版。最初名字叫做 Mocha，1995年9月改为LiveScript。12月改名叫做JavaScript当时的意图是将 JavaScript 作为 Java 的补充，用来操作网页。
- 1996年3月，Navigator 2.0 浏览器正式内置了 JavaScript 脚本语言。
- 1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript（JavaScript是Netscape的注册商标，微软不能用），首先内置于IE 3.0。Netscape公司面临丧失浏览器脚本语言的主导权的局面。
- 1996年11月，Netscape公司决定将JavaScript提交给国际标准化组织ECMA。目前共25个人。该委员会定期开会，所有的邮件讨论和会议记录，都是公开的。
JavaScript版本
- 1997年7月，ECMA组织发布ECMAScript 1.0版。ECMAScript只用来标准化JavaScript这种语言的基本语法结构
- 1998年6月，ECMAScript 2.0版发布。
- 1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
- 2008年7月，发布为ECMAScript 3.1，会后不久，ECMAScript 3.1就改名为ECMAScript 5。
- 2009年12月，ECMAScript 5.0版正式发布。
- 2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。
JavaScript特点
- JavaScript:简称:JS
- 是一门编程语言
- 是一门客户端脚本语言,是一门弱类型的语言,声明都用var
- 是一门解释性的语言,是一门动态类型的语言,当浏览器解析这行代码的时候,才知道这个变量具体是什么类型,
- 是一门基于对象的语言,直接使用系统当中的对象.
- js最初的目的:解决用户和浏览器之间的交互问题
- 现在的目的:特效,游戏,应用程序,服务器端的程序
JavaScript的组成
ECMAScript DOM BOM
ECMAScript - JavaScript的核心
ECMA 欧洲计算机制造联合会
网景：JavaScript
微软：JScript
定义了JavaScript的语法规范
JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
BOM - 浏览器对象模型
一套操作浏览器的功能的API
通过BOM可以操作浏览器窗口，比如：弹出框，控制浏览器跳转，获取分辨率等
DOM - 文档对象模型
一套操作页面元素的API
DOM可以叭HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作，比如：购物车的增删改查
JavaScript的初体验
CSS： 行内样式。嵌入样式，外部样式
JavaScript的书写位置
-写在行内
- 写在script标签中
<head>
<script>
alert('Hello World!');
</script>
</head>
- 写在外部js文件中，在页面引入
<script src="main.js"></script>
注意点！！
引用外部js文件的script标签中不可以写JavaScript代码
ECMAScript标准 - JavaScript的核心
ECMA 欧洲计算机制造联合会，定义了JavaScript的语法规范
JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标 准与具体实现无关
BOM - 浏览器对象模型
Browser Object Model
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
DOM - 文档对象模型
Document Object Model
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
四种输出方式
a) alert() 在页面中弹出提示框
b) console.log() 在控制台中打印出信息
c) document.write() 在页面中打印出
d) prompt(“这里写我们要提示的内容：”) 接收用户输入的信息
标识符
概念： 给变量，函数等取名字的字符序列
命名规则：
1 由数字，字母，下划线_，美元符号$ 组成
2 不能以数字开头
3 不能是关键字（关键字是js语言赋予特定含义的单词 如：var）
4 区分大小写变量及变量声明
什么是变量：在程序运行过程中，值会发生改变的量
如何声明： 用var声明：
var a; //声明一个变量a
a = 10; //将10赋值给a
简化为：
var a = 10; // 声明一个变量命名为a，将10赋值给a
声明多个变量
var a = 10；// 声明一个变量a并赋值
var b = 20；// 声明一个变量b并赋值
var c = 30; // 声明一个变量c并赋值
var a,b,c; //同时声明变量a b c
a = 10;
b = 20;
c = 30;
var a = 10,b=20,c=30; //不建议
命名规则：
1 由数字，字母，下划线_，美元符号$组成
2 不能以数字开头
3 不能是关键字（关键字是JS语言赋予特定含义的单词如：var）
4 区分大小写
命名规范：
见名识意：applePrice name height color width
驼峰命名法：
applePrice
bigApplePrice 大苹果价格
backgroundColor 背景颜色
backgroundImage 背景图片
borderColor 边框颜色
borderWidth 边框宽度
常用命名：
sum（和）
max(最大值)
min(最小)
num（数字）
str(字符串名)
arr（数组名）
代码注释
typeof 操作符
代码注释
单行注释 //
多行注释 /* */
数据类型
Number 数值类型
整数，浮点数 ，NaN（非数字的数值类型）
10 10.1 NaN
String 字符串类型
‘10’ “哈哈” “10.1”
Boolean 布尔类型
true 真
false 假
undefined 未定义类型
只声明，未赋值
var a;
null 空类型
手动赋值
var a = null;
Object 对象类型
操作符
运算符 operator
5 + 6
表达式 组成 操作数和操作符，会有一个结果
算术运算符
+ - * / %
一元运算符
一元运算符：只有一个操作数的运算符
5 + 6 两个操作数的运算符 二元运算符
++ 自身加1
– 自身减1
前置++：先加1，后参与运算
后置++：先参与运算，后加1
前置-- ：先减1，后参与运算
后置-- ：先参与运算，后减1
逻辑运算符(布尔运算符)
&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
! 非 取反
关系运算符(比较运算符)
< > >= <= == != === !==
==与===的区别：==只进行值得比较，===类型和值同时相等，则相等
var result = ('55' == 55); // true
var result = ('55' === 55); // false 值相等，类型不相等
var result = (55 === 55); // true
! 非 取反
赋值运算符
= += -= * = /= %=
例如：
var num = 0;
num += 5; //相当于 num = num + 5;
关系表达式
关系表达式作用：测试两个值之间的关系，根据关系返回true或false。
关系表达式总是返回一个布尔值。通常在 if、while、或者for语句中使用关系表达式，用于控制程序的执行流程。
三目运算符
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
格式： 条件 ？ 语句1： 语句2；
执行流程：先判断条件，如果条件为true，结果为语句1，如果条件为false，结果为false。
如果变量 age 中的值小于 18，则向变量 voteable 赋值 “年龄太小”，否则赋值 “年龄已达到”。
voteable=(age<18)?“年龄太小”:“年龄已达到”;
运算符的优先级
优先级从高到底
1. () 优先级最高
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符 = += -=