JaveScript初级

JavaScript简介

前端三层

前端三层：
html 结构层
css 样式层
JavaScript 行为层

JavaScript作用

数据验证

Web游戏

读写html元素

与浏览器窗口及其内容的交互效果

网页特效（图片轮播）

Node.js服务端编程

JavaScript发展简史

ECMAScript发展

ECMAScript 6 是2015发布

JavaScript 由 ECMAscript, DOM, BOM 三者组成

Hello world

写一个alert("hello world");

js需要写在script标签对儿里面，这个标签可以在html的任意位置，甚至是html对的外面，但我们习惯写在head里面。（实例验证） 。CSS只能写在head里面。

注释：//单行， / / 块级注释

Alert 语句

alert("");

语法：

  1. alert()是一个函数，参数是文本
    如果语法错误，浏览器报SyntaxError
  2. 一个语句结束加分号；
  3. 代码执行是从上到下执行

prompt 语句

可以让用户输入内容

prompt("你今年多大？", "18"); //第2个参数可以写空 ""

console控制台

F12可以打开console

console里可以直接输入 js 代码，他会立即 执行，如1+1，alert(..)

console.log() 输出

字面量

字面量literal是一种固定值的表示方法，也叫常量，如数字，字符串，数组，json变量。

数字字面量

直接写，不用带符号。如alert(123)
数字分为 整数，浮点数，特殊值

整数字面量：

  1. 十进制 直接输入
  2. 八进制 前缀 0、0O、0o, console.log(0110)
  3. 十六进制 前缀 0x， console.log(0x2b);

浮点数 字面量：
写法 3.14
0.618
.618
-.618
0.00000056 = 5.6e-7
42356.89 = 4.235689e4

特殊值：
Infinity (当计算结果超出计算机临界点的时候，就会输出正无穷或负无穷)
NaN：Not a Number
console.log(0/0);
console.log(12/0) 会输出Inifinity

字符串 字面量

字符串 "..." 或 '...'
换行 \n

变量(variables)

存储数据的容器，只能放入一种数据，放入新数据，旧数据就会被覆盖。写例子1.体验变量 var abc=12; 例子2，abc="haha" 数据类型可以发生变化

变量的声明/定义

关键字 var

标识符命名规范：

  • 首字符必须是字母 _ $
  • 区分大小写
  • 不能是关键字和保留字

变量的赋值

声明后系统会默认赋值undefined

等号赋值，左变右不变，写例子说明

→小技巧：在编辑器里复制文档路径，在浏览器中就可以粘贴打开了。

可以同时声明多个变量 var a,b,c;
工作中声明 + 赋值一起：var d=3;

变量声明的提升

变量提升hoisting表示我们可以先引用，后定义

注意：变量提升只提升定义 ，不提升赋值。

写例子说明。

数据类型

简单数据类型

Number

string

undefined

boolean

null

复杂数据类型

object

数据类型检测

typeof()
写例子说明
不写括号也可以：typeof "nihao"

变量的数据类型

变量的数据类型由它存储的数据类型来决定。
写例子说明。

数据类型的转换

数字转字符串，使用+号
写例子说明,1+2 或 1+“2” 或 1+“”

字符串转数字

Number() 用于任何数据类型
parseInt() 字符串转整数
parseFloat() 字符串转浮点数
写例子说明

parseInt()

  • 会取整，舍去小数
  • 第2个参数为进制如parceInt("010",8)
  • 如有掺杂非数字，他会取前进是数字的部分，如无则返回NaN

parceFloat()

  • 如掺杂其他，他会识别第1个小数点后面的数字
  • 也可以转成整数

小案例：看用户输入的是什么类型的数据
prompt("你今年几岁？")接受变量计算他离100岁还有几年。

小注意：parceInt(021,8) 输出15，021先转10进制，再变成字符串，再转8进制

运算符

数学运算符

Math对象

先学4个：

  • Math.random() 出0-1随机数
  • Math.pow(num, power)
  • Math.sqrt(num)
  • Math.PI

