[TOC]
JS基本语法
01入门
- 编辑器：
sublime
H5build
Atom - 运行环境：
主流的浏览器
1、IE
2、火狐
3、谷歌
4、safari
- JS组成部分：
1、ECMAScript
2、BOM 整个浏览器
3、DOM docment 文档 整个文档从<html>开始到<html>结束
02 JS 结构
1、type="text/javascript" 说明当前的文本类型
2、所有的js代码都必须写在script标签里
3、为了语法规范，script标签写在head标签中。
4、可以引入多个script标签，多个script标签之间，顺序执行。
5、js代码可以外部引入 <script type="text/javascript" src=js/demo.js>
6、如果当前script标签作用引入外部文件，这个script标签中，就不能写代码了。
alert("Hello World!");//在页面弹出警告框
//[注]每一条js语句后面都必须加分号,语法规范
document.write("Hello world");//在当前文本上输入内容
03 输出script标签
//< 是< >是>
//单行注释 快捷键ctrl+/
/*
多行注释 ctrl+shift+/
*/
04 变量
! +tab键 生成html模板
常量/字面量 确定的值叫做常量
100 3.14
【注】 JS中的数据类型分为两大类
1、基本数据量类型
<1>数据 number 100 3.14
<2>字符串string 所有带双引号/单引号 "hello" 'hello'
<3>布尔值 boolean true false
<4>特殊数据类型 null 空 undefind 未声明
2、复合数据类型
【注】变量，值可以改变的叫做变量
1、声明变量 通过关键字（系统定义的有特殊功能的单词）var
<1>声明变量的时候，同时给变量赋值，叫做初始化。
2、变量赋值
3、可以同时定义多个变量 变量之间是使用逗号隔开。
var age=18;
age=20;
alert(age);
var name="" ,age=18 ,sex="男";
alert(sex);
标识符：用户自定义的所有名字叫做标识符。变量名规律：
1、标识符必须由数字、字母、下划线和美元符号$组成。
2、不能以数字开头
3、标识符区分大小写，age 和Age 这是两个变量
4、标识符必须见名思意。
输入变量/常量的数据类型
【格式】 typeof 变量/常量
【注】JS是弱类型引用语言，变量被赋值成什么类型就是什么类型,不要在后续代码里改变变量的数据类型，很容易引起代码歧义
var age=18;
var Age=20;
alert(age);
alert(Age);
// var name="xxx";
// alert(typeof name);
var age=18;
alert(typeof age);//number
age="hello";
alert(typeof age);//string
05 运算符
算数运算符:
关系运算符
逻辑运算
赋值运算符
自增、自减运算符
06 自动数据类型转换
查看JS语法错误：
1、火狐 fireBug --打开菜单--安装插件
2、谷歌 chome 控制台
1、任何类型的数据和字符串类型数据做相加操作的时候。其它数据类型会自动转换成为字符串类型，字符串拼接。此时的相加操作不再是数学意义上加法，而是表示拼接的意思。
如果其中一个操作数是字符串的时候，+号叫做字符串拼接符
2、任何数据除了和字符串做相加运算外，先要将字符串转成数字再进行运算。
<1>与NaN做算数运算的结果始终都是NaN,包括NaN做运算结果也为NaN.
<2>字符串如果是纯数字字符串转成数字，否则转换成NaN
*/
// var tmp="您"+"好";
// var tmp="1"+1;
// var tmp="h"+true;
// var tmp="h"+undefined;
// alert(tmp);//tmp is not defined 变量没有声明
// var tmp=1-"2"; //-1 字符串"2" 转成了数字2
var tmp=1-"2a"; //NaN not a number
alert(tmp);
总结：任何其它数据类型除了和字符串做相加操作外，与数字类型做算数运算的时候，其它数据类型都会自动转换成数字。
布尔值：
true=>1
false=>0
特殊数据类型中：
null => 0
undefined => NaN
*/
//var tmp=1 * "1"; //1
//var tmp= 1/"1"; //1 number
//var tmp=1 + true; //2
// var tmp=1+false; //1
// var tmp=1 +null; //1
var tmp=1+ undefined; //NaN
alert( tmp);
08 强制数据类型转换
【注】通过方法Boolean()进行强制数据类型转换。
【作用】将别的数据类型强制转换成布尔值。
结论：
1、数字0转换成布尔值为false.所有非0的数字转换成布尔值都为true
2、空字符串转成布尔值为false,所有非空字符串转成布尔值为true
3、null 和undefined 转成布尔值都是false
*/
// var tmp=Boolean(1); //true
// var tmp=Boolean(0); //false
// var tmp=Boolean(-1); //true
// var tmp=Boolean(""); //false
// var tmp=Boolean("hello"); //true
// var tmp=Boolean(null); //false
var tmp=Boolean(undefined); //false
alert(tmp);
09 强制数据类型转换
Number() 将别的数据类型转成数字
1、布尔值 true=> 1 false=> 0
2、字符串 纯数字的字符串 =>对应的数字，否则NaN
3、特殊数据类型null=> 0undefined=>NaN
parseInt() 兼容Number 的功能，取整
parseFloat() 取浮点 带小数的数字 可以将的数据类型转换成数字
*/
//var tmp = Number(true); //1
//var tmp = Number(false); //0
//var tmp = Number("20"); //数字 20
//var tmp = Number(null); //0
//var tmp = Number(undefined); //NaN
var tmp = Number("20a"); //NaN
var tmp = parseInt("20a"); //20
var tmp = parseInt(3.13) //3
var tmp = parseFloat(3.24); // number
alert(tmp);
10补充
// var tmp = 1 / 0 ; //Infinity 无穷大
// var tmp = -1 / 0 ; //Infinity 无穷小
alert(tmp);
/*
代码规范：
1、注意层级缩进 tab = 四个空格
2、; ,后面都跟一个空格 运算符 = + 后面都应该空空格
3、每一条语句后面都必须添加 ; 分号
*/
11 表达式
/*
【概念】运算符和操作数组成的式子，叫做表达式
看表达式：
1、功能
2、表达式值
*/
/*
运算符的不同进行细分
*/
12 赋值运算符
赋值运算符
【注】 = 将等号右边的值赋值给等号左边的变量
复合赋值运算符：
+= *= /= %=
*/
/*
var tmp = 2 + 3;
alert(tmp);
*/
/* var tmp = 5;
tmp +=10; //tmp = tmp + 10;
alert(tmp); */
var tmp = 5;
tmp *= 2; //tmp = tmp * 2;
alert(tmp); //10
13 一元运算
/*
【注】 只能操作一个值的运算符，叫做一元运算符。
a++; 表达式值： ++后置，先取a的值，然后再进行+1操作。
++a;表达式值： ++前置，先进行+1操作，然后再a取值
【注】上述的两个表达式都是进行+1操作。
a--;
--a;
*/
/* var a =5;
alert(a++); //5
alert(a); //6 */
/* alert(++a); //6
alert(a); //6 */
var a = 5;
/* alert(a--); //5
alert(a); //4 */
alert(--a); //4
alert(a); //4
14运算符
/*
【注】关系运算符 中操作数为非数字的时候要遵循从以下规律：
1、如果两个操作数都是数值，则数值比较。
2、两个操作数都是字符串，则比较两个字符串对应的字符编码值。
ASCII码表值。
逐位进行比较，直到比较出大小，终止比较。
3、两个操作数有一个是数值，则将另一个转换成数值。
字符存储在计算机上 以二进制方式去进行存储
ASCII码表 二进制码个字符对应密码表
*/
// alert(5 > 3); //true
// alert("a" > "b"); //false
// alert("abc" > "abd"); //false
alert(2 > true); //true => 1 true
15 运算符进阶
关系运算符：
在等于和不等于的比较上，如果操作数为非数值，则遵循以下规律：
1、一个操作数为布尔值，则比较之前将其转换成数值，false转成0，true转成1
2、 一个操作数为字符串，则比较之前将其转成数值再进行比较。
3、一个操作数为NaN,则== 返回false，!= 返回true ,并且NaN和NaN 自身不等。
4、在全等和全不等。如果值和类false型都相等，才返回true,否则返回false
=== !==
*/
// alert(1 == true); //true
// alert(0 == false); //true
// alert(20 == "20"); //true
alert(1 != NaN); //true
alert(NaN != NaN); //true
alert(20 ==="20"); //false
alert(20 === Number("20")); //true
16 逻辑运算符
逻辑运算有3种：
1、 与
表达式1 && 表达式2
【注】只有当两个表达式的结果都为真的时候，与运算的结果才是true
【短路操作】当第一个表达式1为false的时候，第二个表达式2就不去执行，直接判断整个运算为false
2、 或
表达式1 || 表达式2
【注】只有当两个表达式都为假的时候，或运算的结果才为真
【短路操作】表达式1为true 的时候，表达式2就不去执行了，判断整个表达式为true
3、 非
!表达式
// alert(5 < 3 && alert(a)); //true
alert(5 > 3 || alert(a)); //true
17逻辑非运算
逻辑非运算遵从下述规律。
1、如果操作数是一个空字符串，返回true.
2、操作数是非空字符串，返回false.
3、操作数是0.返回false
4、操作数是任意非0的数值(包括Infinity)，false
5、操作数是NaN,返回true
6、操作数是undefined,返回true
// alert(!""); //true
// alert(!"ss"); //false
// alert(!0); //true
alert(!Infinity); //false
alert(!NaN); //true
alert(!undefined); //true
网友评论