本文介绍了JavaScript的基础知识，包括其在网页开发中的作用，JavaScript的组成，以及如何在HTML中引入JS。接着，详细讲解了JavaScript的基本语法，如命名规则、变量声明、输入输出（prompt()、console.log()）、数据类型、运算符、类型转换、流程控制（顺序、分支、循环）以及函数和作用域的概念。通过本文，读者将对JavaScript有一个全面的了解。
js基本语法
为什么要学习JavaScript
-
网页三部分
HTML：控制网页的结构
CSS：控制网页的样式
JavaScript：控制网页的行为
不同于HTML和css，JavaScript是一门编程语言，因此要比html和css要复杂一些。
-
最初的JavaScript
- 用于判断客户的输入
-
现在的JavaScript：现在的js无所不能
1.异步与服务器交互(AJAX)
2.网页和特效(演示)
3.服务器开发(nodejs)
4.命令行开发工具(nodejs)
5.桌面程序(Electron)
6.app开发(reactNative)
7.控制硬件-物联网(Ruff)
8.游戏开发(canvas,coco2d.js)
-
网页特效:
JavaScript概述（了解）
发展诞生
JavaScript的组成(掌握)
三部分：ECMAScript、BOM、DOM
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMqXrZ7J-1654480197913)(C:\Users\qwq\Desktop\R-C (1)].jpg)
- ECMAScript： 是JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准，与具体实现无关
- DOM：一套操作网页元素的API(方法)
- BOM:一款操作浏览器功能的API（方法）
JS和H5的关系
HTML5是一种新的技术，就目前而言，我们所知的HTML5都是一些标签，但是有了JS之后，这些标签深层的扩展功能才得以实现
JavaScript初体验
js的引入(记忆)
可以有两种方式在HTML页面进行引入，一种是外联，一种是内部标签
外联
<script src="js文件路径"></script>
这是一对HTML标签，原则上可以放在HTML页面的任意位置，src后链接的是JavaScript文件，文件的扩展名为.js,如Index.js,在里面直接写JS文件即可
<script type="text/javascript" src="js文件路径"></script>
注意：一般是将js代码放在body之后的(因为这种情况是当html加载完成在执行js)，多以当执行js代码时，html页面都已载入完成，避免找不到元素而报错
内联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("你是天边最美的云彩")
</script>
</body>
</html>
行内：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p onclick="alert(123)">见过你的美，还能爱上谁？</p>
</body>
</html>
js的位置
1.在head中
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="example.js"></script>
</head>
不足：
js文件过大时，加载时间长，影响后续的html代码执行
js可能要获取页面中的html节点，js先执行则无法获取
2.body后面
JavaScript基本语法
命名规则
由数字、字母、_、$组成
不能以数字开头
区分大小写
不能使用系统关键字
提倡：
多个单词组成使用驼峰命名法，第二个单词首字母大写
命名要有含义
声明变量
基本语法：
//声明变量的同时赋值
var 变量名=赋值
例如：
var age=18
//先声明，在赋值
var info;
info="猪肉"
//一次声明多个值
var user1="user1",age1=22
//不使用var，直接声明
user2="1111"
js的输入
prompt()方法
语法：window.prompt(“弹出的输入框提示信息”,“弹出的输入框默认信息”)
描述：打开网页弹出一个输入框
//弹出输入框
var str=window.prompt("请输入一个数字","1");
document.write(str);
注意：
- prompt()是window对象的方法
- prompt()有两个参数，参数之间用逗号隔开
- prompt()方法会返回用户的输入信息
- 参数也可不写
js的输出
输出到页面中
document.write("何以解忧，唯有杜康")
输出到控制台中
console.log("何以解忧，唯有杜康")
输出错误
console.error("何以解忧，唯有杜康")
弹出框
alert("何以解忧，唯有杜康")
确认框
confirm(222)
js的注释
单行注释：//
多行注释：/* */
变量类型
1.变量中的数据是需要存储在计算机中的
2.计算机底层只能识别0和1，所以需要对不同类型的数据进行转换
3.转换的结果会导致所需空间不足，所以JS中分成多种数据类型，以方便计算机的存储
基本数据类型
| 数据类型 | 描述 | 示例 |
|---|---|---|
| 数字类型：number | 表示一个数字、可以是整数或者是小数 | 如：十进制10 |
| 字符串型：string | 用单引号或双引号引起来的一个字符串 | 如：“abc”，“张三” |
| 布尔型：boolean | 真值或者假值 | true，false |
复合数据类型
可以存放多个值
| 数据类型 | 描述 | 示例 |
|---|---|---|
| 数组(array) | 用于存储多个值，，后面单独讲 | arr=[1,2] |
| 对象：object | var obj=new Object();//创建一个空对象 |
特殊数据类型
| 数据类型 | 描述 | 示例 |
|---|---|---|
| 空类型：null | 表示空值，空对象指针，定义要保存对象值得变量 | var obj=null； |
| NaN非数字 | 特殊的数据类型，不是一个数字，任何两个NaN都是不相等的 | |
| 未定义类型：undefined | 没有定义变量的值 | var other;consolo.log(other) |
| 符号类型：symbol | ES6新增的符号类型 | sym=Symbol();consolo.log(sym) |
NaN非数字
产生情景
运算产生：
var num=12;
var str='abc';
console.log(num-str);
转化失败产生
var str='abc';
console.log(parseInt(str));
如何判定NaN
isNaN():是NaN返回true，不是返回false；
var res=prompt("请输入成绩：");
console.log(isNaN(res));
isNaN转化的工作原理和Number一致
获取数据类型
typeof：获取数据类型，只能获取基本数据类型。
var user="abc";
console.log(typeof user);
//思考：
age=18;
console.log(typeof typeof age);
这种情况是字符串数据类型。
运算符
js中的运算符
算术/赋值/关系/逻辑/字符串
算术运算符
算术运算符：+加法 -减法 *乘法 /除法 %取余
var a=1,b=2;
a+b=3;
a-b=-1;
a*b=2;
a/b=0.5
a%b=1;
+:即可以当数学运算符，又可以当字符串连接符
赋值运算符
| 运算符 | 例子 | 等价于 | 运算结果 |
|---|---|---|---|
| = | y=6 | y=6 | |
| += | y+=1 | y=y+1 | y=7 |
| -= | y-=1 | y=y-1 | y=5 |
| *= | y*=2 | y=y*2 | y=12 |
| /= | y/=2 | y=y/2 | y=3 |
| %= | y%=4 | y=y%4 | y=2 |
关系运算符
结果是bool值，用于判断
< <= > >= == != ===
| 运算符 | 说明 | 例子 | 运算结果 |
|---|---|---|---|
| == | 等于，只比较值 | 2==3 | false |
| === | 恒等于，值和类型都做比较 | 2=2 2=“2” | true false |
| ！= | 不等于 | 2！=3 | true |
| > | 大于 | 2>3 | false |
| < | 小于 | 2<3 | true |
逻辑运算符
| 运算符 | 说明 | 例子 | 运算结果 |
|---|---|---|---|
| && | 逻辑与 and | x=2;y=6;x>5&&y>5 | false |
| || | 逻辑或 | x=2；y=6；x>5||y>5 | true |
| ! | 逻辑非，取逻辑的反面 | x=2;y=6;!(x>y) | true |
前置++和后置++的区别：
后置++：先使用值，在加1
前置++：先加1，再使用值
双目鱼表达式
表达式？值1：值2
表达式成立，则执行值1，不成立则使用值2.
类型转换
为什么转化？
1.服务器返回的数字，一般是string
2.从页面中获取的数字是String
其它类型转化为数字
Number()
//基本数据的类型获取
var num=12;
var num1='12';
console.log(typeof num);
console.log(typeof num1);
//其它类型转化为number
console.log(Number(num1))
parseInt()
用于将字符串类型的整数，转化为数字类型
var str1='12abc';
var num1='12'
console.log(parseInt(str1));
console.log(parseInt(num1));
var str2='abc12'
console.log(parseInt(str2));//NaN
var str3='uui';
console.log(parseInt(str3));//NaN
var str4='12.34';
console.log(parseInt(str4));//NaN
工作原理：从左到右取出字符串中的数字，遇到非数字就停止，如果第一位是非数字，那么久返回NaN
parseFloat()工作原理和parseInt一样，但是遇到.会继续向下。
隐式转换
str=12；
console.log(+str);//12
console.log(str-0);//12
数字转换为字符串
.toString()
var num=12;
var res=num.toString();
console.log(typeof res);
String()
var res1=String(num);
console.log(typeof res1);
连接空字符串
var res2=num+"";
console.log(typeof res2);
其他值转化为布尔值
0 null undefined NaN ’ ‘ 转化为布尔值是false，其他的转化是true；
!取反
console.log(!!0);
console.log(!!null);
使用Boolean()
流程控制
顺序结构
- 从上到下执行的代码就是顺序结构
- 程序默认就是从上到下，一行一行的顺序执行
console.log("haha1");
console.log("haha2");
console.log("haha3");
输出：
haha1
haha2
haha3
分支结构
也叫选择结构，根据不同的情况，执行对应的代码。
if的使用
if(表达式){
//表达式成立，返回true，则执行语句
语句
}
if-else的使用
if(表达式1){
语句1
}else{
语句2
}
if-elseif的使用
if(表达式1){
语句1；
}else if(表达式2){
语句2；
}
switch的使用
Switch(res){
case 情况1:
语句1;
break;
case 情况2:
语句2;
break;
default:
语句3;
break;
}
循环结构
重复做一件事情
问题
如果输出一句hello word，可以document.write(“hello word”);
思考：现在要输出10次，应该怎么办？
写10次，……
分析
此时，就要用到循环结构了
while循环
while(判断语句){
循环语句1;
}
for循环
for(初始值，判断条件，增值){
语句1;
}
do-while循环
do{
语句1；
}while(判断语句)
Debug工具的使用
函数
函数的概念
函数就是代码块，可以多次调用，很容易实现模块化编程
函数的好处
1) 减少代码开发时间
2) 模块化编程
3) 可以重复使用
函数的定义
形式1 function fn(){
语句
}
function:函数关键词
fn：函数名字,字母 数字 下划线 $组成，不能以数字开头，区分大小写
():函数的参数，多个参数使用逗号隔开
{}：放置函数体，用于执行时，所编译的代码块
函数调用
函数名();
例：fn();
直接写函数名，加上小括号
函数的参数
function fn(参数1,参数2,...,参数N){
语句
}
调用：fn(实参1，实参2，......,实参N)
例如：
function fn(str1,str2,str3){
console.log(str1,str2,str3);
}
调用：
fn('a','b','c')
函数的声明
直接声明
funtion fn(){
console.log("111111")
}
fn();
赋值式声明：也称匿名函数
var fn=funtion(str){
console.log(str)
}
fn(str);
总结：直接声明的函数，可以先使用，再声明；而匿名函数不能先使用，在声明。
函数的返回值
使用关键词return
1 返回函数处理的结果，可以是任何类型
2 结束函数的执行
3 在哪里调用，结果就返回哪里
函数返回值：
1.直接输出
2.使用变量
参数默认值
给函数的参数设置默认值，代用函数的时候，这个参数是不用传值的
//参数的默认值：就是在设置参数的时候给一个值
//当后面调用函数，这个参数可以不用传参
function fn(name,age=15,sex='女'){
document.write('我叫'+name+',年龄是'+age+',性别是'+sex);
}
fn('贾玲')
注意：有默认值的最好在后面
关键词：arguments传递实参，但是没有形参接收
function fn3(){
console.log(arguments)
}
fn3(11,22,33,44)
输出结果为：
arguments(4)[11,22,33,44,callee:f]
函数自执行
<script>
(function (){
console.log('这是自执行。。。')
})();
//()() 第一个括号，包含自执行函数，第二个括号，调用自执行函数
//传参
(function (str1){
console.log('这是自执行。。。'=str1)
})('aa');
//使用！直接执行
!function(){
console.log('这是自执行。。。')
}
</script>
扩展
函数可以作为参数
通常，我们把作为参数传递的函数叫做回调函数
function fn1(fn){
document.write('热不热')
fn();
}
var bear=function(){
alert('好热，喝杯饮料')
}
fn1(bear)
作用域
全局作用域
函数以外的地方就是全局作用域（全局变量），可以在任意地方调用，包含函数的内部
var info="111";//这个就是全局变量
function fn(){
//这个就是局部变量
var str=111;
}
隐式全局变量
function fn2(){
str1="1111";
}
//函数不调用，里面的代码不被执行
fn2();
console.log(str1);//可以执行，为什么呢？因为在函数内部声明变量不写var，就会变成全局变量。
局部作用域
函数以内的地方就是局部作用域，只能在函数内部调用
function fn(){
//这个就是局部变量
var str=111;
}
变量生命周期
局部变量：函数开始声明，函数结束销毁
全局变量：代码开始声明，代码结束销毁
var num1=1;//全局变量
num2=2;//全局，不提倡
function fn3(){
var num3=3;//局部
num4=4;//隐式全局
console.log(num1,num2,num3,num4)
}
fn3();
console.log(num1,num2,num3,num4)
执行结果：
1 2 3 4
在第二个log中，会错，因为num3不会输出
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
