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位。参数不能为负,参数可以先大后小。