JavaScript
介绍
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。
作用: 验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。
JavaScript与java之间的关系:
雷锋与雷峰塔
老婆与老婆饼
周杰与周杰伦
印度与印度尼西亚…
JavaScript 的组成 :
ECMAScript 核心语法
BOM 浏览器对象模型
DOM 文档对象模型
使用方式
js的基础使用方式;
行内js : js代码定义在html元素标签上
内部js : 通过script标签对定义在html中
外部js : 定义在外部的一个js文件中,通过script标签引入
注意:
一个script标签对只能用要不引入外部js,要不定义内部js代码
位置:
可以定义在html中的任意位置
建议:
1.head中
一幕了然,便于后期维护
有可能获取不到元素
2.body结束之前
肯定能够获取到每一个元素
不便于观察
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<!--内部js-->
<!--引入外部js-->
<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>
</html>
常见的调试方式
1.alert 弹出框
最先执行
不推荐做调试使用
2.document.write(“在文档页面中写入内容”)
当页面内容加载完毕之后,再触发document.write的执行,会覆盖原页面
3.console控制台输出 -> 推荐使用
console.log()
console.info()
console.error()
console.warn()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调试方式</title>
</head>
<body>
<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>
</body>
</html>
变量
变量 : 存储一个数据
数组 : 存储多个数据
变量的定义:
通过var关键字声明
1)声明的同时赋值
var 变量名 = 赋值;
2)先声明后赋值
var 变量名;
变量名 = 赋值;
3)一行中通过定义多个变量
注意:
js中的变量的类型由值决定
js是一门弱类型语言,java是请强类型语言
js变量不赋值存在默认值 undefined
变量的作用域提升:
把当前的通过var定义的变量的声明提升到当前作用域的最上面
在js中变量的定义可以省略var关键字,但是就不存在变量的作用域提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
</head>
<body>
<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 函数名(参数列表){
函数体;
}
复杂数据类型
对象型 {}
键值对的集合
key : value
每个键值对之间使用,分隔
键与值之间使用:分隔
value可以为任意类型的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型</title>
</head>
<body>
<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>
</body>
</html>
typeof
typeof 判断数据类型
typeof 数据
typeof(数据)
返回数据类型的小写字符串表现形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类型判断</title>
</head>
<body>
<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>
</body>
</html>
类型转换
隐式类型转换 | 自动
在进行一些其他操作运算的时候,目的不是为了发生类型转换,而在运算过程中会默认自动发生类型转换,这种类型转换成为隐式类型转换
一般为四则运算 + - * / …
显示类型转换 | 强制
任意类型都可以转换为一下三种类型 : String Number Boolean
Number(数据)
String(数据)
Boolean(数据)
注意: 对象类型,函数类型不参与类型转换
String(数据)
相当于在数据的两端添加一对引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类型转换</title>
</head>
<body>
<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>
</html>
number
Number(数据)
String
‘’ 空串 -> 0
’ ’ 空格字符串 -> 0
‘123’ 纯数字字符串 数字
‘123abc’ 非纯数字字符串 NaN
Boolean
false ->0
true ->1
Null -> 0
Undefined -> NaN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类型转换</title>
</head>
<body>
<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>
</body>
</html>
boolean
Boolean()
String
‘’ false
’ ’ true
其他字符串 true
Number
0,NaN ->false
非0数字 ->true
Null ->false
Undefined ->false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类型转换</title>
</head>
<body>
<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>
</html>
赋值语句
-
= 赋值
- == 是否相等 数据
- === 是否相等 数据+类型
- 先比较类型后比较数据值
-
逻辑运算符
-
&& 两个都是真才是真,一个假就是假
-
如果两端出现非boolean类型的操作数: -
先把第一个操作数转为boolean.如果为false,最终的结果为第一个操作数,如果为true,结果为第二个操作数
-
|| 一个为真就是真,两个都为假才是假
-
如果两端出现非boolean类型的操作数: -
先把第一个操作数转为boolean.如果为true,最终的结果为第一个操作数.如果为false,结果为第二个操作
-
具有短路的特点
-
! 非
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log(1=='1');
console.log(1==='1');
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);
</script>
</body>
</html>
Array
- 数组 : 存储多个数据
- 可变长,长度根据跟随数据的增删动态的改动
- 索引,可以根据索引操作数组中的数据
- 数组的索引可以跟随数据的改动进行动态修改
- 如果数组存在,索引位置存在,但是没有赋值,默认undefined
- js中的数组中可以存放任意类型的数据
- 创建方式:
- 1.字面量的创建方式 [数据1,数据2…] -> 推荐
- 2.new Array() 空数组
- 3.new Array(值1,值2…)
- 数组的长度: 数组名.length
- 数组的索引 : 从0开始,每次+1
- 操作数组中的数据:
- 跟随索引操作
- 数组名[索引值]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<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>
</body>
</html>
method
- 数组常用方法:
- slice 截取（切片）数组，原数组不发生变化
-
1个参数 起始索引,默认截取到最后 -
splice 剪接数组，原数组变化，可以实现前后删除效果2个参数 起始索引 结束索引 结束索引位置不包含
1个参数 起始索引 实现删除与截取的效果
2个参数 起始索引 删除|截取个数 实现删除与截取的效果
3个往上 起始索引 个数 从第三个参数开始后面所有的参数为要替换的新数据 替换,截取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
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>
</body>
</html>
Function
函数 : 定义功能的实现
函数声明 :
function 函数名(参数列表){
函数体;
return 返回值;
}
函数的调用:
1)函数名(实参) -> 执行函数中的代码
2)把函数声明转为函数表达式进行自调用
转换方式: 在函数声明的开始位置添加!,~,+,-
函数表达式
var 变量名 = function 函数名(形参){
};
函数的调用:
1)变量名(实参);
2)在函数的最后直接添加()进行自调用
注意:
1.在js中所有的函数都存在返回值,没定义返回值默认undefined
2.形参与实参可以不一一对象,如果没有对应的实参,形参的默认值undefined
3.函数表达式中的函数名一般省略不写,不可用来调用函数,只有在发生递归的时候有用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script>
//函数声明
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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function</title>
</head>
<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>
</html>
作用域 : 函数
块: {} 具有语义化的特点
函数的作用域提升 : 把函数声明方式定义的函数提升到当前作用域的最上面
变量的作用域提升 : 把通过var定义的变量的变量的声明,提升到当前作用域的最上面
注意:
js中的函数可以任意嵌套
Math,Date,String
- Arguments 只在函数内部定义，保存了函数的实参
- 操作数组的方式操作arguments对象
- Array 数组对象
- Date 日期对象，用来创建和获取日期
- // 获取日期
◦ getFullYear() 年
◦ getMonth() 月
◦ getDate() 日
◦ getHours() 时
◦ getMinutes() 分
◦ getSeconds() 秒
// 设置日期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换成本地时间字符串
注意:
getMonth()：得到的值：011（1月12月）
setMonth()：设置值时0~11
toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。 - Math 数学对象
- ◦ Math.random() 随机数
◦ Math.ceil() 向上取整，大于最大整数
◦ Math.floor() 向小取整，小于最小整数String - String 字符串对象，提供对字符串的一系列操作
- ◦ charAt(idx) 返回指定位置处的字符
◦ indexOf(Chr) 返回指定子字符串的位置，从左到右。找不到返回-1
◦ substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
◦ substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
◦ toLowerCase() 将字符串中的字符全部转化成小写。
◦ toUpperCase() 将字符串中的字符全部转化成大写。
◦ length 属性，不是方法，返回字符串的长度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置对象</title>
</head>
<body>
<script>
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>
</html>
Object
/*
* 对象 Object
* {}
* 键值对的集合
* 键 : 值
* 键值对之间通过 ,进行分隔
* 所有的键默认都是字符串 “”
* 如果key符合标识符的命名规范.可以省略""
* value可以为js中任意类型
*
* 操作对象的属性:
* 根据key获取value
* 1)对象名.属性名
* 2)对象名[“属性名”]
*
* js中对象的创建方式:
* 1.字面量的创建方式 {}
* 2.new Object() 空对象
*
* JSON : JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
* 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
*
* JSON 与 JS 对象的关系
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
*
常见的json数据:
-
'{"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": "10000"}}' -
key都是通过""定义的字符串 -
value : 数值型,字符串,对象{},数组[],boolean,null - js对象与json串之间的转化问题
- 序列化 : 将对象转为可存储或者可传输的数据的形态的过程
- */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象</title>
</head>
<body>
<script>
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>
</html>
定时器
/*
* BOM : 浏览器对象模型
* BOM的核心对象是window，它表示浏览器的一个实例。
* 在全局定义的 属性与函数,相当于为window对象定义的属性与函数
*
* 定时器:
* 延迟执行定时器
* setTimeOut(回调函数,ms时间)
* 延迟指定时间,调用回调函数,指定内部代码
* 重复执行定时器
* setInterval(回调函数,ms时间)
* 每隔指定的ms数,执行一个函数的代码
*
* 停止结束定时器 : clearInterval(定时器任务编号)
* */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
<style>
#box{
height: 100px;
width: 100px;
border: 5px solid plum;
color: #ccc;
font-size: 30px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var haha = 123;
console.log(haha);
console.log(window.haha);
var box= document.getElementById("box");
/*延迟执行*/
/*setTimeout(function(){
box.innerHTML = "你好";
},5000)*/
/* 重复执行*/
var num = setInterval(fn,1000);
var i = 0;
function fn(){
i++;
box.innerHTML = i;
if(i==10){
clearInterval(num);
}
}
</script>
</body>
</html>
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
