JavaScript基础

JavaScript编程语言介绍

JavaScript，简称JS，是一种客户端脚本语言，主要用来向HTML网
页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
可以直接嵌入HTML页面，对写成单独的js文件有利于结构和行为的分离。
在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）
JS主要运行于客户端（浏览器），也可以运行在服务端（操作系统）

JavaScript和HTML、CSS区别

1.HTML：提供网页的结构，提供网页中的内容
2.CSS: 用来样式排版、美化网页
3.JavaScript: 可以用来控制网页内容，给网页增加动态的效果

JavaScript的组成

ECMAScript - JavaScript的核心
ECMAScript是一套语法标准，描述了JavaScript语言的基本语法和数据类型，是JavaScript的核心。 ES5 ES6
BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
DOM -文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

变量

• 什么是变量
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
• 为什么要使用变量
使用变量可以方便的获取或者修改内存中的数据
变量就是存储数据的容器；

• var声明变量：
var age;
• 变量的赋值
var age;
age = 18;

变量的命名规则和规范

• 由字母、数字、下划线、$符号组成，且不能以数字开头
• 区分大小写
• 不能是关键字和保留字，例如：for、while。
• 变量名必须有意义
• 遵守驼峰命名法。(首字母小写，后面单词的首字母需要大写。例如：userName、userPassword)

代码调试（输出变量）

1. alert 弹框 :浏览器页面弹框

   	var num1 = 10;
   	alert(num1);
   

2. console.log() 浏览器console控制台

   var num1 = 10;
   console.log(num1);
   

3. document.write() 浏览器页面中

   var num1 = 10;
   document.write(num1);
   

数据类型

Number（数值型）、String（字符串型）、Boolean（布尔型）、Undefined（未定义）、Null（空值）

Number类型
• 数值字面量：数值的固定值的表示法（数值直接量）
110 1024 60.5
• 浮点数（小数）

String类型
‘abc’ “abc” 单双引号引起来的一连串字符
• 字符串长度
length属性用来获取字符串的长度
• 字符串拼接
字符串拼接使用 + 连接
1. 两边只要有一个是字符串，那么+就是字符串拼接功能
2. 两边如果都是数字，那么就是算术功能。

Boolean类型
• Boolean字面量： true和false，区分大小写
• 计算机内部存储：true为1，false为0

Undefined和Null
undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
null表示一个空，变量的值如果想为null，必须手动设置

复杂数据类型（object）
Object 对象：保存很多数据的一种数据类型

转换数据类型

转换成数值类型
Number()：把任何值转换成数值
parseInt()：转换成整数
parseFloat()：转换成浮点数
+，-，-0 等运算：

var str = '500';
var str = '500';

转换成布尔类型

Boolean()
var a = Boolean('0');
var b = Boolean(0);
var c = Boolean('1');
var d = Boolean(null);
var e = Boolean(undefined);
var f = Boolean(NaN);
console.log(a,b,c,d,e,f); //true false true false false false
// 0、''(空字符串) 、null、 undefined 、NaN 会转换成false  其它都会转换成true

操作符

算术运算符

+ - * / %  取余（取模）

一元运算符
一元运算符：只有一个操作数的运算符，一元运算会直接修改原始变量的数据；
5 + 6 两个操作数的运算符 二元运算符

++ 自身加 (自增)
– 自身减 (自减)

前置++

var num1 = 5;
++ num1; 
var num2 = 6;
console.log(num1 + ++ num2); //13

后置++

var num1 = 5;
num1 ++;    
var num2 = 6 
console.log(num1 + num2 ++); //12

总结
前置++：先加1，后参与运算后置++：先参与运算，后加1
后置++ 运算的两个条件，满其一就会执行
前置-- ：先减1，后参与运算
后置-- ：先参与运算，后减1

**逻辑运算符(布尔运算符) **

&& 与 左边为真则取右边，左边为假则取左边
|| 或 左边为真则取左边，左边为假则边右边
!  非  取反

关系运算符(比较运算符)

<  >  >=  <= == != === !==
==与===的区别：
==只进行值得比较
===类型和值同时相等，则相等

赋值运算符
注意与数学符号的差别；

= += -= *= /= %= 

运算符的优先级

优先级从高到底

1. ()  优先级最高
2. 一元运算符  ++   --   !
3. 算数运算符  先*  /  %   后 +   -
4. 关系运算符  >   >=   <   <=
5. 相等运算符   ==   !=    ===    !==
6. 逻辑运算符 先&&   后||
7. 赋值运算符

循环结构

在JS语言中，循环语句有三种，while、do…while、for循环

1.while语句

当循环条件为true时，执行循环体，
当循环条件为false时，结束循环。

基本语法：
while (循环条件) {
  //循环体
}

2. do…while语句

do…while循环和while循环非常像，二者经常可以相互替代，
但是do…while的特点是不管条件成不成立，都会执行一次。

do {
  // 循环体;
} while (循环条件);

3.for语句

while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

// for循环的表达式之间用的是;号分隔的，千万不要写成,
基本语法：
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

continue和break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）