JavaScript笔记
一、JavaScript简介
1.什么是JavaScript?
javaScript简称JS.由网景分公司开发的客户端
脚本语言,不需要编译,可以直接执行
补充:
机器语言(0,1代码)—汇编语言(助记符)-----高级语言(①解释②编译)
高级语言—>编译.obj目标程序文件—>连接link.exe可执行性文件
解释
WEB前端三层:
- 结构层HTML,定义页面的结构
- 样式层CSS,定义页面的样式
- 行为层JavaScript,用来实现交互,提升用户体验
2.JavaScript作用
- 在客户端动态的操作页面
- 在客户端数据的校验
- 在客户端发送异步请求
二、引用方式
1.内联方式
在页面中使用Script标签,在Script标签的标签体中编写js代码
<Script>
js代码;
</Script>
2.行内方式
在普通的标签中编写js代码,一般需要结合事件
属性,如onclick、onmouseover等
对象:客观存在的,并且可以相互区别的事物—如:各种标签
eg对象:
- 外观----宽度、高度、背景色—CSS
- 事件----
多态性
同一个事件发生的对象不同,所引发的反应也不同
<a href="" onclick="alert('超链接被触发了!')">我是超链接</a>
<!--使用超链接href属性执行js时,必须添加JavaScript前提-->
<a href="JavaScript:alert('超链接被触发了!')">我是超链接</a>
3.外部方式
使用单独的.js
文件定义,然后在页面中使用script标签引入外部脚本文件
<script type="text/javascript" src="/js/hello.js"></script>
注意:如果某个script标签用于引用外部的js
文件,则该script标签体中不能再写js代码
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.内联方式-->
<script>
//alert("hello JavaScript");
</script>
<!--3.引用外部的js脚本文件-->
<script type="text/javascript" src="/js/hello.js">
alert('呵呵');
</script>
</head>
<body>
第一个JavaScript程序
<hr>
<!--2.行内方式-->
<input type="button" value="点我" onclick="alert('我被点晕了!')">
<!--<div οnmοuseοver="alert('走开')">把鼠标移上来!</div>-->
<a href="" onclick="alert('超链接被触发了!')">我是超链接</a>
<!--使用超链接href属性执行js时,必须添加JavaScript前提-->
<a href="JavaScript:alert('超链接被触发了!')">我是超链接</a>
</body>
</html>
三、基本用法
1.变量
js是一门弱类型的语言,声明变量时使用var关键字,不需要指定变量的类型
语法:var 变量名=常量或表达式;
注意:变量名的命名规则:
1、由字母,数字,汉字,下划线组成
2、由字母,汉字,下划组成
3、不能和保留字同名
4、大小写敏感
回忆:
数据类型:常量和变量
常量:具体的值,不变的量----常数项
变量:变化的量,存放常量的量-----容器
int a,b,c;//变量在使用前必须强制进行定义或声明
a = 10;//将整形常量10放到整形常量
b = 20;
c = a + b;//将a+b的和赋值给整型变量c
print("c=%d",c);
在ECMAScript 6规范中新增let关键字,也用于声明变量
使用let声明的变量支持模块级作用域,而使用var声明的变量不支持模块级作用域
注:在IDEA中配置ES版本settings---->Languaage&FrameWorks---->JavaScript---->JavaScript Version
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//变量
var name;
name ='张无忌';
name ='tom';
//alert(name);
var 姓名;
姓名="张敏";
//alert(姓名) //姓名是变量名
var age=18;
var a=5,b=2,c=7;
var age=18;
var Age=19;
//alert(Age);
sex="male";//强烈不建议
//alert(sex);
{
//var x = 6;
//alert(x);
let y =10;
//alert(y);
}
alert(y);
</script>
</head>
<body>
</body>
</html>
2.输入和输出
输出
-
alert()弹出警告框
-
console.log()输出到浏览器的控制台
-
document.write()输出到页面
例如:
//输出信息
alert('嘿嘿');
console.log('哈哈');
document.write('嘻嘻');
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6NJAj7iz-1593438062451)(C:\Users\Administrator\Desktop\js\WPS图片-拼图.png)]
输入
-
prompt()弹出一个输入框,获取用户输入的数据
使用
typeof变量名
判断变量的类型使用
Number(变量名)
将字符串转换为数值
例如:
//输入
var name=prompt("请输入你的名字:");
console.log(name);
var age= prompt("请输入你的年龄:");
console.log(age,typeof age);
console.log(age+2);
age = Number(age);console.log(age+2);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JWyWkgUR-1593438062454)(C:\Users\Administrator\Desktop\js\输入.png)]
3.转义字符
常用转义字符:
\n
换行\t
制表位,缩进\"
双引号\'
单引号\a
响铃,警告
例如:
//转义字符
console.log('he\'llo\'wored');
console.log('welcome to \n javascript');
console.log('welcome to \t javascript');
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6I2NXekf-1593438062456)(C:\Users\Administrator\Desktop\js\转义字符.png)]
4.注释
单行注释://
多行注释:/* */
5.编码规范
代码区分大小写
每条语句以分号结尾
代码缩进
四、核心语法
1.数据类型
常量:具体的值 eg: ‘abc’ ‘20’ 3.14 100
变量:存放常量的量----容器
基础数据的类型:
- string字符串
- number 数值(NaN表示非数字Not a Number,其自身是number类型,表示数值是不正常状态)
- boolean布尔
- null空类型
- undefined未定义类型
例如:
/*
数据类型
*/
var name ='tom';
var age = 18;
var height = 180.5;
var flag = true;
var hobby = null;
var date = new Date();
var arr = new Array;
var sex;//只定义了变量,但是未赋值
console.log(typeof name);
console.log(typeof age);
console.log(typeof height);
console.log('hello'-5);//返回Nall
console.log(typeof flag);
console.log(typeof hobby);//如果数据是null、Date、Array等返回值是obgect
console.log(typeof date);
console.log(typeof arr);
console.log(typeof sex);//返回undefined
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rlBhkrjZ-1593438062458)(C:\Users\Administrator\Desktop\js\四.核心语法1.数据类型.png)]
数据类型转换:
-
转换为number
使用number()、parselnt()、parsfloat()
例如:
/*
类型转换
*/
//1、转换为数值
var a ='12';
console.log(a,typeof a);
//方式一:使用Number()
a = Number(a);//赋值号=左边的a代表的是容器或变量本身 右边的a代表的是容器中的值
a = Number('12.5');
a= Number('12abc');
a= Number('ab12');
console.log(a,typeof a);
//方法二:使用PersInt()
a = parseInt(a);
a = parseInt('12.5');
a = parseInt('12abc');//按字符顺序依次进行解析
a = parseInt('abc12');
console.log(a.typeof a);
//方法三:使用parseFloat()
a = parseFloat(a);
a = parseFloat('12.5');
a = parseFloat('12abc');
a = parseFloat('abc12');
console.log(a.typeof a);
//将布尔值转换为数值
a=Number(false); //js中true用1或非0表示 false用0表示
console.log(a,typeof a,typeof true);
-
转换为string
拼接空字符串
例如:
//将数值转换为字符串
var a = 12;
console.log(a,typeof a);
a = a + '';//# 后接空字符串 左边a---变量本身 右边a---值
console.log(a,typeof a);
-
转换为布尔
使用Boolean()
注意:0、空字符串、undefined、null、NaN会被转换为逻辑假false,其他的类型在转换为布尔时,会被转换为true
例如:
/*
将数值、字符串转换为布尔
*/
var = Boolean(0);
var = Boolean('');
var = Boolean(null);
var = Boolean(nubefined);
var = Boolean(NaN);
var = Boolean('tom');
console.log(a,typeof a);
var name='tom';
if(name)
{
console.log(name);
}
2.运算符
算数运算符:+、-、*、/、%、**、++、–
例如:
/*
算数运算符:+、-、*、/、%、**、++、--
*/
var a = 5;
var b = 3;
var c = '2';//var c = 'aaa';
var d = true;
console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a/b);
console.log(a%b);
console.log(a**b);//a的b次方
console.log(a-c);//会将数字字符c转换为数值,在进行算数运算
var a = 1;
var b = 2;
console.log(a++);//表达式会返回变化前a的值,表达式执行完a自加 a = a + 1
console.log(a);
console.log(++a);//表达式会返回变化后a的值,表达式执行完a也是变化后的值
console.log(a);
console.log(b--);//先引用,后自加减
console.log(--b);先自加减,后引用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dj4XzrrQ-1593438062461)(C:\Users\Administrator\Desktop\js\四、2.算数运算符.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gsNwQxSy-1593438062462)(C:\Users\Administrator\Desktop\js\四、2.算数运算符2.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5brzmVM0-1593438062463)(C:\Users\Administrator\Desktop\js\四、2.算数运算符3.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1fhJlrJ2-1593438062464)(C:\Users\Administrator\Desktop\js\四、2.算数运算符4.png)]
比较运算符:>、>=、<、<=、、=、!==
例如:
/*
比较运算符:>、>=、<、<=、==、===、!==
*/
var a = 5;
var b = 5; //'5'
var d = false;//js中true表示为1,false表示为0
console.log(a>b);
console.log(a<b);
console.log(a>=b);
console.log(a<=b);
console.log(a==b);//只判断内容是否相等
console.log(a===b);//全等于,既要判断内容,也要判断类型
console.log(a+d);//= 0
console.log(a-b);//会将数字字符b转换为数值,再进行算数减运算
console.log(a+b);//会将数值a转换为字符串,然后和b进行字符串的首尾相连
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJaoqKHI-1593438062465)(C:\Users\Administrator\Desktop\js\四、2.比较运算符1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sb7GqcHf-1593438062466)(C:\Users\Administrator\Desktop\js\四、2.比较运算符2.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YHbxURZn-1593438062467)(C:\Users\Administrator\Desktop\js\四、2.比较运算符3.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ct09KVT-1593438062469)(C:\Users\Administrator\Desktop\js\四、2.比较运算符4.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LlfCfWvN-1593438062470)(C:\Users\Administrator\Desktop\js\四、2.比较运算符5.png)]
赋值运算符:=、+=、-=、/=、%=、**=
例如:
/*
赋值运算符:=、+=、-=、/=、%=、**=
*/
console.log(a);
a = 9;//将整数9赋值给变量a
console.log(a);
var a = 1;
a +=2;//a = a +2
console.log(a);
var a = 2;
a**=2;//a=**2
console.log(a);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mQP7OdZF-1593438062471)(C:\Users\Administrator\Desktop\js\四、2.赋值运算符1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-79Jcz36Q-1593438062472)(C:\Users\Administrator\Desktop\js\四、2.赋值运算符2.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n6u4sEf9-1593438062473)(C:\Users\Administrator\Desktop\js\四、2.赋值运算符3.png)]
逻辑运算符:&&并且、||或、!非
例如:
/*
逻辑运算符:&&并且、||或、!非
*/
var x = true;
var y = false;
console.log(x&&y);//两边为真才为真,一边为假就是假
console.log(x||y);//两边为假才为假,一边为真就是真
console.log(!x);
//逻辑运算的短路问题
var a = 2;
var b = 5;
console.log(a && b);
console.log(a||b);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QrgK719V-1593438062474)(C:\Users\Administrator\Desktop\js\四、2.逻辑运算符1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rccfB1iF-1593438062475)(C:\Users\Administrator\Desktop\js\四、2.逻辑运算符2.png)]
条件运算符:条件?表达式1:表达式2
例如:
/*
条件运算符:条件?表达式1:表达式2
*/
var a = 3;
var b = 2;
console.log(a>b?a+b:a-b)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FQGsCabS-1593438062476)(C:\Users\Administrator\Desktop\js\四、2.条件运算符.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//使用Math对象进行数学运算,用法:Math.方法名(叄数)
//1.求绝对值
console.log(Math.abs(-5));
//2.计算次方
console.log(Math.pow(2,3));
//3.四舍五入
console.log(Math.round(123.456));
//4.向上取整,向下取整
console.log(Math.ceil(3.4));//返回大于等于3.5的最小整数
console.log(Math.floor(3.4));//返回小于等于3.5的最大整数
//5.生成一个[0,0,1]之间的随机小数
console.log(Math.random());
//6.最大值,最小值
console.log(Math.max(23,1,54,2,-6));
console.log(Math.min(23,1,54,2,-6));
//7.圆周率
console.log(Math.PI);
</script>
</head>
<body>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R1jaiYD9-1593438062477)(C:\Users\Administrator\Desktop\js\Math.png)]
3.选择结构
if…else、switch
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var age = 25;
if(age>=60)
console.log('老年');
else if(age>=30)
console.log('中年');
else if(age>=16)
console.log('少年');
else
console.log('童年');
var day = '星期一';
switch