此处有从开始到目前的复习课，在费曼过1次之后看，进行复习。初级课程(2)里的第1课复习 和第2课 作业

’+ - * / %

Operators 运算符是发起运算的最简单形式

注意1. 如果是数字与纯数字字符串，或纯数字字符串之间进行运算，除+外，其他运算符会自动将字符串转成数字，这过程叫做隐式转换。案例

注意2. 其他类型的数据也会发生隐式转换，案例

转换成0：空字符串、null、false
转成1：true
转NaN: undefiened, 非空非纯数字字符串

NaN参与的运算都返回NaN（不重要
Infinity参与的运算（不重要

比较运算符

< >= <= == != === !==
返回bool，===不仅值相等，数据类型也要相同
注意：其他数据会隐式转换成数字进行比较，转换规则同上。
注意：null==0返回false，但null>=0或null<=0返回true. 可以理解为null是无限接近0的一个数

字符串和字符串进行比较

使用Unicode字符编码顺序
从小到大：0-9 A-Z a-z
比较时会逐字符比较，如"12"<"2"

NaN参与的比较

NaN参与的比较都返回false
除了：NaN != NaN 返回true

Inifinity的比较

Infinity的比较
Infinity == Infinity 返回true

特殊情况：3>2>1 等于 true > 1 返回false

小知识：清空控制台 ctrl + L, 换行 shift + enter
ctrl + ↑ 重复之前的代码

逻辑运算符

&& || ！

非正常逻辑运算：其他类型的数据参与逻辑运算，将其他的数据隐式转换成bool类型，计算结果不一定输出bool值。
隐式转换为false的值：null, 0, NaN, "", undefined. 其他一律(非0数字，非空字符串)转化为true.

非bool数据的逻辑运算：
35&&null: 如果a能转换为false,则返回a；否则返回b
35||null: 如果a能转换为true,则返回a; 否则返回b

花式写法：短路语法

&& 相当于串联电路,在哪里堵住(false)就输出哪里。
|| 相当于并联电路,哪边先通就输出哪边。

逻辑运算顺序： 非，与，或

赋值运算符

= += -= *= /= %= ++ --

a++ 和 ++a 的区别：
在一个算式中，++a会先加再算，a++会用a来算。
如console.log(a++) 和 console.log(++a)

条件分支语句

  1. if语句

案例：输入1个数字，alert判断是否及格

如果是单行语句可以省略大括号

可以嵌套

  1. 三元运算符

拓展：逻辑运算符也有选择功能
var year = parseFloat(prompt(请输入工作年限)) || 0

  1. Switch 语句
  1. 循环语句

for 循环

案例：
穷举 - 用户输入1个数，输出所有约数
水仙花数 - 列举三位数的水仙花数

累加器和累乘器
案例
水仙花数统计数量
累乘器 求1个数的阶乘

do while循环

while 循环

break, continue

案例：
判断1个数是不是质数
输出2-10000之间的质数

continue 可以跳出当前循环，如果想跳出外层循环，可以加标签实现continue tag1;

函数

先定义后使用，案例
funtion fun(){ }

参数

function sum(a,b){ } //a,b 是形参
sum(1,2) //1,2是实参

arguments: 实际参数组成和一个类数组对象

函数的形参和实参个数可以不同：
当形参少于实参时，多余的实参不参与计算，如sum(1,2,3,4); //只计算1，2的和。
当形参多于实参时，多出来的形参会默认为undefined

返回值

return 返回值

模块化编程：
案例：输出0-10000的完美数，一个约数和等于本身的数。

函数递归

函数调用自己本身
案例：斐波那契数列

函数表达式

将匿名函数或有名字的函数矮化成表达式赋值给一个变量，通过变量名() 的方法调用函数。
不能用函数名调用，但在函数内部可以用函数名调用。一般不建议用这种方式定义函数

var fun=function(){
console.log(1);};//要加分号
fun();

函数的数据类型

