JavaScript 基础1
1、什么是javascript？
- JavaScript ———— 一个面向对象的跨平台脚本语言。(高级编程语言)
- HTML文件必须在浏览器里执行。
- JS文件必须嵌入到HTML文件里才能执行。
- 凡是不能独立执行需要依赖其他程序的，通常都叫做脚本。
1.1.JS和HTML、CSS的关系
如果将我们建设一个网站比作是建设一栋大楼的话。
- html 相当于这栋楼的骨架
- Css 相当于这栋楼的装修
- JavaScript 相当于管理这栋楼的物业，让我们住在这个小区，有更好的入住体验。
2、JavaScript能做什么？
- 网页特效（漂浮的广告）
- 用户记住账户名密码
- 网页游戏(围住神经猫)
- ……
3、JavaScript的历史
JavaScript 诞生于 1995 年。目的是为了验证表单输入的验证。 在 JavaScript问世之前，表单的验证都是通过服务器端验证的。电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。
1995 年， 当时工作在 Netscape(网景)公司的布兰登(Brendan Eich)为解决类似于 “向服务器提交数据之前验证”的问题。在 Netscape Navigator 2.0 与 Sun 公司联手开发一个称之为LiveScript 的脚本语言。为了营销便利，之后更名为 JavaScript。
- 邪恶的后来者
因为 JavaScript1.0 如此成功，所以微软也决定进军浏览器，发布了 IE3.0 并搭载了一 个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）， 并且也提供了自己的 VBScript。 - 标准的重要
在微软进入后，有 3 种不同的 JavaScript 版本同时存在：NetscapeNavigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是， JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。 随着业界担心的增加，这个语言标准化显然已经势在必行。
灵敏的微软、迟钝的网景 - 标准的发展
在接下来的几年里，国际标准化组织及国际电工委员会（ ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同程度的成功和失 败）将 ECMAScript 作为 JavaScript 实现的基础。 - IE：JScript
- LiveScript
浏览器大战后 找到ECMA（欧洲计算机制造商协会，其中SUN如日中天） 制定标准ECMA Script.
后为了蹭JAVA热度，改名为JavaScript
4、JavaScript入门
编辑工具：写代码的工具
如：dreamweaver，editplus，Notepad++ sublime atom webStrom
运行环境：看结果的地方
如：IE，firefox，chrome。
- ECMAScript：是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展
- BOM： Browse Object Model，提供与浏览器交互的方法和接口
- DOM： Document Object Model，提供访问和操作网页内容的方法和接口
5、编写JS及如何运行JS
JS是一种脚本语言，他可以有两种方式在html页面中进行引入，
其中一种是外联JS，另一种是内部script。
5.1.外联script的写法
<script src="相对路径"></script>//该链接可以放在html页面的任意位置，不用和link标签一样一定放在head部分;
那么相对路径对应的应该为后缀为.js的文件。 例如：index.js
alert('hello world');//index.js中的代码
5.2.内部script：直接将js脚本写在html页面中，这样的写法要求将js脚本写在script标签中：
<script>
alert('hello world') //js脚本
</script>
【注】同样该script标签可以放在html页面任意的位置;但是一般情况下，语法规范要求我们将
5.3.经常性错误示范：
<script src="相对路径">
alert('hello world')；
5.4.向页面中输出内容;
document.write('这是一些内容');
标签的解析:
document.write('<strong>我似乎强壮了一些</strong>')
转义字符:< || >
< || >
document.write('<strong>强大的');
5.5.alert
alert()使用 。 停止浏览器加载代码。
- 浏览器解析代码顺序。（从上到下，从左到右）；
5.6.JavaScript的注释
- // 单行注释 （快捷键：ctrl+/）
- /* */ 多行注释 (快捷键：ctrl+shift+/)
5.7.JavaScript标签的属性
- src 表示要引入的外部文件
- type 表示脚本语言的类型
【注】text/javascript表示说明这一段脚本语言是JavaScript，告诉浏览器这一段要按照JavaScript来解释执行。不写也可以。
6、变量 VS 常量/字面量/直接量
6.1. 常量
常量/直接量( 字面量 literal)
所有直接量(字面量)，就是程序中直接显示出来的数据
100 //数字字面量
'田雨飞' //字符串字面量
false //布尔字面量
【注】数据类型: 基本数据类型 (后面还会重复提到)
Number
String
Boolean
复合数据类型
6.2.变量
- 变量定义/声明：
var age; //var 是关键字，age是变量名 - 赋值：
age = 20; - 定义的同时赋值：
var age = 20；【注】声明/定义变量的同时，赋值，叫做初始化。 - 可以一次定义多个变量：
var name=“tianyufei", age=18，weight=108; - 初值设置为null, 提供程序运行效率
6.3.变量的命名
【注】用户自定义的名字叫做标识符，变量名也是标识符。
JS的标识符：
- 标识符是指JS中定义的符号，例如：变量名、函数名等。
- 标识符可以由任意的大小写字母、数字、下划线(_)和美元符($)组成，但是不能以数字开头，不能是js中的保留字、关键字。
- 标识符区分大小写，如：age和Age是不同的变量。但强烈不建议，用同一个单词的大小写区分两个变量。
- 见名思意
- 驼峰式命名
6.4.数据类型
Number：数字（整数，浮点数float）
Array：数组
Object：对象
布尔类型：Boolean a==b
特殊类型：Null、Undefined、NaN
如果alert(abc)一个不存在的变量，会直接报错，而不是undefined，可见undefined和真正的未定义还是有些区别的。因为它是一种特殊类型。
【注】null也是一种值，但逻辑含义是没有值，它是对象Object类型。
【注】typeof关键字
6.5.JS是弱引用语言
- 弱引用类型：类型可以被更改（但不建议修改变量类型）
- js是弱数据类型的语言，容错性较高。
定义时不需要定义类型，赋值赋的是啥类型就是啥类型
var temp； //temp时啥数据类型？不确定
temp= 12; //temp变量是数字类型
temp = “hello”; //temp变量变成了字符串类型
怎么运行查看变量的类型
var x=123;
alert(typeof x);
6.6.编程习惯
-
空空格 运算符前后各空一格空格，逗号或者分号后面还有语句，空一格空格。
-
代码缩进 很多地方需要进行代码缩进，好的代码缩进可以帮助我们减少阅读时间，提高开发效率。 一个tab键 == 四个空格
-
分号 虽然不加分号在JavaScript语法上没有问题，但是建议不要省略分号，加了分号之后可以用软件压缩。良好的变成习惯（JavaScript权威指南）上的理由。
代码压缩
- 定义：去掉编写代码时的 所有空格、tab、换行
- 目的：对计算机解析无用
- 因此：写JS要写分号；
7、运算符
-
算术运算符（+，-, *,/,%(取余数)）
-
字符串和变量的拼接(+)
-
关系运算符
<、>、<=、>=、==、===、!= !== -
逻辑运算符
&& 与(且)、|| 或、! 非 -
赋值运算符a+=10;
=、+=、-=、*=、/=、%= -
自增、自减
++a, a++ --a, a-- -
a += 1
7.1.算数运算符
7.2自动数据类型转换（难点，我们后面会多次提及，帮助大家巩固）
其他数据类型转换为字符串：
var result = “你” + “好” //结果 你好 类型是string
var result = “1” + 1; //结果 11 类型是string
var result = “1” + true //结果 1true 类型是string
var result = “1” + undefined ; //结果 1undefined 类型是string
var result = “1” + null; //结果 1null 类型是string
- 总结：任何类型的数据和字符串类型的数据做相加（+）操作时，其他数据类型会自动的转换为字符串类型。此时的相加**（+）不再是数学意义上的加法，而是表示“拼接”**的意思。
其他数据类型转换为数字：
var result = 1 - “2”; //结果 1 类型是 number
var result = 1 - “我”; //结果 NaN 类型是 number
- 【注】NaN是一个值，这个值的类型是（number）。表现的意思是“不是一个数字”;
2.规则：任何数据除了和字符串做相加运算外，与NaN做算术运算的结果始终都是NaN。包括NaN本身和NaN做运算的结果也是NaN。
- 字符串是数值会自动的转换为数字，否则会转换为NaN
- true会自动的转换为1 false会自动的转换为0
var result = 1 * “1”; //结果 1 类型是 number
var result = 1 / “1”; //结果 1 类型是 number
var result = 1 + true; //结果 2 类型是number
var result = 1 * false; //结果 0 类型是 number
- null会自动的转换为0， undefined会自动的转为NaN
var result = 1 + null ; //结果是1 类型是number
var result = 1 + undefined //结果是NaN 类型是number
3.总结：任何其他数据除了和字符串做相加操作外，与数字类型做算术运算时，其他数据会自动的转换为数字。
- 其他数据转换布尔：
Boolean(数据);
数字转Boolean
非0数字->true;
0 --> false;
字符串转Boolean
非空字符串(包含空格)-> true;
空字符串 -->false - null和undefined转换Boolean 都是false
7.3.浮点数
认识浮点数：带小数点的数
计算机天生计算小数运算有Bug
7.4.强制数据类型转换
- 字符串转换数字类型：parseInt()、parseFloat()
parseInt() 是把其它类型转换为整型；
parseFloat() 是把其它类型转换为浮点型（小数)
Number(数据); 数字str1 = '110110' alert(parseInt(str2,2)) //52 str1 = '64' alert(parseInt(str2,8)) //52
认识NaN：他是一种特殊的Number类型结果，代表意外转换的数字，NaN和任何东西都是不等的。
7.5.算数运算补充
【注】当被除数为0的时候。
正数/0 结果为 infinity （无穷大）
负 数/0 结果为 -infinity（无穷小）
9、表达式（1、表达式的值 2、表达式的功能）
由运算符和操作数（变量或常量）组成的式子
算术运算符组成的式子叫算术表达式
关系运算符组成的式子叫关系表达式或者条件表达式
逻辑运算符组成的式子叫做逻辑表达式
……
如：2+3；a+5；c>3; a&&b等；100是一个最简单的表达式。
审视表达式分两步
<1>看表达式的功能
<2>看表达式的值
10、赋值运算符
【赋值运算符】
-
赋值运算符用等于号(=)表示，就是把右边的值赋给左边的变量。
-
复合赋值运算符通过 x=的形式表示，x 表示算术运算符。
11、一元运算符
【一元运算符】
概念：只能操作一个值的运算符叫做一元运算符。
var age = ++box; //加后取值 先执行加法运算,在取值
var height = box++; //加前取值 先取值,再执行加法运算
（了解，编程涉及不到）【其他类型应用一元运算符的规则】
var box = '89';
box++; //90,数值字符自动转换成数值
var box = 'ab';
box++; //NaN,字符串包含非数值转成NaN
var box = false;
box++; //1,false转成数值0,累加就是1
var box = 2.3;
box++; //3.3,直接加1
12、关系运算符
12.1.关系运算的规则（1）
【注】用于进行比较的运算符称作为关系运算符：小于(<)、大于(>)、小于等于(<=)、大于等 于(>=)、相等()、不等(!=)、全等(恒等)(=)、不全等(不恒等)(!==)
和其他运算符一样,当关系运算符操作非数值时要遵循一下规则:
1.两个操作数都是数值，则数值比较；
2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；
3.两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；
12.2.关系运算的规则（2）
在相等和不等的比较上，如果操作数是非数值，则遵循一下规则：
1.一个操作数是布尔值，则比较之前将其转换为数值，false 转成 0，true 转成 1；
2.一个操作数是字符串，则比较之前将其转成为数值再比较
3.一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN 和自身不等；
4.在全等和全不等的判断上，比如值和类型都相等，才返回 true，否则返回 false
12.3关系运算（特殊值）
13.1.逻辑运算的短路操作
逻辑运算符通常用于布尔值的操作，一般和关系运算符配合使用，有三个逻辑运算符：
- 逻辑与(AND)、
- 逻辑或(OR)、
- 逻辑非(NOT)。
- 逻辑与运算符属于短路操作，顾名思义，如果第一个操作数返回是 false，第二个数不 管是 true 还是 false 都返回的 false。
- 和逻辑与运算符相似，逻辑或运算符也是短路操作。当第一操作数的求值结果为 true， 就不会对第二个操作数求值了。
13.2. 逻辑运算符（非）
- 逻辑非(NOT)：!
**逻辑非运算符可以用于任何值。**无论这个值是什么数据类型，这个运算符都会返回一个 布尔值。它的流程是：先将这个值转换成布尔值，然后取反，规则如下：
1.操作数是一个空字符串，返回 true；
2.操作数是一个非空字符串，返回 false；
3.操作数是数值 0，返回 true；
4.操作数是任意非 0 数值(包括 Infinity)，false；
5.操作数是 NaN，返回 true；
6.操作数是 undefined，返回 true；
14、位运算（了解）
【更多的详情】
http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp
应用层开发(面向对象语言)
JavaScript ->C语言->汇编->二进制（机器码）
15、复习和补充
1.字符串运算符
字符串运算符只有一个，即： “+”。它的作用是将两个字符串相加。 规则：至少一个操作数是字符串即可。
2.逗号运算符
逗号运算符可以在一条语句中执行多个操作。
15.1.运算符优先级
16、什么是进制？
我们平时所习惯的不过是一种别人规定好的规则而已，比如我们在买东西的时候，一市斤，而英国使用的是磅；
进制也是我们在数数的时候的一种习惯，我们每个人都有十个手指，我们习惯上使用的数数是十进制。但是对于计算机来说，我们必须使用二进制，那是因为组成计算机的元件，一般只有两种状态 0 1。
【注】但是二进制对于我们程序员来说阅读不是很方便，也不方便书写，所以有了八进制和十六进制。
八进制 0~7
十六进制 0~9 a b c d e f
16.1.十进制转二进制
除二取余法
16.2.二进制转八进制
十进制转八进制，同样可以使用除八取余法。
一般情况下，我们直接使用二进制转八进制。
规则：从右往左数，每三位一组，不足三位的用0补齐，将每一组数转成十进制，这个数就是八进制数。
16.3.二进制转十六进制
十进制转八进制，同样可以使用除十六取余法。
一般情况下，我们直接使用二进制转十六进制。
规则：从右往左数，每四位一组，不足四位的用0补齐，将每一组数转成十进制，这个数就是八进制数。
16.4.快捷的进制转换
进制转换——> 变量/常量.toString(进制数)
var num1 = 072; //八进制数 58
var num2 = 0xAF; //十六进制数 175
alert(num1.toString(10));
alert(num2.toString(10)); //将数字转成指定的进制格式。
进制转换——> 将字符串转成十进制
var str = "3a";
alert(parseInt(str, 16)); //第二个参数，指定字符串的进制格式。
16.5.进制转换的应用
- 基本上使用的几率很小，对编程的帮助不大，了解就好。那为什么还要学习呢？因为了解进制转换，可以帮助我们更加深入理解计算机运行原理。
16.6.进制转换练习
练习:
1.将这些二进制数字10010(2) 1100(2) 10111(2)转成10进制数字
2.转成八进制、十六进制
10010(2) 18 22 12
1100(2) 12 14 c
10111(2) 23 27 17
作业:转成八进制、十六进制
1.将下列10进制数转成二进制
193 49 81 35
11000001 110001 1010001 100011
2.将下列二进制数转成十进制数
100001001 265
11001101 205
17、console.log
160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
