类型、运算符、类型转换、流程控制、函数、作用域)"/>
js基本语法(输入、输出、变量类型、运算符、类型转换、流程控制、函数、作用域)
js基本语法
- 为什么要学习JavaScript
- JavaScript概述(了解)
- 发展诞生
- JavaScript的组成(掌握)
- JS和H5的关系
- JavaScript初体验
- js的引入(记忆)
- 外联
- 内联
- 行内:
- js的位置
- JavaScript基本语法
- 命名规则
- 声明变量
- js的输入
- prompt()方法
- js的输出
- 输出到页面中
- 输出到控制台中
- 输出错误
- 弹出框
- js的注释
- 变量类型
- 基本数据类型
- 复合数据类型
- 特殊数据类型
- NaN非数字
- 产生情景
- 如何判定NaN
- 获取数据类型
- 运算符
- 算术运算符
- 赋值运算符
- 关系运算符
- 逻辑运算符
- 双目鱼表达式
- 类型转换
- 其它类型转化为数字
- 数字转换为字符串
- 其他值转化为布尔值
- 流程控制
- 顺序结构
- 分支结构
- if的使用
- if-else的使用
- if-elseif的使用
- switch的使用
- 循环结构
- while循环
- for循环
- do-while循环
- Debug工具的使用
- 函数
- 函数的概念
- 函数的好处
- 函数的定义
- 函数调用
- 函数的参数
- 函数的声明
- 函数的返回值
- 参数默认值
- 函数自执行
- 扩展
- 作用域
- 全局作用域
- 局部作用域
- 变量生命周期
为什么要学习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)
-
网页特效:
相册
canvas游戏
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));//NaNvar str3='uui';
console.log(parseInt(str3));//NaNvar 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不会输出
更多推荐
js基本语法(输入、输出、变量类型、运算符、类型转换、流程控制、函数、作用域)
发布评论