JavaScript
- JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。
更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等
-
组成
- ECMAScript–>(基础语法)
- DOM–>(文档对象模型)
- BOM–>(浏览器对象模型)
-
JS分类：
? 行内JS–>写在标签内部中的js代码
<button type="button" onclick="alert('醒醒吧你!!!!')">按钮</button>
? 内部JS–>定义在script标签内部的代码
<script type="text/javascript" charset="utf-8">
alert('this is inner js code')
</script>
? 外部JS–>写在js文件中，在html中通过script引入
hello.js:
alert("外部js")
html文件中:
<!-- 在需要使用js的html页面中引入 -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>
js可以定义在html文档中的任意位置，
? 推荐在head中：便于后期维护
? body后：便于整个代码的运行，让元素都加载完成
对js进行调试
- alert()：弹出框
- document.write()：重写原窗口
- 括号中可以识别html语法结构
- 当原页面中的内容加载完毕之后触发document.write,会覆盖原页面
- console：打印在控制台
- console.log
- console.info
- console.warn
- console.error
代码示例：
<script>
alert("弹出框");
document.write("document");
document.write("<h1>标题</h1>");
console.log("日志输出")
console.info("信息输出");
console.error("错误输出");
console.warn("警告输出");
</script>
基础语法
? JavaScript程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。
? 语句（statement）是为了完成某种任务而进行的操作，语句以分号结尾，一个分号即表示一个语句结束。多个语句可以写在一行内（不建议这么写代码），但是一行写多条语句时，语句必须以分号结尾。
1、标识符和关键字
标识符就是一个名字，用来给变量和函数进行命名，有特定规则和规范：
由Unicode字母、_、$、数字组成、中文组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分大小写
规范：
（1）见名知意
（2）驼峰命名或下划线规则
2、变量
? JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。
? // 先声明再赋值
? var a ;
? a = 10;
? // 声明同时赋值
? var b = 20;
（1）若只声明而没有赋值，则该变量的值为undefined。
（2）变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义。
（3）可以在同一条var命令中声明多个变量。
（4）若使用var重新声明一个已经存在的变量，是无效的。
（5）若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
（6）JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限 制，可以赋予各种类型的值。
3、变量提升
? JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
<script>
console.log(username);
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>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlzwpPug-1628165586628)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628163472833.png)]
4、数据类型（不同的教材可以有不同的分类情况）
? 五种简单的数据类型：Undefined、Null、布尔、数值和字符串。
? 一种复杂数据类型：Object。
? undefined类型的值是undefined。undefined 是一个表示"无"的原始值，表示值不存在。js中定义的变量，没有赋值的情况下，默认值都是undefined。
? null类型是只有一个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示一个空对象引用。
? 使用Null类型值时注意以下几点：
? 1）使用typeof操作符测试null返回object字符串。
? 2）undefined派生自null，所以等值比较返回值是true。未初始化的变量 和赋值为null的变量相等。
布尔类型有两个值：true、false。
? 使用 ’ ’ 或 " "引起来，如：‘hello’，“good”。
? 使用加号 ‘+’ 进行字符串的拼接，如：console.log(‘hello’ + ’ everybody’)；
对象是一组数据和功能的集合。
说明：
{}：表示使用对象字面量方式定义的对象。空的大括号表示定义包含 默认属性和方法的对象。
{
key:value,
key:value,
key:value
}
使用typeof可以测试出数据类型
<!--
typeof : 运算符 帮助判断数据的类型
返回一个字符串形式的小写的数据类型
Number -> number
String -> string
Null -> object
Undefined -> undefined
Boolean -> boolean
Function -> function
Object -> object
语法:
typeof(数据)
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>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCNbVnSX-1628165586637)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164170122.png)]
自动类型转换：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lPCHYKht-1628165586638)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628163811944.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mdLmOCns-1628165586641)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628163830191.png)]
分类:
显示类型转换|强制
任意类型(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(数据) 把参数数据转为字符串类型
在数据的前后+一对引号
-->
<script>
console.log(String(123));
console.log(String(null));
console.log(String(undefined));
console.log(String(false));
console.log(String(NaN));
console.log(Boolean(''));
console.log(Boolean(' '));
console.log(Boolean('abc'));
console.log(Boolean('123'));
console.log(Boolean('abc123'));
console.log(Boolean(0));
console.log(Boolean(123));
console.log(Boolean(-1.4));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log("-----------------------------");
console.log(Number(''));
console.log(Number(' '));
console.log(Number('123'));
console.log(Number('abc'));
console.log(Number('abc123'));
console.log(Number(true));
console.log(Number(false));
console.log(Number(null));
console.log(Number(undefined));
console.log('a'-1);
console.log(false-1);
console.log(true+false);
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgMvis1v-1628165586644)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164304872.png)]
比较运算符：
- == ------------>等于------------> x==8 为 false
- === ------------>全等（值和类型）------------> x=5 为 true；x=“5” 为 false
- && ------------>and------------> (x < 10 && y > 1) 为 true
- ||------------> or ------------>(x5 || y5) 为 false
<--
逻辑运算符
java中要求逻辑运算符左右两边的表达式必须结果为boolean类型
js中,两边的表达式可以为任意类型
&& : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果就是第一个操作数,如果为true,最终的结果为第二个操作数 || : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果为第二个操作数,如果为true,就为第一个操作数
-->
<script>
console.log(1=='1');
console.log(1==='1');
console.log(1!='1');
console.log(1!=='1');
console.log(true && false);
console.log(true || false);
console.log(Boolean(1));
console.log(1 && 'a');
console.log(1 || 'a');
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fScEquQA-1628165586646)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164557795.png)]
<!--
数组[]： 存储多个数据
长度可变，可以存储任意类型的数据
创建方式：
1.new Array() 创建空数组
2.new Array(值1,值2,值3...); 创建数组并赋值
3.[值1,值2,值3...] -> 推荐
索引：
从0开始，每次+1
操作数组中的数据
数组名[索引]
-->
数组的遍历：
<!--
数组的遍历:
普通for
for in
foreach
数组的常用方法:
-->
<script>
var arr = ["red","green","yellow","pink","black"];
for(var i = 0;i<=arr.length-1;i++){
console.log(arr[i]);
}
for(var i in arr){
console.log(arr[i]);
}
arr.forEach(function (value,index) {
console.log(value+"--->"+index)
});
console.log(arr);
console.log(arr.slice(2));
console.log(arr.slice(1,3));
console.log(arr);
console.log(arr.splice(1,2,"哈哈","呵呵","吼吼"));
console.log(arr);
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uvsgfPmu-1628165586648)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164670538.png)]
js中的函数 : 封装功能
1.函数声明
? function 函数名(参数列表){
? 函数体;
? }
? 调用: 执行函中的代码
? 1.函数名(实参);
? 2.转为函数表达式然后通过最后添加(实参)的方式调用
? 在函数声明的前面添加+|-|~|!或者前后添加一对()
2.函数表达式
? var 变量名 = function (参数列表){
? 函数体;
? };
? 函数表达式中的函数名作用只有一个,在递归使用的时候有用,否则默认一般省略
? 调用:
? 1.变量名(实参);
? 2.函数表达式后面直接添加(实参),在当前直接调用
注意:
-
参数个数可以不同,函数没有传递实参,默认undefined -
函数都存在返回值,没有显示定义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);
};
f1(1);
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>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BVkqvzyS-1628165586650)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164885301.png)]
<!--
js是值传递 | 引用传递（地址值传递）
js中的作用域 ： 函数为单位
js中的函数可以任意嵌套
函数存在作用域的提升: 函数声明的方式会发生作用域的提升
变量的作用域提升: 把当前的变量的声明提升到当前作用域的最上面
当在函数中省略var关键字定义的变量,成为全局变量,但是事前要求这个函数至少被调用过一次
-->
<script>
func();
var obj2 = [1, 2, 3];
function paramter2(o){
o = [2, 3, 4];
o[1] = 3;
}
paramter2 (obj2);
console.log(obj2);
{
var i = 1;
}
console.log(i);
function fn1(){
var j = 11;
}
function f1(){
function f2(){
function f3(){}
}
}
function f4(){
console.log("我是f4");
return function(){
console.log("返回值函数");
}
}
console.log(f4);
console.log(f4());
f4()();
function func(){
console.log("普通的函数声明");
}
function func2(){
console.log(haha);
var haha = "zhangsan";
m = 1;
}
console.log(m);
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9YKSIxim-1628165586651)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164997611.png)]
<!--
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);
var f = obj.fn;
f();
var obj2 = {
a : 12
};
obj.fn.call(obj2,100);
obj.fn.apply(obj2,[1000]);
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yhl3dmGB-1628165586652)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628165075991.png)]
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>
|