1、Javascript概述
2、Javascript基础语法
3、变量和常量(重点)
4、数据类型
*******************************************
1、JS概述
1、什么是JS
JS是一种运行于JS解释器/引擎中的解释型脚本语言
编译型语言：程序在运行前会进行编译
解释型语言：运行之前不会编译，直接执行，出错则停止
JS解释器/引擎：是JS脚本的运行环境
1、独立安装的JS解释器(NodeJS)
2、嵌入在浏览器内核中的JS解释器
PC,平板，手机，电视 ... 全部都支持JS
2、JS的发展史
1、1992年 Nombas 为自己的软件开发了一款脚本语言C Minus Minus(C--)后更名为 ScriptEase,可以嵌入在网页中。
2、1995年 Netscape为自己的Navigator2.0 开发了另一种客户端脚本语言-LiveScript,为了借助Java势头，所以更名为 Javascript
3、1996年Microsoft为了进军浏览器市场，在IE3.0 中 发布了Javascript的克隆版，称为JScript
4、1997年，Javascript1.1作为草案提交给了ECMA(欧洲计算机制造商联合会),Javascript的核心 被更名成 ECMAScript
完整的JS语言是由三部分组成：
1、核心(ECMAScript)
2、文档对象模型(DOM)
Document Object Model
让JS有能力与页面进行对话(操作页面内容)
3、浏览器对象模型(BOM)
Browser Object Mode
让JS有能力与浏览器进行对话(操作浏览器)
JS语言的特点和用途
1、特点
1、任何文本工具都可以开发JS
2、无需编译，直接由JS引擎来执行
3、弱类型语言
由数据来决定数据类型
4、面向对象的语言
2、用于
1、客户端的JS
1、客户端数据计算
2、表单输入验证
3、浏览器事件的触发和处理
4、网页特效制作
5、服务器端的异步数据提交(AJAX)
2、服务器端的JS
1、分布式运算
2、实时服务器
3、窗口应用
4、网络应用
2、JS基础语法
1、使用JS(重点)
1、浏览器内核
内核作用：负责页面内容的渲染
组成：
1、内容排版引擎-解析HTML/CSS
2、脚本解释引擎-解析JS
浏览器 内核名 排版引擎 脚本引擎
IE Trident - Chakra
Firefox Gecko - Monkey
Safari Webkit Webcore Nitro
Chrome Webkit Webcore V8
Opera Presto - Carakan
Opera Webkit Webcore V8
(2013~今)
2、第一个JS程序
1、搭建JS运行环境
1、使用独立安装的JS解释器(NodeJS)
console.log("Hello World");
2、使用浏览器内核中的JS解释器
1、直接在Console中输入脚本并执行
2、将JS脚本嵌入在html页面中执行
1、html元素事件编写脚本
事件：onclick
<ANY onclick="脚本代码">
2、在 <script>元素中嵌入JS脚本
<script>
JS脚本
</script>
document.write("被排版引擎所解析的内容");
3、使用外部脚本文件编写JS脚本
1、创建一个 **.js 文件
在文件中编写JS脚本
2、在使用的页面上进行引用
<script src="js文件URL"></script>
2、JS调试(重要)
3、语法
1、使用JS
1、运行环境
1、独立的JS解释器(NodeJS)
2、浏览器内核中嵌入的JS解释器
1、浏览器 Console 中直接输入脚本
2、将JS嵌入在HTML页面中执行
1、元素事件中
<ANY onclick="">
console.log("输出的内容");
2、<script></script>元素中
<script>
document.write("输出在页面的内容");
注意：该内容是被内容排版引擎解析
</script>
3、外部脚本文件
1、创建 .js 文件
2、引入js文件
<script src="xxx.js"></script>
window.alert("");
alert("");
2、变量和常量
1、变量
1、what
内存中的一段存储空间
2、变量的声明
var 变量名;//声明
变量名=值;//赋值
//声明并赋值
var 变量名=值;
//一次性声明多个变量并赋值
var n1,n2=25,n3,n4;
3、变量名规范
1、不能是JS关键字和保留关键字
2、包含 字母，数字，下划线，"$"
3、不能以数字开头
4、变量的使用
1、声明变量未赋值
值默认为 undefined
2、使用未声明过的变量
console.log(userName);
报错
3、对变量进行的存取操作
1、存 - SET
= : 赋值符号
变量出现在 = 的左边，一定是赋值
var num1 = 12;
var num2 = 21;
num1=num1+num2;
console.log(num1);
2、取 - GET
只要变量不出现在=的左边，都是取值操作
var num1 = 12;
var num2 = num1;
console.log(num1);
2、运算符
算术运算符：+，-，*，/，%
1、%
作用：取余数
场合：
1、判断奇偶性或算倍数
2、获取某数字的最后几位
2、+
作用：
1、做数字的 加法 操作
如果 + 两边的数据都是数字类型则做 加法操作
2、做字符串的 连接 操作
如果 + 两边的数据有一个是字符串类型的则做的就是 连接操作
3、常量
1、what
一旦声明后，在程序运行过程中不能被修改的数据叫做常量
2、语法
const 常量名=值;
注意：通常常量名采用全大写模式
3、使用
const PI = 3.14;
PI = 31.4; // 报错
3、数据类型
1、what
保存在内存中的数据的类型
决定了数据在内存中所占的空间大小
2、分类
1、基本数据类型(原始类型)
1、number类型
数字类型：
表示 32 位的整数(4字节)
表示 64 位的浮点数(8字节)
整数：
十进制：var n1 = 123;
八进制：var n2 = 0123;
十六进制：var n3 = 0x12FA;
小数：
小数点表示法：var f1 = 123.456;
指数表示：var f2 = 123.4e10;
2、string类型
字符串类型：
表示一系列的文本字符数据
由Unicode字符、数字、标点组成
Unicode：
1、每个字符 都有一个 独立编码
"我".charCodeAt() : 返回Unicode码的十进制表现形式
"我".charCodeAt().toString(2)
返回Unicode码的二进制表现形式
"我".charCodeAt().toString(16)
返回Unicode码的十六进制表现形式
通过 Unicode码 打印字符：
console.log("\u4e00");
2、每个字符 都占据 2字节
转义字符：表示JS中的特殊字符
\n:换行
\r:回车(接收指令而非换行)
\t:制表符
\‘:‘
\":"
\\:\
3、boolean类型
布尔类型：表示真或假的一种结果
只有两个值：
1、true：真
2、false：假
实际运算中：
true 当做 1 运算
false 当做 0 运算
4、undefined类型
语义：访问的数据不存在
产生undefined的场合
1、声明变量未赋值
2、访问不存在的对象的属性
2、引用数据类型
==========================================
1、数据类型的转换
2、运算符和表达式
==========================================
1、数据类型转换
1、弱类型
由数据来决定数据类型
var num;//undefined
num=12;//number
num="你好";//string
num=false;//boolean
强数据类型：由数据类型来决定数据
1 、typeof() 函数
作用：获取指定数据的数据类型
语法：
typeof(变量) 或者 typeof 变量;
使用：
var result = typeof(变量);
2、隐式转换
不同类型的数据在计算过程中会自动进行转换
特点：
任何一种数据类型的数据，再与string做“+”运算时，都会转换成 string，再做连接
NaN : Not a Number , 不是一个数字
函数：isNaN(数据)
作用：判断数据是否为 非数字类型(只判断数值，与类型无关) ，如果是非数字，返回true，是数字返回false
问题：将字符串25转换为 数字25，再做加法运算
3、强制转换(显示转换)
由JS提供的一组转换函数来完成数据类型的转换
1、toString()
转换成字符串，任一数据类型的数据均可转换为string类型
语法：数据(变量).toString()
2、parseInt(数据)
将数据转换为number类型(整数)
碰到第一个非整数字符，则停止转换
如果无法转换时，转换的结果为NaN
3、parseFloat(数据)
将数据转换为number类型(小数)
碰到第一个非小数点或数字字符，则停止换换
4、Number(数据)
将一个数据解析为number类型
注意：如果数据中包含非法字符，则返回NaN
Number("25") : 25
Number("25.5") : 25.5
Number("25.5abc") : NaN
2、运算符和表达式
1、运算符
做数据的运算
2、表达式
由运算符和操作数所组成的式子，称之为表达式
var a = 5;//赋值表达式
var b = 10;//赋值表达式
a+b;//算术表达式
注意：每一个表达式，都有值
console.log(a+b);
b=a=a+b;
console.log(a=a+b);
1、数据类型转换
1、隐式转换
函数：typeof(变量) 或 typeof 变量
与字符串做加法操作，最后会将其他数据转换为字符串
2、转换函数
1、toString()
2、parseInt(数据)
3、parseFloat(数据)
4、Number(数据)
2、运算符和表达式
1、运算符
算术运算符，关系运算符，逻辑运算符，位运算符 ... ...
2、表达式
由运算符以及操作数所组成的式子
a+b;
a%4==0&&a%100!=0
a=b;
3、运算符详解
1、算术运算符
+,-,*,/,%,++,--
++:自增
++作为前缀：先自增再使用
++作为后缀：先使用再自增
var num = 5;
num++; ==> num = num + 1
2、关系运算符
>,<,>=,<=,==,!=,===,!==
==:判断等于，判断两个数据是否相等，如果相等，结果为true，否则为false
!=:不等于，判断两个数据是否不相等，如果不相等，结果为true，否则为false
===:判断数值和类型是否完全相等，完全相等时，结果才为true,否则为false
由关系运算符组成的表达式称之为 关系表达式，结果一定是boolean的
注意：
1、字符串 与 字符串 判断大小
比每位字符的Unicode码
"5">"30" : true
2、字符串 与 数字 判断大小时
将字符串 隐式的通过 Number()函数转换为数字再做比较
5>‘30‘ : false
3、任何一个数据与NaN进行比较时，结果一定是false
5>‘3a‘ : false,注意，3a会被转换成NaN
3、逻辑运算符
1、逻辑运算符
!:逻辑非
&&:逻辑与
||:逻辑或
2、短路逻辑
1、&&
只要第一个条件为假的话，则不会判断第二个条件，整个表达式结果为假
如果第一个表达式为真的话，则继续判断(执行)第二个表达式，并且以第二个表达式的结果作为整个表达式的结果
2、||
只要第一个条件为真的话，则不会判断第二个条件，整个表达式结果为真
如果第一个表达式为假的话，则继续判断(执行)第二个表达式，并且以第二个表达式的结果作为整个表达式的结果
4、位运算符
1、&
场合：判断奇偶性
2、|
场合：向下取整
3、<<
将二进制数字，向左移动几位，右面以0补位
4、>>
将二进制数字，向右移动几位，左边以0补位
5、^
异或
将两边的数字转换成二进制进行比较，每位上的数字，只有一个为1时，该位结果才为1，否则为0
var num1=5;
var num2=3;
num1=num1^num2;
5:101
3:011
-----
r:110 => 6 (num1=6)
num2=num2^num1;
3:011
6:110
-------
r:101 => 5 (num2=5)
num1=num1^num2;
6:110
5:101
--------
r:011 => 3 (num1=3)
=========================
1、运算符
1、赋值运算符
1、使用"="进行赋值
注意：
赋值符号的左边，必须是变量
const PI=3.14;(特殊)
2、扩展赋值表达式
+=,-=,*=,/=,%=,&=,|=,^=
ex:
var num = 5;
num+=3; ==> num=num+3;
num-=5; ==> num=num-5;
语法：a+=b;==> a=a+b;
2、字符串连接
运算符： +
3、条件运算符(三目运算符、三元运算符)
单目运算符：!,++,--
双目运算符：+,-,*,/,%,&&,||,^,&,|,>,<
三目运算符：需要三个操作数/表达式
语法：
表达式1?表达式2:表达式3;
表达式1的运行结果应为boolean类型
若表达式1为true，则整个表达式的值为表达式2的运算结果
若表达式1为false,则整个表达式的值为表达式3的运算结果
条件表达式允许被嵌套：
判断考试成绩，如果考试成绩>=80，则输出成绩优秀，如果大于等于60分，输出成绩合格，否则输出不及格
2、函数
1、什么是函数
没有函数的弊端：
1、事件中想执行JS脚本只能逐行编写
2、可重用性不高
函数(function)：可以被称之为方法(method)，过程(procedure)
是一段预定义好，并可以被反复使用的代码块
1、预定义
事先声明好的内容，不会马上被执行
2、反复使用
提升代码的可重用性
3、代码块
允许包含若干条的可执行语句
其实函数就是一段独立的功能体,同时也是一个功能完整的对象
2、定义函数
语法：
function 函数名(){
//函数体(待执行的代码块)
}
调用函数：
在任意合法的JS脚本位置处都可以调用函数。
语法：函数名();
练习：
编写一个函数，名称为change，函数体内要求用户从弹框上录入两个数字，并且进行数字的交换，最后打印输出交换后的两个数字。通过一个 按钮 调用该函数
学过的函数：
console.log("World");
alert();
prompt();
document.write();
Number();
toString();
parseInt();
parseFloat();
charCodeAt();
isNaN();
3、带参数函数的声明
1、参数
定义函数数，需要由外部传入到函数内部进行辅助运行的数据，称之为参数
console.log("Hello World");
2、声明带参函数
function 函数名(参数列表){
}
参数列表：由,隔开的参数名称的声明
function 函数名(参数1,参数2,参数3){
}
定义函数时定义的参数称之为"形参(形式参数)"
调用带参函数：
函数名(参数列表);
参数列表：由,隔开的具体参数值来组成的列表。
调用函数时所传递的参数称之为"实参(实际参数)"
3、分支结构
1、函数
1、什么是函数
是一段预定义好，并可以被反复使用的代码块
预定义：事先声明好
反复使用：提升代码的可重用性
代码块：允许包含多条可执行语句
2、声明函数
1、普通函数
function 函数名(){
//代码块
}
2、带参函数
参数：由外部传入到函数内部的数据
function 函数名(参数列表){
}
3、带返回值函数
返回值：需要返回给函数调用处的一个数据
function 函数名(参数列表){
return 值;
}
3、函数调用
1、普通函数
函数名();
2、带参函数
函数名(参数列表);
注意：传参时，按照形参的顺序来传递
3、带返回值函数
var result = 函数名(参数列表);
4、变量的作用域
1、什么是作用域
变量 或 函数的可访问范围，控制着变量的可见性和生命周期
作用域分类：
1、函数作用域：在声明的函数内可访问
2、全局作用域：在任何位置都能访问的
2、局部变量
出了定义的范围就无法使用
3、全局变量
1、独立于任何function的位置处声明变量
2、在 函数内 ，通过不使用var关键声明变量
function test{
stuName="张三丰";
}
4、声明提前
var 声明的变量以及function 声明的函数 会被预读到所在作用域的顶端，赋值还保留在原来的位置
function test(){
console.log(age);//undefined
console.log(...);
var age = 25;
console.log(age);
}
5、按值传递
JS基本数据类型在做参数传递时，实际上传递的是值的副本，在函数内的任何操作，不会影响到函数外的原始值
6、函数的作用域
1、局部函数
将 函数 声明在某个 函数内
2、全局函数
将 函数 声明在独立于任何function的位置处
7、全局函数
parseInt()
parseFloat()
Number()
isFinite()
encodeURI()
decodeURI()
eval()
2、分支选择结构
1、程序的流程控制
1、顺序结构
2、分支结构
3、循环结构
2、if结构
1、语法
if(条件){
语句块
}
2、注意
1、如果条件不是boolean类型，则会进行自动转换
以下情况可以被转换成假：
if(0){}
if(0.0){}
if(undefined){}
if(""){}
if(null){}
if(NaN){}
2、可以省略if后的{}
省略{}if只控制它下面的第一条语句
所以不建议省略
3、if...else...结构
如果 ... 否则 ...
1、语法
if(条件){
语句块1;
}else{
语句块2;
}
=============================
1、分支结构
2、循环结构
=============================
1、分支结构
1、else...if语句(多重if结构)
1、问题
根据考试成绩，给出 A-E 等级
成绩为100分，则输出A
成绩在90分以上 则输出B
成绩在80分以上 则输出C
成绩在60分以上 则输出D
否则 输出E
2、语法
if(条件1){
语句块1;
}else if(条件2){
语句块2;
}else if(条件3){
语句块3;
}... ...else{
语句块n;
以上条件都不满足时，才运行else
}
注意：else是可有可无的。
3、练习
要求用户通过 弹框 输入年，输入月，输入日，判断 该日 是这一年的第多少天?
输入年：2016
输入月：10
输入日：27
2016年10月27日是2016年的第301天
1月：31
2月：闰年 29天,(如果平年则 28天)
3月：31天
4月：30
5月：31
6月：30
7月：31
8月：31
9月：30
2、switch-case 结构
1、作用
为了简化 等值判断 的条件判断结构
2、语法
switch(变量/表达式){
case 值1:
语句块1;
break; //该语句块的结束
case 值2:
语句块2;
break; //表示结束，可以不写
... ...
default:
语句块n;
break;
}
1、执行流程
1、解析 表达式或变量中的值
2、用 解析出的数值 与 case 后的数值进行等值比较
如果 比较成功，则执行该case后的语句块
3、执行完成后，如果碰到 break则结束整个switch结构，否则继续向下执行(非判断)
3、switch-直落形式
两块或多块case之间，没有任何操作代码，表示 多块case要执行相同的操作
switch(变量/表达式){
case 值1:
case 值2:
case 值3:
语句块;
break;
}
2、循环结构
1、问题
1、在控制台上输出一句 "Hello World"
2、在控制台上输出十句 "Hello World"
3、在控制台上输出1000句 "Hello World"
4、将1000句 "Hello World" 更换成 "你好 世界!"
5、在 "你好 世界" 基础上 增加 "第1遍 你好 世界"
2、什么是循环结构
循环：一遍又一遍的重复执行相同或相似的代码
生活中的循环：
1、循环听歌：有开始，有结束
2、上学：有开始，右结束
3、长跑运动员：有开始，有结束
循环特点：
1、循环条件
规定了循环的执行次数
2、循环操作
要执行相同或相似的语句-循环中做了什么
3、循环结构-while循环
1、语法
while(条件){
//循环操作
}
流程：
1、判断 循环条件
2、如果条件为真，则执行循环操作，然后再判断条件，如果条件为真，则继续执行循环操作... ...
3、直到条件为 假时，则结束循环操作
练习1：
1、打印 1-1000之间 所有的数字
2、计算 1-1000之间 所有的数字之和
3、计算 1-1000之间 所有奇数数字之和
2、循环流程控制语句
1、continue
终止本次循环的执行，继续下次循环
ex：
打印1-1000之间，所有 非3的倍数的数字
2、break
提前退出循环结构
3、练习
要求用户从弹框中 反复录入数据，并打印输出，直到 输入 exit 为止。
条件：输入 exit 则退出
操作：
1、要求用户录入数据
2、判断是否为 exit
3、不是 exit，则打印输出
4、循环结构-do...while()循环
1、语法
do{
//循环操作
}while(条件);
流程：
1、先执行循环操作
2、判断循环条件
如果值为真，则继续执行循环操作
如果值为假，则退出循环
场合：
先执行循环体，根据循环体内的操作再决定循环条件时，使用do...while
2、while 与 do...while 的区别
1、while ：先判断，后执行，最少一次都不执行循环操作
2、do...while : 先执行，后判断，最少执行一次循环操作
3、练习
猴子吃桃问题
猴子摘下了若干个桃子，当即吃了一半，还不过瘾，又多吃了一个，第二天，又将剩下的桃子吃了一半，又多吃一个。以后每天都吃了前一天剩下的一半零一个。到第10天的时候，发现只剩下一个桃子。求：第一天共摘下多少个桃子。
1、分支结构
1、else...if结构
1、语法
if(条件1){
语句块1;
}else if(条件2){
语句块2;
}... ...else{
}
2、switch...case结构
1、场合
等值判断
2、语法
switch(变量/表达式){
case 值1:
语句块1;
break;
case 值2:
语句块2;
break;
... ...
default:
语句块n;
break;
}
3、不加break
从匹配的case块开始，一直向下执行，直到结束或碰到break位置
4、直落形式
两个case块之间没有任何内容
switch(变量){
case 1:
case 2:
case 3:
console.log("匹配到1,2,3,会执行相同的操作");
break;
}
2、循环
什么是循环：
一遍又一遍重复的执行相同或相似的代码
循环的特点：
1、循环条件
2、循环操作
1、while
1、语法
while(条件){
操作
}
2、循环的流程控制语句
1、continue
继续，终止本次循环，继续执行下次循环
2、break
破坏，结束整个循环
while(true){
switch(num){
case 1:
...
break;
case 2:
...
break;
case 3:
...
continue;
}
}
以上写法是正确的，continue 主要作用在 while循环中，而不是switch结构
switch(num){
case 1:
...
break;
case 2:
...
break;
case 3:
...
continue;
}
以上写法是错误的，continue是不能作用在switch结构中的。
2、do...while
1、语法
do{
操作
}while(条件);
执行流程：
1、先执行 循环操作
2、判断循环条件，如果条件为false，则退出循环，如果条件为true，则继续执行循环操作
2、while 循环 与 do...while循环的区别
1、while
先判断条件，后执行操作
最少一次都不执行
2、do...while
先执行操作，后判断条件
最少会执行一次循环操作
猴子吃桃问题
猴子摘下了若干个桃子，当即吃了一半，还不过瘾，又多吃了一个，第二天，又将剩下的桃子吃了一半，又多吃一个。以后每天都吃了前一天剩下的一半零一个。到第10天的时候，发现只剩下一个桃子。求：第一天共摘下多少个桃子。
假设：
第一天 共摘了 total 个桃子
每天剩下的桃子 left 个(默认是1)
天数 left 公式(推前一天)
10天 1 left(1)=total/2-1 ==> total=(left+1)*2
09天 4 total=(left+1)*2
08天 10 total=(left+1)*2; left=total;
07天 22
06天 46
05天 94
04天 190
03天 382
02天 766
01天 1534
==========================================
1、循环结构-for
1、while
在控制台上输出1-100之间所有的数字
//1、声明条件:从1开始
var i=1;
//2、循环结构-循环条件
while(i<=100){//条件
console.log(i);//3、操作
i++;//4、更新循环变量
}
2、for语法
for(表达式1;表达式2;表达式3){
//循环操作
}
表达式1：声明条件
表达式2：循环条件判断
表达式3：更新循环变量
for循环执行流程：
1、计算表达式1的值
2、计算表达式2的值(boolean)，如果为true，则执行循环体，如果为false，则退出循环
3、执行循环体
4、计算表达式3的值
5、计算表达式2... ...
3、练习
1、打印输出 1-1000之间所有的奇数
2、计算 1-1000 所有偶数的和
1*1=1
1*2=2 2*2=4
1*3=3 2*3=6 3*3=9
...
3、素数
从3 开始
3 是素数
4 不是素数
5 是素数
6 不是素数
7 是素数
8 不是素数
9 不是
10 不是
11 是
