一、入门
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。 作用: 它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。 js的使用方式: 函内js : 定义在标签上的js代码 在标签上定义不同的事件,触发js代码的执行 内部js : 在html内部定义is代码 在html的内部定义script标签对,标签对中定义js代码 外部js : 在外部定义js文件,在html内部引入 通过script标签的src属性引入外部的js代码
注意: 如果一个script如果已经用来定义js代码,就不能引入外部的js文件
--> 按钮
二、定义位置
script标签可以定义在页面中的任意位置 推荐: 1.head中,规范,便于后期维护 有可能遇到获取不到元素的情况->window.onload
2.body结束之前 在所有元素加载完毕之后执行,遇到获取不到元素的情况
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
/* window.onload 在页面中所有内容加载完成之后再触发函数的执行 */
window.onload = function(){
console.log(document.getElementById("box"));
}
</script>
</head>•
<body>
<div id="box">页面中的div</div>
</body>
</html>
三、变量
注释: 与java类似 变量: 可变的量 优点: 提高代码的复用性 简化代码 定义: 通过var关键字声明变量 1)声明的同时赋值 2)先声明后赋值 3)同时声明多个变量,同时为多个变量赋值 注意: 一个变量之声明不赋值存在默认值 undefined 局部->只看函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
//单行注释
/*多行注释*/
//1)声明的同时赋值
var i = 1;
var age;
age = 18;
console.log(i,age);
//3)
var name="zhangsan",gender = "女";
console.log(name,gender);
var x,y,z;
x=y=z=10;
console.log(x,y,z);
//var可以省略
hobby = "抽烟";
console.log(hobby);
//一个变量之声明不赋值存在默认值 undefined
var j;
console.log(j);
</script>
</body>
</html>
四、运算符
运算符 typeof typeof(数据) typeof 数据 返回数据类型小写的字符串形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> typeof</title>
</head>
<body>
<script>
console.log(typeof 123);
console.log(typeof NaN);
console.log(typeof('ab'));
console.log(typeof(""));
console.log(typeof(false));
console.log(typeof(true));
console.log(typeof(undefined));
console.log(typeof(null)); //object
function fn(){}
console.log(typeof(fn));
console.log(typeof {}); //object
</script>
</body>
</html>
五、数据类型
数据类型: 基础数据类型 数值型 Number -> 蓝色 整数与小数,整数与负数 NaN : not a number 1)直接赋值NaN 2)运算无法正确得到结果,得到一个NaN 字符串 String ->黑色 一对''|""包裹1~n个字符 布尔类型 Boolean ->蓝色 表示对于错 true|false 未定义 Undefined -> 灰色 1)直接赋值undefined 2)变量之声明不赋值默认undefined 空 Null 1)直接赋值null 2)为获取到元素,得到null 函数型 Function function 函数名(参数列表){ 函数体; } 复合数据类型 对象类型 Object -> {} 键值对的集合 { key : value, key : value, .... } 键值对之间使用,分隔 键与值之间使用 : 分隔 key : 字符串,当key的名字符合标识符的命名规范,前后的引号可以省略 value : 可以为任意数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>数据类型</title>
</head>
<body>
<script>
var i = 103;
console.log(i);
var j = NaN;
console.log(j);
console.log("a"/103); //NaN
var str1 = '101';
var str2 = "abc";
console.log(str1,str2);
var b1 = true;
var b2 = false;
console.log(b1,b2);
var u1 = undefined;
var u2;
console.log(u1,u2);
var n1 = null;
var n2 = document.getElementById("box");
console.log(n1,n2);
function fn(){
console.log("js中的函数");
}
//调用函数
fn();
//对象
var obj = {
name : "zhangsan",
age : 18,
car : null
};
console.log(obj);
console.log(obj.name);
</script>
</body>
</html>
六、类型转换
js数据类型转换: 对象,函数不参与类型转换 显示类型转换: 任意转为一下三种类型: 字符串String(数据) 数值型Number(数据) 布尔型Boolean(数据) 隐式类型转换 : 目的不是为了转换类型,但是在运算的过程中会默认进行类型转换->成为隐式类型转换 + - * / ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>类型转换</title>
</head>
<body>
<script>
//转字符串类型
console.log(String(123));
console.log(String(0));
console.log(String(-1.23));
console.log(String(NaN));
console.log(String(false));
console.log(String(true));
console.log(String(null));
console.log(String(undefined));
//隐式
console.log(1+false); //1
console.log("abc"-1); //NaN
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>类型转换</title>
</head>
<body>
<script>
//Number()
console.log(Number(false)); //0
console.log(Number(true)); //1
console.log(Number("")); //0
console.log(Number(" ")); //0
console.log(Number("123")); //123
console.log(Number("123abc")); //NaN
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
console.log("-------------------------------");
//Boolean
console.log(Boolean(0)); //false
console.log(Boolean(123)); //true
console.log(Boolean(-1.23)); //true
console.log(Boolean(NaN)); //false
console.log(Boolean("")); //false
console.log(Boolean(" ")); //true
console.log(Boolean("123abc")); //true
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
</script>
</body>
</html>
七、数组
数组 [] : 存储多个数据 存储任意类型的数据 长度可以跟随需求动态的增删 定义: 1.new Array() 创建一个空数组 2.new Array(值列表) 创建数组的同时赋值 3.[值列表] 字面量创建数组的方式->推荐使用 长度属性: length 索引: 从0开始,每次+1 操作数组 : 数组名[索引]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>数组</title>
</head>
<body>
<script>
var array1 = new Array();
console.log(array1);
var array2 = new Array(1,2,3,4,5);
console.log(array2);
console.log(array2.length);
console.log(array2[0]);
var array3 = ["haha",123,false,null,undefined];
console.log(array3);
//修改数组中的数据
array2[0] = 100;
console.log(array2);
array1[0] = false;
array1[1] = true;
array1[10] = null;
console.log(array1);
console.log(array1[5]);
//自定义属性: 当[]中的索引非0~正整数,会作为自定义属性存在
array1[-5] = -5;
array1["key"] = "value";
console.log(array1);
console.log(array1["key"]);
console.log("----------------------for-------------------");
//数组的遍历
//普通for循环 : 不能遍历自定义属性,但是可以遍历empty位置
for(var i=0;i<=array3.length-1;i++){
console.log(array3[i]);
}
for(var i=0;i<=array1.length-1;i++){
console.log(array1[i]);
}
console.log("----------------------for...in-------------------");
//for...in : 可以遍历自定义属性,但是不可以遍历empty位置
for(var index in array3){
console.log(array3[index]);
}
for(var index in array1){
console.log(array1[index]);
}
console.log("----------------------foreach-------------------");
//foreach : 不可以遍历自定义属性,但是不可以遍历empty位置
array3.forEach(function(element,index){
console.log(element,index);
});
array1.forEach(function(element,index){
console.log(element,index);
});
</script>
</body>
</html>
八、函数
函数 : 方法 封装功能 函数声明 * function 函数名(参数列表){ 函数体; } 调用: 执行函数中的代码 函数名(实参); 函数表达式 var 变量 = function 函数名(参数列表){ }; 函数表达式的函数名没有作用,一般省略,只有在使用递归的使用才有用 调用: 1.变量名(实参); 2.在函数表达式的最后添加()自调用 注意: 函数的参数可以省略var关键字定义 js中形参与实参可以不一一对应 形参默认值为undefined 函数的返回值如果没有定义,默认为undefined 在js中作用域只看函数 函数可以任意嵌套 如果定义相同的函数,后面的会覆盖前面的函数,不会报错
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>函数</title>
</head>
<body>
<scr
function fn1(name){
console.log("名字为 : "+name);
//return -1;
}
console.log(fn1("张三","李四"));
//函数表达式
var f1 = function(){
console.log("函数表达式1");
};
f1();
var f2 = function(a,b){
console.log("函数表达式2");
console.log(a,b);
return a+b;
};
f2(11,12);
//接收函数的返回值
console.log(f2(3,5));
var result = f2(5,8);
console.log(result);
//递归
var f3 = function func(i){
if(i==5){
return;
}
console.log(i);
func(++i);
};
f3(1);
//函数表达式自调用
var f4 = function(a,b){
console.log("函数表达式4");
console.log(a,b);
}(1,3);
//js中的函数可以任意嵌套
/* function fun1(){
console.log("fun1");
function fun2(){
console.log("fun2");
}
fun2();
} */
function fun1(){
console.log("fun1");
return function fun2(){
console.log("fun2");
};
}
//调用fun1,调用fun2函数
fun1()();
//1)调用fun1 2)调用fun2 3)打印fun2返回值
console.log(fun1()());
function fn1(){
console.log("第二个fn1");
}
fn1();
</script>
</body>
</html>
九、作用域
作用域提升 var i; function fn1(){ //作用域提升 //var j console.log(j); //局部变量 var j = 10; //全局变量 e = false; 作用域提升: js作用域只看函数 变量的作用域提升 : 通过var关键字声明的变量,把变量的声明提升到当前所在作用域的最上面 如果局部定义的变量没有通过var关键字声明,这个变量作为全局变量使用,要求使用之前所在的函数必须被调用过 函数的作用域提升 必须是通过函数声明的方式定义的函数存在函数的作用域提升问题 会被提升到当前所在作用域的最上方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>函数</title>
</head>
<body>
<script>
console.log(i);
//全局变量
var i = 1;
console.log("------");
fn1();
console.log("------");
function fn1(){
//作用域提升
//var j
console.log(j);
//局部变量
var j = 10;
//全局变量
e = false;
}
//fn1();
a = 11;
console.log(a);
console.log(e);
var f1 = function(){
console.log("函数表达式");
}
//块 : 不是作用域,只有语义化特点,作为整体看
{
var name = "zhangsan";
}
console.log(name);
//|| && 当左右两变的操作数出现非boolean数据 :
//1.先把第一个操作数转为boolean,进行判断
//2.判断规则:
//a) || : 左边的操作数转为boolean之后,结果为true么?如果为true,最终的结果为左边的操作数,如果不为true,最终的结果为右边的操作数
//2) && : 左边的操作数转为boolean之后,结果为true么?如果为true,最终的结果为右边的操作数,如果为false,最终的结果为左边的操作数
//console.log(null||"a"); //"a"
console.log(null&&"a"); //null
console.log(Boolean(null));
// 值传递
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)
</script>
</body>
</html>