蓝旭工作室2023春季培训第四周预习博客-CSDN博客

本文链接：https://blog.csdn.net/m0_74974446/article/details/130164212

Javascript使用方法

标签引用

在HTML的script标签中直接编写

<script>
    alart("Hello world!")
</script>

文件引用

在一个单独的js文件中编写，然后在HTML中的script标签中引用

main.html

<script src="main.js"></script>

main.js

alert("Hello,World!");

Javascript输出语句

window.alert();写入弹出窗口

<script>
    alert("Hello,World!");
</script>

document.write();写入HTML输出

<script>
    document.write("Hello,World!");
</script>

console.log();写入浏览器控制台

<script>
    console.log("输出一条日志");
</script>

Javascript基础语法

变量

var a;//变量的声明
a = 123;//变量的赋值
var b = 123;//变量的声明和赋值

数据类型

字符串型（String）
数值型（Number）
布尔型（Boolean）
undefined型（Undefined）使用 var 声明变量但未对其加以初始化
null型（Null）如果比较undefined和null是否相等，会返回true。从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

1.typeof：检查变量的数据类型

2.强制类型转换

var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);

var b = "456";
b = Number(b);
console.log(b);
console.log(typeof b);

var c = 789;
c = Boolean(c);
console.log(c);
console.log(typeof c);

运算符

算术运算符

运算符	描述
+	加
-	减
*	乘
/	除
%	取余
++	自增
--	自减

关系运算符

运算符	描述
>	大于
<	小于
>=	大于等于
<=	小于等于

输出true或false

赋值运算符

运算符	示例	相当于
=	x=y
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
/=	x/=y	x=x/y
%=	x%=y	x=x%y

逻辑运算符

运算符	描述	运算规则
&&	与	两个值只要有一个false，就返回false;如果第一个值为false，就不会检查第二个值
\|\|	或	两个值只要有一个true，就返回true;如果第一个值为true，就不会检查第二个值
!	非	取反

比较运算符

运算符	描述	是否自动进行类型转换
==	相等	是
!=	不相等	是
===	全等	否
!==	不全等	否

条件运算符

variablename=(condition)?value1:value2;

如果condition为true，则执行语句1，并返回执行结果，如果为false，则执行语句2，并返回执行结果。

var a=18;
var result=(a<18)?"太小了":"太大了";

逗号运算符

使用逗号可以在一条语句中执行多次操作。

使用逗号运算符分隔的语句会从左到右顺序依次执行。

运算符优先级

优先级	运算符
1	（）
2	++、--、！
3	先*/%，后+-
4	> < >= <=
5	==、!=、===、!===
6	先&&，后\|\|
7	=
8	，

条件语句、循环语句

条件语句

if...else
switch...case

循环语句

for循环
while循环
do...while循环
break/continue

对象

创建对象

var person = new Object();//创建对象
person.name = "张三";//添加属性
person.age = 18;
person.smile = function(){
    console.log("smile");
}//添加方法

var person = {
    name: "张三",
    age: 18
    smile: function(){
    console.log("smile");
}
};

使用对象

console.log(person.name);//调用对象属性
console.log(person.smile);//调用对象方法

数组对象

创建数组

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];//利用数组字面量创建数组
var arr = new Array();//利用new创建数组

遍历数组

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

数组属性

constructor：返回创建数组对象的原型函数
length：设置或返回数组元素的个数

var arr = [1,2,3,4];
console.log(arr.constructor);
console.log(arr.length);

作用域

全局作用域

直接编写在script标签中的JavaScript代码，都在全局作用域
全局作用域在页面打开时创建，在页面关闭时销毁
全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到

函数作用域

调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
每调用一次函数就会创建一个新的函数作用域，它们之间是互相独立的
在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量

课后补充：

数组方法

修改原有数组：

push() 在末尾添加元素
pop() 删除最后一个元素，返回该元素的值
shift() 删除第一个元素，返回该元素的值
unshift() 在数组头部添加元素，返回该数组长度
sort() 对数组的元素进行排序
reverse() 将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法修改原数组
splice(startdelectCount?,item1?) 通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容（如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素则返回空数组）。

不改变原有数组：

slice(begin?,end?) 返回一个新的数组对象，这一对象是由begin和end决定的原数组的浅拷贝（包括begin，不包括end）。
concat() 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
join() 将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符（默认使用‘,'分隔，如果使用“ ”，则所有元素之间都没有任何字符）。

函数

函数声明

function 函数名(形参列表){
    //函数体
}
var 函数名 = function(形参列表){
    //函数体
}

函数调用

名字(); 函数可以多次调用
在事件中调用，直接写函数名，不使用括号

匿名函数

匿名函数自执行：声明后不需要调用就直接执行（自调用函数），程序一进入就执行该函数
函数表达式：把函数存到变量，或将函数存到数组的对应位置里等，调用时通过变量或
数组对应位置进行调用。调用时需要写括号。

异步

异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了（比如 Ajax 操作从服务器得到了结果），该任务（采用回调函数的形式）才会进入主线程执行。排在异步任务后面的代码，不用等待异步任务结束会马上运行，也就是说，异步任务不具有“堵塞”效应。

1.回调函数
function f1(callback) {
  // ...
  callback();
}

function f2() {
  // ...
}

f1(f2);

f2写成f1的回调函数。
f2必须等到f1执行完成，才能执行。

回调函数的优点是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之
间高度耦合（coupling），使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套
的情况），而且每个任务只能指定一个回调函数

介绍两个定时器setInterval（隔一段时间执行）和setTimeout（执行一次）
setInterval(function(){
    执行代码
},时间间隔（毫秒）)
setTimeout(function(){
    执行代码
},时间间隔（毫秒）)
clearTimeout(定时器标识)//清除setTimeout定时器
clearInterval(定时器标识)//清除setInterval定时器
2.事件监听
对于元素事件的监听也是异步的，因为只有满足==事件触发条件==时才会执行相应的函数