简介
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();
895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
