简介
1.1 JavaScript 是一种具有面向对象的，解释型的程序设计语言
1.2 作用验证发往服务器端的数据，增加web互动，加强用户体验度等
1.3 JavaScript的组成；
ECMAScript 核心语法
BOM 浏览器对象模型
DOM 文档对象模型
1.4 js的基础使用方式
1.4.1行内js：js代码定义在HTML元素标签上
1.4.2内部js：通过script标签dui定义在html中
1.4.3外部js；定义在外部的一个js文件中，通过script标签对引入
一个script标签对只能用与 ：引入外部js或定义内部js代码
1.5 可以定义在html中的任意位置
1.5.1 在head中
一目了然，便于后期维护，有可能获取不到元素；
1.5.2在body结束之前
肯定能够获取到每一个元素，不便于观察
<!--引入外部js-->
<script src="js/first.js"></script>
</head>
<body>
? ? <button type="button" onclick="alert('网抑云!!!!')" ?id="btn">按钮</button>
?? ?<!--内部js-->
? ? <script>
? ? ? ? console.log("消愁~~~");
? ? ? ? console.log(document.getElementById("btn"));
? ? </script>
</body>
## ?常见调试方式
2.1 alert 弹出框：
最先执行
不推荐做调试使用
2.2 document.write（“在文档页面中写入内容”）
当页面内容加载完毕之后，再触发document.write的执行，会覆盖原页面
2.3 console 控制台输出-》推荐使用
2.3.1 console.log()
2.3.2 console.info()
2.3.3 console.error()
2.3.4 console.warn()
<button type="button" onclick="document.write('聊天止于微笑!!!')">点击按钮</button>
? ? <script>
? ? ? ? alert("普通的弹出框1");
? ? ? ? alert("普通的弹出框2");
? ? ? ? alert("普通的弹出框3");
? ? ? ? document.write("聊天止于呵呵!!!!");
? ? ? ? console.log("日志");
? ? ? ? console.info("信息");
? ? ? ? console.error("错误");
? ? ? ? console.warn("警告");
? ? </script>
变量
3.1 变量：存储一个数据
3.2 数组：存储多个数据
3.3 变量的定义
通过var关键字声明
3.3.1 声明的同时赋值：
var 变量i名 = 赋值；
3.3.2 先声明后赋值：
var变量名；
变量名 = 赋值；
3.3.3 一行中通过定义多个变量
3.4 js中的变量的类型有值来决定
3.5 js是一门弱类型语言，java是强类型语言
3.6 js变量不赋值存在默认值 undefined
3.7 变量的作用域提升
把当前的通过var定义的变量的声明提升到当前作用域的最上面
3.8 在js中变量的定义可以省略var 关键字，但是就不存在变量的作用域提升
<script>
? ? ? ? //var age;
? ? ? ? console.log("--->"+age);
? ? ? ? console.log("--->"+a);
? ? ? ? console.log("--->"+haha);
? ? ? ? //1)声明的同时赋值
? ? ? ? var name = "zhangsan";
? ? ? ? console.log(name);
? ? ? ? //2)先声明后赋值
? ? ? ? var age;
? ? ? ? console.log(age);
? ? ? ? age = 18;
? ? ? ? console.log(age);
? ? ? ? //一行中通过定义多个变量
? ? ? ? var a = 1,b = false, c = "haha";
? ? ? ? console.log(a);
? ? ? ? a = "abc";
? ? ? ? console.log(a);
? ? ? ? console.log(a,b,c);
? ? ? ? haha = "哈哈";
? ? ? ? console.log(haha);
? ? </script>
</body>
</html>
数据类型
简单数据类型
Number 数值型
? ? 整数 ?小数
? ? NaN not a number
? ? ? ? 1)直接赋值
? ? ? ? 2)通过运算无法得到一个正确的结果 NaN
String 字符串
? ? 可以通过一对'',或者一对""定义字符串
? ? 可以包含0~n个字符
? ? 如果字符串中出现特殊字符,可以通过转义字符(\)进行转义
Boolean 布尔型
? ? true
? ? false
Null ?空
? ? 1)直接赋值null
? ? 2)获取不到元素得到null
Undefined 未定义 > 灰色
? ? 1)直接赋值undefined
? ? 2)变量已声明未赋值就为undefined
Function 函数型
? ? function 函数名(参数列表){
? ? ? ? 函数体;
? ? }
复杂数据类型
Number 数值型
对象型: {}
键值对的集合
key : value
每个键值对之间使用,分隔
键与值之间使用:分隔
value可以为任意类型的值
var obj = {
? ? name:"zhangsan",
? ? age:18
};
typeof
typeof 判断数据类型
? ? typeof 数据
? ? typeof(数据)
? ? 返回数据类型的小写字符串表现形式
<script>
? ? console.log(typeof 123);?? ?//number
? ? console.log(typeof "123");?? ?//string
? ? console.log(typeof false);?? ?//boolean
? ? console.log(typeof(null)); ?//object
? ? console.log(typeof(undefined));?? ?//undefined
? ? function fn(){}?? ??? ??? ??? ?
? ? console.log(typeof(fn));?? ?//function
? ? console.log(typeof({}));?? ?//object
</script>
类型转换
?
隐式类型转换 | 自动
? ? 在进行一些其他操作运算的时候,目的不是为了发生类型转换,而在运算过程中会默认自动发生类型转换,这种类型转换成为隐式类型转换
? ? 一般为四则运算 + - * / ..
显示类型转换 | 强制
? ? 任意类型都可以转换为一下三种类型 : String ?Number ?Boolean
? ? Number(数据)
? ? String(数据)
? ? Boolean(数据)
注意: 对象类型,函数类型不参与类型转换
任意类型转Stringl
<!--String(数据)
? ? 相当于在数据的两端添加一对引号-->
<script>
? ? <!--number转字符串-->
? ? console.log("0："+(String(0)));
? ? console.log("正整数："+(String(123)));
? ? console.log("负数|负小数:"+(String(-1.5)));
? ? console.log("NaN:"+(String(NaN)));
? ? <!--boolean转字符串-->
? ? console.log("false:"+(String(false)));
? ? console.log("true:"+(String(true)));
? ? console.log("undefined:"+(String(undefined)));
? ? console.log("null:"+(String(null)));
? ? /*隐式类型转换*/
? ? console.log("1+false:"+(1+false));?? ? <!--相当于1+0--> ? ? console.log("1+'a':"+(1+'a'));?? ??? ?<!--字符串拼接-->
? ? console.log("false-'a':"+(false-'a'));?? ?<!--NaN-->
</script>
任意类型转Number
<script>
? ? <!--String转Number-->
? ? console.log(Number(''));//空串 ? ? ? ? ? ? ? ? ? -> 0
? ? console.log(Number(' '));//空格字符串 ? ? ? ? ? ? -> 0
? ? console.log(Number('123'));// 纯数字字符串 ? ? ? ? 数字
? ? console.log(Number('123abc'));//非纯数字字符串 ? ? NaN
? ? <!-- Boolean转Number-->
? ? console.log(Number(true)); ?//false ? ? ? ->0
? ? console.log(Number(false)); ?//true ? ? ? ?->1
? ? <!--null和undefined-->
? ? console.log(Number(null)); ?//Null ? ? ? ? ? ? ? ?-> 0
? ? console.log(Number(undefined)); ?//Undefined ? ? ? ? ? -> NaN
</script>
任意类型转Boolean```html
<script>
? ? <!--String转Boolean-->
? ? console.log(Boolean(''));//空串 ? ? ? ? ? ? ? ?false
? ? console.log(Boolean(' '));//空格字符串 ? ? ? ? ?true
? ? console.log(Boolean('abc'));//其他字符串 ? ? ? ?true
? ? <!--number-->
? ? console.log(Boolean(0));//0 ? ? ->false
? ? console.log(Boolean(123));//非0数字 ? ? ?->true
? ? console.log(Boolean(-0.123));//非0数字 ? ->true
? ? console.log(Boolean(NaN));//NaN ? ? ->false
? ? <!--String-->
? ? console.log(Boolean(null));//Null ? ? ? ? ? ?->false
? ? console.log(Boolean(undefined));//Undefined ? ? ? ->false
</script>
运算符
= ? 赋值
== ?是否相等 ?数据?? ??? ?
=== 是否相等 ?数据+类型?? ??? ?先比较类型后比较数据值
逻辑运算符
?&& ?两个都是真才是真,一个假就是假
? ?如果两端出现非boolean类型的操作数:
? ? ?先把第一个操作数转为boolean.如果为false,最终的结果为第一个操作数,如果为true,结果为第二个操作数
?|| ?一个为真就是真,两个都为假才是假
? ?如果两端出现非boolean类型的操作数:
? ? ?先把第一个操作数转为boolean.如果为true,最终的结果为第一个操作数.如果为false,结果为第二个操作数
?具有短路的特点
?! 非
<script>
? console.log(1=='1');//true
? console.log(1==='1');//false
? <!--逻辑运算符-->
? console.log(true&&1); ?//1
? console.log(false&&'a'); ?//false
? console.log(null&&'a'); ?//null
? console.log(true||1); ?//true
? console.log(false||'a'); ?//'a'
? console.log(null||false); ?//false
? console.log(!!false);//false
? console.log(!!!false);//true
</script>
数组
数组 : 存储多个数据
? 可变长,长度根据跟随数据的增删动态的改动
? 索引,可以根据索引操作数组中的数据
? 数组的索引可以跟随数据的改动进行动态修改
? 如果数组存在,索引位置存在,但是没有赋值,默认undefined
? js中的数组中可以存放任意类型的数据
?创建方式:
? 1.字面量的创建方式 [数据1,数据2...] -> 推荐
? 2.new Array() 空数组
? 3.new Array(值1,值2...)
?数组的长度: 数组名.length
?数组的索引 : 从0开始,每次+1
?操作数组中的数据:
? 跟随索引操作
? 数组名[索引值]
<script>
var arr1 = [1,2,3,4,5];
? console.log(arr1);
? var arr2 = new Array();
? //为空数组赋值
? arr2[0] = "哈哈";
? arr2[1] = "呵呵";
? arr2[5] = "嘻嘻";
? console.log(arr2);
? console.log(arr2[2]);
? var arr3 = new Array(false,123,"哈哈",null,undefined);
? console.log(arr3);
? //修改数组的长度
? arr3.length = ?10;
? console.log(arr3.length);
? console.log(arr3);
? //自定义属性
? arr3["abc"] = "abc属性值";
? console.log(arr3);
? console.log(arr3["abc"]);
? //数组的遍历
? //1.普通for
? for(var i=0;i<arr3.length;i++){
? ? ? console.log(arr3[i]);
? }
? //2.for in ? --> i作为索引
? for(var i in arr3){
? ? ? console.log(arr3[i]);
? }
? //foreach
? arr3.forEach(function (ele,index) {
? ? ? console.log(ele+"--->"+index);
? });
? //for.in ?与 ?foreach 不能对为赋值的索引位置进行遍历
</script>
数组常用方法
数组常用方法:
slice ? ? ? ? 截取（切片）数组，原数组不发生变化
? 1个参数 ? 起始索引,默认截取到最后
? 2个参数 ? 起始索引 ? ?结束索引 ? 结束索引位置不包含
splice ? ? ? ?剪接数组，原数组变化，可以实现前后删除效果
? 1个参数 ?起始索引 ? 实现删除与截取的效果
? 2个参数 ?起始索引 结束索引 ? 结束索引位置包含 删除|截取个数 ?实现删除与截取的效果
? 3个往上 ?起始索引 ?个数 ? 从第三个参数开始后面所有的参数为要替换的新数据 ? ?替换,截取
var array = ["aaa","bbb","ccc","ddd","eee"];
//slice()
console.log(array);
console.log(array.slice(1));//从索引位置1开始截取后面所有数据并返回
console.log(array);
console.log(array.slice(1,3));//截取返回截取后的数组,不会改变原数组
console.log(array);//原来的数组
//splice
console.log(array.splice(1,3,"嘻嘻","呵呵"));
//剪裁索引1到索引2的数据包含索引3，返回剪裁后的数组，并将"嘻嘻","呵呵"从索引1的位置开始插入到原来数组中(参数无限制)
console.log(array);//原来的数组
函数
函数，即方法。就是一段预先设置的功能代码块，可以反复调用，根据输入参数的不同，返回不同的
值。函数也是对象。
函数的定义
有三种函数定义的方式：函数声明语句、函数定义表达式、Function构造函数
函数声明语句
function 函数名([参数列表]){
}
例如：
function foo(){
console.log(1);
}
foo();
该种方式定义的函数具有声明提升的效果
foo();
function foo(){
console.log(1);
}
// 变量声明提升
console.log( a );
var a = 2;
函数定义表达式
以表达式方式定义的函数，函数的名称是可以不需要的
var 变量名 = function ([参数列表]) {
}
变量名();
例如：
var fun = function(){
console.log("Hello");
}
fun();
这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式，因为赋值语句的等号右
侧只能放表达式。
Function构造函数
Function构造函数接收任意数量的参数，但最后一个参数始终都被看成是函数体，而前面的参数则列举出了新函数的参数。
var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
return (x + y);
}
add();
注意：
1. js中的函数没有重载，同名的函数，会被后面的函数覆盖。
2. js中允许有不定数目的参数，后面介绍arguments对象
函数的参数、调用和return语句
参数
函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数，定义时的参数称为形参，调用时的参数称为实参
- 实参可以省略，那么对应形参为undefined
- 若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。
- 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
- 参数为值传递，传递副本 ；引用传递时传递地址，操作的是同一个对象。
// 调用函数时，实参可以省略，则对应形参为undefined
function add(a , b) {
console.log(a + "+" + b + "=" + (a + b));
}
add(3,4,5)//3+4=7
add(1);//1+undefined=NaN
add();//undefined+undefined=NaN
// 若函数形参同名（一般不会这么干）：在使用时以最后一个值为准
function add2(a , a) {
console.log(a);
}
add2(1,2);
// 给参数默认值
function defaultValue(a){
a = a || "a";
return a;
}
console.log(defaultValue());
function f(a){
? ??
//若参数a不为undefined或null，则取本身的值，否则给一个默认值
(a !== undefined && a !== null) ? a = a : a = 1;
return a;
}
console.log(f());
// 值传递
var num = 12;
function change(n) {
n = 30;
}
change(num);
console.log(num);
// 引用传递
var obj = {name: "tom"};
function paramter(o) {
o.name = 2;
}
paramter(obj);
console.log(obj.name);
// 给形参o赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){
o = [2, 3, 4];
o[1] = 3;
}
paramter2 (obj2);
console.log(obj2)
函数的调用
?1.常用调用方式
函数名([实参]);
存在返回值可以变量接收，若接收无返回值函数则为undefined。
2. 函数调用模式
?
function add(a,b){
return a+b;
}
var sum = add(1,2)
console.log(sum);
3. 方法调用模式
var o = {
?? ?m: function(){
?? ??? ?console.log(1);
?? ?}
};
o.m();
return
??? ?函数的执行可能会有返回值，需要使用return语句将结果返回。return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回 undefined。
作用：
1. 在没有返回值的方法中，用来结束方法。
2. 有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。
函数的作用域
函数作用域：全局 (global variable) 和 局部 (local variable)
1. 全局变量与局部变量同名问题
var box =1; // 全局变量
function display(box){
?? ?var box = 3; // 此处box与全局变量box没有关系，这里的box为传递的参数，相当于新声明的局部
变量
?? ?var b = 2; // 局部变量
?? ?console.log("box-->" + box);
}
display();
// b 不能访问
console.log("b-->" + b);
2.在函数中定义变量时，若没有加var关键字，使用之后自动变为全局变量
function fun(){
?? ?a = 100;
}
fun();
alert(a);
内置对象
Arguments 只在函数内部定义，保存了函数的实参
Array 数组对象
Date 日期对象，用来创建和获取日期
Math 数学对象
String 字符串对象，提供对字符串的一系列操作
String
? charAt(idx) 返回指定位置处的字符
? indexOf(Chr) 返回指定子字符串的位置，从左到右。找不到返回-1
? substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串
末尾。
? substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符
串末尾。
? toLowerCase() 将字符串中的字符全部转化成小写。
? toUpperCase() 将字符串中的字符全部转化成大写。
? length 属性，不是方法，返回字符串的长度。
Marh
? Math.random()?? ? ? 随机数
? Math.ceil() ?? ? ? 向上取整，大于最大整数
? Math.floor() ?? ? ? 向小取整，小于最小整数String
? Math.round() ? ? 四舍五入
Date
// 获取日期
? getFullYear() 年
? getMonth() 月
? getDate() 日
? getHours() 时
? getMinutes() 分
? getSeconds() 秒
// 设置日期
? setYear()
? setMonth()
? setDate()
? setHours()
? setMinutes()
? setSeconds()
? toLoacaleString() 转换成本地时间字符串
注意：
1. getMonth()：得到的值：0~11（1月~12月）
2. setMonth()：设置值时0~11
3. toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。
对象
??? ?对象（object）是 JavaScript 的核心概念，也是最重要的数据类型。JavaScript 的所有数据都可以被视为对象。JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象是带有属性和方法的特殊数据类型。
??? ?简单说，所谓对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。通过JavaScript我们可以创建自己的对象。 JavaScript对象满足的这种”键值对”的格式我们称为JSON格式，以
后会见得非常多，即伟大的JSON对象。
对象的创建
??? ?JS 创建自定义对象，主要通过三种方式：字面量形式创建对象、通过new Object对象创建 、通过Object对象的create方法创建对象。
规范
对象 Object
?? ?{}
?? ?键值对的集合
?? ?键 : 值
?? ?键值对之间通过 ,进行分隔
?? ?所有的键默认都是字符串 ?""
?? ?如果key符合标识符的命名规范.可以省略""
?? ?value可以为js中任意类型
字面量形式创建
var 对象名 = {};//创建一个空的对象
var 对象名 = {键:值,键2:值2,...}
? ? ? ? ? ?
var obj = {
?? ?'name' : 'hello',
?? ?age : 12,
? ? //当键名不符合命名规范时,需要使用引号包裹
?? ?"say Hello" : function () {
?? ??? ?console.log("我是对象中的方法");
?? ?},
?? ?courses : {
?? ??? ?javase : 4,
?? ??? ?javascript : 3
?? ?},
?? ?isLike : true,
?? ?members : [
?? ??? ?{name : "小红",age : 20},
?? ??? ?{name : "小绿",age : 22},
?? ??? ?{name : "小蓝",age : 27},
?? ??? ?{name : "小黄"}
?? ?]
};
通过new Object创建
var 对象名 = new Object(); // 创建一个空的对象
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);
通过Object对象的create方法创建
var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)
操作对象的属性
根据key获取vale
?? ?1)对象名.属性名
?? ?2)对象名["属性名"]
//1)对象名.属性名 简单使用多
console.log(obj);
console.log(obj.name);
console.log(obj.courses[0]);
console.log(obj.members[0].name);
//2)对象名["属性名"] 功能最强大
console.log(obj["name"]);
console.log(obj["members"][1]["name"]);
<!--当键命名不规范时,需要通过["属性名"]获取-->
console.log(obj["say Hello"]);
对象的序列化和反序列化(JSON与JS对象的关系)
??? ?序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调用JSON方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象 。
// 序列化对象，将对象转为字符串
JSON.stringify(object);
// 反序列化，将一个Json字符串转换为对象。
JSON.parse(jsonStr);
this
??? ?this是JavaScript语言的一个关键字。
??? ?它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
??? ?随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
在函数中使用this
在函数中使用this属于全局性调用，代表全局对象，通过window对象来访问。
function test () {
?? ?this.x = 1;
?? ?console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性
var x = 10;
console.log(x) // 10
function test (){
?? ?console.log(this.x) // 10
?? ?this.x = 1;
?? ?console.log(this.x) // 1
?? ?console.log(this)
}
test();
console.log(x); // 1
console.log(this);
在对象中使用this
var obj = {
?? ?name : '张三',
?? ?age : 20,
?? ?sayHello : function () {
?? ??? ?console.log(this.name)
?? ??? ?console.log(this)
?? ?}
}
obj.sayHello();
|