可以用typeof来看，输出function
function是一种复杂数据类型，也叫引用类型

简单数据类型 存贮值
复杂数据类型 存贮地址
另外，可以直接在外面给函数定义属性

var a =function(){
console.log(1);};
var b=a;
b.haha=2;
console.log(a.haha);

函数声明提升

变量声明提升只提升定义，不提升赋值。
函数声明提升指针，总能调用。但函数表达式定义不会提升函数，但会进行变量声明提升。
特殊情况解释：函数在定义的时候，进行强制性的声明提升，定义过程被提到代码最前面了，后面再遇到定义的代码会忽略。

var fun=function(){
console.log(2);};
function fun(){
console.log(1);}
fun(); //输出2

作用域

函数内定义的变量不能从函数外取得，变量仅在函数内部有定义，因为函数管变量的作用域/定义域。
JS的定义域：没有块级作用域{}，唯一关注作用域的结构就是函数

作用域链

遇到变量时，JS会从所在作用域依次向外层查找。如果有重名的标识符，发生“遮蔽效应”

在函数内部或外部定义变量时如果没有写var关键字，会自动在全局进行了变量的声明，造成全局污染。

全局变量

全局变量尽量少定义，它独特作用：传递，累加

函数的作用域

函数作用域是他所处的环境中，全局或另函数内部

闭包(Closure)

自由变量

在该函数作用域里面出现了不是在此作用域里定义的变量，就是对此作用域的自由变量

自由变量取值会到创建该函数的那个作用域中取值，如果没有，则往上级作用域链去找。

闭包是引用了自由变量的函数

数组Array

概述

arr.length 返回长度，也可以set
也可以通过arr[10]=1来拉长数组， 中间缺的会补上undefiened

数组是引用类型

数组字面量：[] 中括号表示内部存放的是一个数组
数组内可以存各种数据类型，甚至是数组
var a = [1,"haha",true,function fun(){},[3,4,5]];
工作中存同一种数组的情况居多。

遍历

使用for循环遍历

方法

首尾操作

push(); 推进队尾，返回新长度
pop(); 移出队尾元素并返回
shift(); 队首删除元素并返回
unshift(); 队首推入元素，返回新长度

合并和拆分

concat() 连接两个数组并返回一个新数组
arr1.concat(arr2, arr3, [12,13],14);

Slice() 提取片段作为新数组返回
arr.slice(start,end); //不包含end项
不写end表示从start截到最末
如果是负数，则从最后往前截，不包含结束位
参数为负，不写end，表示从start位置截取到最后

删除 插入 替换

splice() 用于插入 删除 或 替换数组元素

arr.splice(index, howmany, element1, ...) //前两参数必填

删除：只写前2个参数，从哪开始，删几个，对原数组操作，不需要接收返回值

插入：写三个参数，第二个参数必须为0
替换：写三个或以上参数，先删除，再插入

倒序和排序

倒序：arr.reverse() 对原数组操作

排序：arr.sort()
不传参数会把元素转成字符串再按照字符编码顺序排序。
sort的参数为比较函数，规定必须有3种返回值（大于0，小于0 和 等于0）

arr.sort(function(a,b){ //升序排序
if(a<b)
return -1;
else if(a>b)
return 1; //返回1表示要换位
else
return 0;})

数组转字符串

arr.join() 不传参数默认用逗号连接

字符串方法

str.length 返回字符串长度

str.charAt(0) 返回指定位置的字符

str.concat(string1,...) 连接字符串返回，原字符串不变

str.indexOf("a",5); 返回从某位置开始找的字符的位置，没有返回-1

str.lastIndexOf(“a”) 从最后往前找

str.slice(4,8) 截取中间一段，返回新字符串，

str.split("f"); 将字符串按f分隔，返回新数组

str.toLowerCase() str.toUpperCase()

str.substr(start, length); 截取从开始位置，长度为length的一段字符串

str.substring(start, end) 截取位置之间的字符串，不包含end位。参数不能为负，参数可以先大后小。