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结束之前
肯定能够获取到每一个元素,不便于观察
<script src="js/first.js">script>
head>
<body>
<button type="button" onclick="alert('网抑云!!!!')" id="btn">按钮button>
<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>
4.1 简单数据类型:
4.1.1 Number 数值型-》 蓝色
a:整数,小数,
b:NaN not a number
b.1: 直接赋值
b.2:通过运算无法得到一个正确的结果NaN
4.1.2 String 字符串-》 黑色
a:可以通过一堆‘’,或者一对“”定义字符串
b:可以包含0~n个字符
c:如果字符串中出现特殊字符,可以通过转义字符进行转义
4.1.3 Boolean 布尔型 蓝色 true false
a: 直接赋值
b: 表达式
4.1.4Null 空-》 灰色
a:直接赋值null
b:获取不到元素得到null
4.1.5 Undefined 未定义 灰色
a:直接赋值
b:变量以声明未赋值
4.1.6 Function 函数型
function 函数名(参数列表) {
函数体:
}
4.2 复杂数据类型
4.2.1对象型{}
a:键值对的集合
b:key:value
c:每个键值对之间使用,分隔
e:键与值之间用:
f:value可以为任意类型的值
script>
/*Number*/
var num1 = 1;
var num2 = 1.2;
//num1 = NaN;
num2 = 4/'a';
console.log(num1,num2);
/*String*/
var str1 = '1';
var str2 = "你好";
var str3 = "\"";
console.log(str1,str2,str3);
//Boolean
var b1 = true;
console.log(b1);
//Null
var n1 = null;
console.log(n1);
/*undefined*/
var u1;
console.log(u1);
/*function*/
function fn(){
console.log("函数");
}
fn();
//Object
var obj = {
name:"zhangsan",
age:18
};
console.log(obj);
script>
5.1 typeof 判断数据类型
a:typeof 数据
b:typeof(数据)
返回数据类型的小写字符串表现形式
<script>
console.log(typeof 123);
console.log(typeof "123");
console.log(typeof false);
console.log(typeof(null)); //object
console.log(typeof(undefined));
function fn(){}
console.log(typeof(fn));
console.log(typeof({}));
script>
6.1 隐式类型装换 自动
在进行一些其他操作运算的时候,目的不是为了发生类型转换,而在运算过程中会默认自动发生类型转换
一般为四则运算 ±*/
6.2 显式类型转换|强制
6.1.1 任意类型都可以转换为一下三种类型:String Number Boolean
a:Number(数据);
b:String(数据) 相当于在数据的两端添加一对引号;
c:Boolean(数据);
!!!!对象类型,函数类型不参与类型转换
<script>
console.log(String(0));
console.log(String(123));
console.log(String(-1.5));
console.log(String(NaN));
console.log(String(false));
console.log(String(true));
console.log(String(undefined));
console.log(String(null));
/*隐式类型转换*/
console.log(1+false);
console.log(1+'a');
console.log(false-'a');
script>
body>
6.1.2 Number
a:String
‘’ 空串 -0
‘ ’空格字符串 -0
‘123’纯数字字符串 数字
‘123abc’ 非纯数字字符串 NaN
b:Boolean
false -0
true -1
null -0
Undefined -NaN
<script>
console.log(Number(''));
console.log(Number(' '));
console.log(Number('123'));
console.log(Number('123abc'));
console.log(Number(true)); //1
console.log(Number(false)); //0
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
script>
6.1.3 Boolean
a:String
‘’ false
‘ ’ true
其他字符串 true
b:Number
0,NaN -false
非0数字 -true
Null -false
Undefined -false
<script>
console.log(Boolean(''));
console.log(Boolean(' '));
console.log(Boolean('abc'));
console.log(Boolean(0));
console.log(Boolean(123));
console.log(Boolean(-0.123));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
script>
body>
7.1 = 赋值
7.2 ==是否相等 数据
7.3 ===是否相等 数据+类型 先比较类型后比较数据值
7.4 逻辑运算符
7.4.1 && a:两个都是真才是真,一个为假就是假
b:如果两端出现非boolean类型的操作数;先把第一个操作数转为boolean,如果为false,最终的结果为第一个操作数;如果为true,结果为第二个操作数
7.4.2 || a:一个为真就是真,两个都为假才是假
b:先把第一个操作数转为boolean,如果为true,最终的结果为第一个操作数,如果为false,结果为第二个操作数;
7.4.3 ! 非
<script>
console.log(Boolean(''));
console.log(Boolean(' '));
console.log(Boolean('abc'));
console.log(Boolean(0));
console.log(Boolean(123));
console.log(Boolean(-0.123));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
script>
body>
8.1 数组:存储多个数据
8.2 可变长 ,长度根据跟随数据的增删动态的改动
8.3 索引,可以根据索引操作数组中的数据
8.4 数组的索引可以跟随数据的改动进行动态修改
8.5 如果数组存在,索引位置存在,但是没有赋值,默认undefined
8.6 js中的数组中可以存放任意类型的数据
8.7创建方式:
8.7.1 字面量的创建方式【数据1,数据2。。。】
8.7.2 new Array() 空数组
8.7.3 new Array(值1,值2.。。)
8.8 数组的长度:数组名.length
8.9 操作数组汇总的数据:
8.9.1 跟随索引操作
8.9.2 数组名【索引值】
8.10 数组的遍历
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 i作为索引
for(var i in arr3){
console.log(arr3[i]);
}
//foreach
arr3.forEach(function (ele,index) {
console.log(ele+"--->"+index);
});
//for.in 与 foreach 不能对为赋值的索引位置进行遍历
script>
body>
html>
9.1 slice 截取数组,原数组不发生变化
9.1.1 1个参数 起始索引,默认截取到最后
9.1.2 2个参数 起始索引 结束索引 结束索引位置不包含
9.2 splice 剪接数组,原数组变化,可以实现前后删除效果
9.2.1 1个参数 起始索引 实现删除与截取的效果
9.2.2 2个参数 起始索引 删除|截取个数 实现删除与截取的效果
9.2.3 3个往上 起始索引 个数 从第三个参数开始后面所有的参数为 要替换的新数据,替换,截取
var array = ["aaa","bbb","ccc","ddd","eee"];
//slice()
console.log(array);
console.log(array.slice(1));
console.log(array);
console.log(array.slice(1,3));
console.log(array);
//splice
console.log(array.splice(1,3,"嘻嘻","呵呵"));
console.log(array);
script>
10.1:定义功能的实现
10.2::函数声明:
function 函数名(参数列表) {
函数体:
return 返回值;
}
10.3 函数的调用:
a:函数名(实参)-》执行函数中的代码
b:把函数声明转为函数表达式进行自调用
转换方式:在函数声明的开始位置添加!,~,+,-
10.4 函数表达式
var 变量名 = function 函数名(形参) {
};
注意:a:在js中所有的函数都存在返回值,没定义返回值默认undefined
b:形参与实参可以不一一对象,如果没有对应的实参,形参的默认值undefined
c:函数表达式中的函数名一般省略不写,不可用来调用函数,只有在发生递归的时候有用
//函数声明
function fn1(name){
console.log(name);
//return true;
}
//调用
fn1(123,456);
console.log(fn1("zhangsan"));
!function fn2(){
console.log("函数声明1");
}();
~function fn3(){
console.log("函数声明2");
}();
-function fn4(){
console.log("函数声明3");
}();
/*函数表达式*/
var f1 = function func(i){
i++;
console.log("函数表达式1");
if(i==5){
return;
}
func(i);
};
//根据变量名调用
f1(1);
//自调用
var f2 = function (){
console.log("函数表达式2");
}();
/*匿名函数*/
(function(){
console.log("匿名函数");
})();
script>
10.5 作用域:函数
块:{}具有语义化的特点
10.5.1 函数的作用域提升:把函数声明方式定义的函数提升到当前作用域的最上面
10.5.2 变量的作用域提升:把通过var定义的变量的变量的声明,提升到当前作用域的最上面
js中的函数可以任意嵌套
<body>
<script>
func();
// 若函数形参同名(一般不会这么干):在使用时以最后一个值为准
function add2(a , a) {
console.log(a);
}
add2(1,2);
// 值传递
var num = 12;
function change(n) {
n = 30;
}
change(num);
console.log(num); //12
// 引用传递
var obj = {name: "tom"};
function paramter(o) {
o.name = 2;
}
paramter(obj);
console.log(obj.name); //2
// 给形参o赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){
o = [2, 3, 4];
o[1] = 3;
}
paramter2 (obj2);
console.log(obj2); //[1,2,3]
//间接调用
var obj = {
name : "zhangsan",
work : function(){
console.log("每天都在写bug,找bug,解决bug");
}
};
console.log(obj.name);
console.log(obj.work);
//调用
obj.work();
var ff= obj.work;
ff();
//块
{
var i = 1;
}
console.log(i);
//函数
function func(){
/*变量的作用域提升
var haha;
*/
console.log("----->"+haha);
//局部
var haha = "haha";
}
func();
//console.log(haha);
//函数的嵌套
function f1(){
console.log("-----------f1---------");
return function f2(){
console.log("-----------f2---------");
return "我是f2的返回值";
};
}
var b = f1();
b();
f1()();
console.log(f1()());
script>
body>
11.1 Arguments 旨在函数内部定义,保存了函数的实参
a:操作数组的方式操作arguments对象
11.2 Array 数组对象
11.3 Date 日期对象,用来创建和获取日期
a:getFullYear() 年 setYear()
b:getMonth() 月 setMonth() (0~11)
c:getDate()日 setDate()
d:getHours() 时 setHours()
e:getMinutes () 分 setMinutes()
f:getSeconds() 秒 setSeconds()
g:toLocaleString() 转换成本地时间字符串
11.4 Math 数学对象
a:Math.random() 随机数
b:Math.ceil() 向上取整,大于最大整数
c:Math.floor() 向小取整,小于最小整数String
11.5 String 字符串对象,提供对字符串的一系列操作
a:charAt(idx) 返回指定位置出的字符
b:indexOf(Chr) 返回指定子字符串的位置,从左到右,找不到返回-1
c:substr(m,n) 返回给定字符串中从m位置开始,取n个字符,如果参数n省略,则意味着取到字符串末尾
d:substring(m,n) 返回给定字符串中从m位置开始,到n位置结束,如果参数n省略,则意味着取到字符串末尾。
e:toLowerCase() 将字符串中的字符全部转化成小写。
f: toUpperCase() 将字符串中的字符全部转化成大写。
g: length 属性,不是方法,返回字符串的长度
* */
function fn(x,y,z){
console.log(x,y,z);
console.log(arguments);
console.log(arguments[1]);
for(var i = 0;i<=arguments.length-1;i++){
console.log(arguments[i]);
}
}
fn(1,2,3,4,5);
fn(false,true,false,true);
//String
console.log("abc".toUpperCase());
//Math
console.log(Math.round(Math.random()*(10-5)+5));
//Date
var date = new Date();
date.setFullYear(2008);
console.log(date);
console.log(date.toLocaleString());
console.log(date.toDateString());
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getDay()); /*星期几 */
script>
body>
12.1 对象 Object
a:{}
b:键值对的集合
c:键:值
d:简直对之间通过,进行分隔
e:所有的键默认都是字符串“”
f:如果key符合标识符的命名规范,可以省略“”
g:value可以为js中任意类型
12.2 操作对象的属性
a:根据key获取value
a.1对象名.属性名
a.2对象名【“属性名”】
12.3 js中对象的创建方式:
a:字面上的创建放式{}
b:new Object() 空对象
13.1 json:json(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于及其解析和生成,并有效提高网络传输效率
13.2 JSON与JS对象的关系
JSON是JS对象的字符串表示法,他使用文本表示一个js对象的信息,本质是一个字符串。
13.3 常见的json数据:
* ‘{“name”: “John Doe”, “age”: 18, “address”: {“country” : “china”, “zip-code”: “10000”}}’
* key都是通过“”定义的字符串
* value:数值型,字符串,对象{},数组【】,boolean,null
* js对象与json串之间的转化问题
* 序列化:将对象转为可存贮或者可传输的数据的形态的过程
var laopei = {
name : "laopei",
gender : "男",
son : [
{name : "小小裴一号",gender : "男"},
{name : "小小裴二号",gender : "男"}
],
fn : function(){
console.log(123);
},
"wife haha" : true,
car : null
};
//1)对象名.属性名 简单使用多
console.log(laopei);
console.log(laopei.name);
console.log(laopei.son[0]);
console.log(laopei.son[0].name);
//2)对象名["属性名"] 功能最强大
console.log(laopei["name"]);
console.log(laopei["son"][1]["name"]);
console.log(laopei["wife haha"]);
var obj2 = new Object();
obj2.name = "xixi";
obj2["age"] = 18;
console.log(obj2);
var obj3 = Object.create(null);
console.log(obj3);
/*jsON串转为js对象*/
var jsonStr = '{"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": []}}';
//JSON解析器 : 通过解析json数据效率比其他方式高
var jsObj = JSON.parse(jsonStr);
console.log(jsObj);
/*js对象转为JSON串*/
console.log(JSON.stringify(obj2));
console.log(JSON.stringify(laopei));
script>
body>