JavaScript
JS
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。
使用方式:
JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。
行内JS : 写在标签内部的js代码
内部JS : 定义在script标签内部的js代码
外部JS : 单独的js文件，在HTML中通过script标签引入
js的定义位置:
可以定义在html页面中的任意位置
推荐使用在:
head中 : 便于后期维护,一目了然,可能获取不到元素,因为从上到下默认加载
body结束之前 : 肯定能够获取元素
<script>
console.log("拿来吧你!!!");
/*当页面中所有的内容全部加载完成之后触发函数的执行*/
window.onload = function(){
console.log(document.getElementById("box"));
}
</script>
<!--引入外部js文件-->
<script src="js/first.js"></script>
</head>
<body>
<button type="button" οnclick="alert('醒醒吧你!!!!')">按钮</button>
<div id="box">box</div>
</body>
测试js中的调试:
1.alert() 弹出框
2.document.write("你好啊,中国队必胜!!!");
内部可以识别html语法结构
当原页面中的内容加载完毕之后触发document.write,会覆盖原页面
3. console.log() 控制台输出打印 -> 推荐
console.info()
console.error()
console.warn()
变量: 存储单个数据|表达式
js是一个弱类型语言
java是强类型语言
定义:
声明的同时赋值
var 变量名 = 赋值;
先声明后赋值
var 变量名;
变量名 = 赋值;
注意:
js中变量的数据类型有值决定
js中的变量不赋值存在默认值 undefined未定义
变量的作用域提升: 只提升变量的声明,不提升变量的赋值
变量的定义可以省略var的声明,不能发生作用域的提升
<script>
/*
* var i = undefined;
* var username = undefined;
* */
console.log(username);
//console.log(w);
//声明的同时赋值
var i = 1;
i = "";
//先声明后赋值
var username;
username = "zhangsan";
//同时定义多个变量
var x=1,y=2,z=false;
console.log(x,y,z);
var b;
console.log(b);
w = 1;
console.log("w = " + w);
</script>
数据类型:
简单|基础数据类型
1.String 字符串 ->黑色
一对''|""表示字符串
包含0~n个字符
通过转义字符进行转义
2.Number 数值型
整数 小数
NaN not a number 不是一个数字
1)直接赋值NaN
2)当运算无法得到一个正确结果
3.Boolean 布尔型
true | false
常常用于对条件判定结果类型
4.Undefined 未定义
1) 直接赋值undefined
2) 声明变量未赋值默认undefined
5.Null 空
1) 直接赋值null
2) 获取不到元素
Null 与 Undefined之间的区别:
1.undefined : 存在,但是没有值
2.null : 元素不存在
6.Function 函数型
function 函数名(参数列表){
函数体;
}
通过函数的调用使用
复杂|复合数据类型
对象类型
{} 表示对象
有键值对组合而成
{
key:value,
key:value,
键值对
}
两个键值对之间使用,分隔,最后一个键值对的后面不加,
KEY与VALUE之间使用:分隔
key : 如果符合命名规范可以直接定义,不符合命名规范.需要前后加引号
value : 可以为任意类型
<script>
var str1 = "abc";
var str2 = 'it\'s';
var str3 = '123';
console.log(str1,str2,str3);
var num1 = 123;
var num2 = NaN;
var num3 = 5/'A';
var num4 = 1.234;
console.log(num1,num2,num3,num4);
var n1 = null;
//函数
function fun(){
console.log("这是一个函数");
}
//fun();
//对象
var obj = {}; /*空对象*/
var obj2 = {
name : 'zhangsan',
age : 18,
"girl friend" : null,
son : {
name : 'haha'
}
};
console.log(obj);
console.log(obj2);
console.log(obj2.name);
</script>
typeof : 运算符 帮助判断数据的类型
返回一个字符串形式的小写的数据类型
Number -> number
String -> string
Null -> object
Undefined -> undefined
Boolean -> boolean
Function -> function
Object -> object
语法:
1.typeof(数据)
2.typeof 数据
<script>
console.log( typeof(123) );
console.log( typeof("123") );
console.log( typeof(typeof("123")));
console.log( typeof(null));
console.log( typeof(undefined));
console.log( typeof(false));
console.log( typeof(function(){}));
console.log( typeof({}));
console.log( typeof 123);
</script>
数据类型转换
对象类型(函数)不参与类型转换
分类:
显示类型转换|强制
任意类型(String,Number,Boolean,Null,Undefined)都可以转为以下三种类型 :
String(数据)
Boolean(数据)
String :
空串->false
其他包含字符的字符串->true
Number
0,NaN -> false
其他 -> true
Null
false
Undefined
false
Number(数据)
String
空串,与空格字符串 -> 0
纯数字字符串 -> 数字
非纯数字字符串 -> NaN
Bollean
true -> 1
false-> 0
Null -> 0
Undefined -> NaN
隐式类型转换|自动
执行某些行为操作时候,目的不是为了转型,但是在执行的时候回默认自动转型->隐式类型转换
+ - * / ...
String(数据) 把参数数据转为字符串类型
在数据的前后+一对引号
//隐式类型转换
console.log('a'-1); //NaN
console.log(false-1); //-1
console.log(true+false); //1
逻辑运算符
java中要求逻辑运算符左右两边的表达式必须结果为boolean类型
js中,两边的表达式可以为任意类型
&& : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果就是第一个操作数,如果为true,最终的结果为第二个操作数
|| : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果为第二个操作数,如果为true,就为第一个操作数
数组[]： 存储多个数据
长度可变，可以存储任意类型的数据
创建方式：
1.new Array()
创建空数组
2.new Array(值1,值2,值3...);
创建数组并赋值
3.[值1,值2,值3...] -> 推荐
数组的遍历:
普通for
for in
foreach
数组的常用方法:
-->
var arr = ["red","green","yellow","pink","black"];
//for
for(var i = 0;i<=arr.length-1;i++){
console.log(arr[i]);
}
//for .. in
for(var i in arr){
console.log(arr[i]);
}
//foreach
arr.forEach(function (value,index) {
console.log(value+"--->"+index)
});
js中的函数 : 封装功能
1.函数声明
function 函数名(参数列表){
函数体;
}
调用: 执行函中的代码
1.函数名(实参);
2.转为函数表达式然后通过最后添加(实参)的方式调用
在函数声明的前面添加+|-|~|!或者前后添加一对()
2.函数表达式
var 变量名 = function (参数列表){
函数体;
};
函数表达式中的函数名作用只有一个,在递归使用的时候有用,否则默认一般省略
调用:
1.变量名(实参);
2.函数表达式后面直接添加(实参),在当前直接调用
注意:
1.参数个数可以不同,函数没有传递实参,默认undefined
2.函数都存在返回值,没有显示定义return关键字返回结果,默认返回值为undefined
<script>
/*函数声明*/
function fun1(name){
console.log("我的名字是"+name);
return name+"haha";
}
//输出函数的返回值
console.log(fun1("马龙","张继科"));
//函数表达式
var f1 = function fun2(i){
console.log("我是函数表达式1-->"+i);
if(i==5){
return;
}
fun2(++i);
};
//函数表达式调用1
f1(1);
//函数表达式调用2
var f2 = function(x){
console.log("函数表达式2");
}(1);
/*函数声明的其他调用方式*/
~function fun2(){
console.log("函数声明2");
}();
+function fun3(){
console.log("函数声明3");
}();
-function fun4(){
console.log("函数声明4");
}();
!function fun5(){
console.log("函数声明5");
}();
(function fun6(){
console.log("函数声明6");
})();
</script>
js是值传递 | 引用传递（地址值传递）
js中的作用域 ： 函数为单位
js中的函数可以任意嵌套
函数存在作用域的提升: 函数声明的方式会发生作用域的提升
变量的作用域提升: 把当前的变量的声明提升到当前作用域的最上面
当在函数中省略var关键字定义的变量,成为全局变量,但是事前要求这个函数至少被调用过一次
this绑定对象
this的决策树:
1.this所在的函数,是否是通过new关键字调用的,如果是this,绑定new的对象
2.this所在的函数是否是通过对象.函数名()调用的,如果是函数中的this绑定.前面调用的对象
3.没有显示的通过某一个对象调用,默认this指代全局window对象,默认通过window调用,window.可以省略
注意:
定义在全局位置的变量和函数,默认为window对象的属性和功能,调用的时候window.可以省略
<script>
function fn(){
console.log(123);
}
fn();
window.fn();
/*全局变量*/
var str = "希望疫情立即结束!!!";
console.log(str);
console.log(window.str);
//自定义的模板
function Person(name,age){
this.name = name;
this.age = age;
}
var person = new Person("zhangsan",18);
console.log(person);
var a = 1;
var obj = {
a : 10,
fn : function(b){
console.log(this.a+"---->"+b);
}
};
obj.fn(100); //10-->100
var f = obj.fn;
f(); //1-->undefined
var obj2 = {
a : 12
};
/*修改this的引用指向*/
obj.fn.call(obj2,100); //调用的方法多个实参作为call方法的第二个参数开始
obj.fn.apply(obj2,[1000]); //调用的方法多个实参作为apply方法的第二个参数,以数组为单位
</script>
内置对象：
Arguments 只在函数内部定义，保存了函数的实参
Array 数组对象
Date 日期对象，用来创建和获取日期
Math 数学对象
String 字符串对象，提供对字符串的一系列操作
<script>
function func(x,y,z){
console.log(x,y,z);
console.log(arguments);
for(var i in arguments){
console.log(arguments[i]);
}
}
func(1,2,3);
//字符串对象
var str = "abcb";
console.log(str.length);
console.log(str.indexOf('b'));
/*随机数*/
console.log(Math.random() );
/*日期*/
var date = new Date();
date.setFullYear(2028);
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDay());
</script>