JavaScript
一、JavaScript简介
1.什么是JavaScript
JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行
Web前端三层次：
- 结构层HTML，定义页面的结构
- 样式曾CSS，定义页面的样式
- 行为层JavaScript用来实现交互，提升用户的体验
2.JavaScript作用
- 在客户端浏览器上动态的操作页面
- 在客户端浏览器上做数据的校验
- 在客户端上发送异步请求
二、引用方式
1.内联方式
在页面中使用script标签，在script标签中编写js代码
script标签可以放在页面的任意位置，一般放在head中
<script>
ja代码
</script>
2.行内方式
在普通标签中编写js代码，一般需要结合事件的属性，如onclick、onmouseover等
提示：什么是事件属性？—CSS实现
eg：对象—外观修饰—CSS实现
行为、事件---某一事件发生的对象不一样，所引发的反应也不相同---多态性
<!--2.行内方式-->
<input type="button" value="点我" onclick=alert("我被点了，晕了！")>
<!--<a href="" onclick="alert("超链接被触发")">超链接</a>-->
<a href="javascript:alert("超链接被触发")">超链接</a>
<div onmouseover="alert("走开")">把鼠标移上来</div>
3.外部方式
使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件
<!--3.外部方式-->
<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>
<style>
div{
width:100px;
height:100px;
background:#ccc;
}
</style>
<!--1.内联方式-->
<script>
// alert('hello JavaScript');
</script>
<!--3.外部方式-->
<script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
第一个JavaScript程序
<hr>
<!--2.行内方式-->
<input type="button" value="点我" onclick=alert("我被点了，晕了！")>
<!--<a href="" onclick="alert('超链接被触发')">超链接</a>-->
<a href="javascript:alert('超链接被触发')">超链接</a>
<div onmouseover="alert('走开')">把鼠标移上来</div>
</body>
</html>
三、基本语法
1.变量
变量是用来存储常量的量
常量就是固定值—常数项
js是一门弱类型语言，声明变量时使用var关键字，不需要指定变量的类型
语法：var变量名=常量或表达式
在ECMAScript 6规范中新增let关键字，可以用于声明变量
使用let声明的变量支持块级作用域，而使用var声明的变量不支持块级作用域
注意：在IDEA中配置ES版本 settings–>language & frameworks–>javascript–>javascript language version
变量的命名规则：
- 由字母、数字、下划线、汉字组成
- 由字母、下划线开头
- 不能和系统关键字重名
- 区分大小写
了解：变量名的命名
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//变量
var name; //定义了一个变量name
name = "tom"; //将字符串常量tom赋值给变量name
name = "alice";
//alert(name)
var age=18;//定义了一个变量age,并将整数18常量赋值给age
//age整形变量 age中存放的是整数，age是整型变量
//alert(age)
var sex = "male"; //强烈不建议使用
//alert(sex)
{
//var x = 8;
//alert(x)
let y = 7;
//alert(y)
}
//alert(x)
//alert(y)
//姓名 = "tom";
//alert(姓名)
age = 18;
Age = 19;
alert(age)
</script>
</head>
<body>
</body>
</html>
2.输入和输出
输出：
- alert() 弹出警告框
- console.log() 输出到浏览器的控制台
- doucument.write() 输入到页面
输入：
- prompt() 弹出输入框，获取用户输入的数据
使用typeof变量判断变量的类型
使用number(变量)将字符串转换为数值
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例</title>
</head>
<body>
<script>
//输出信息
alert("嘿嘿");
console.log("哈哈");
document.write("嘻嘻");
//输入
// var name=prompt("请输入你的姓名");
// console.log(name);
// var age=prompt("请输入你的年龄");
// console.log(age,age+2,typeof age);
// age = Number(age);
// console.log(age,typeof age);
// console.log(age+2);
console.log("he\'llo\n world");//\n表示换行
//这是一个单行注释
/*
这是多行注释
这是多行注释
*/
</script>
</body>
</html>
3.转义字符
常用转义符：
- \n换行
- \t缩进
- "双引号
- '单引号
- \斜杠
注释
单行注释//
多行注释/* 注释内容 */
5.编码规范
代码区分大小写
每个语句以分号结尾
代码缩进
四、数据类型
1.数据类型
常量：具体值，不变的量—常数项
变量：变换的值，存储常量的量
基础数据类型：
- string 字符串
- number 数值(NaN 表示非数字 Not a Number，其自身是number类型，表示数值的不正常状态)
- boolean 布尔
- null 空类型
- undefined 未定义类型
类型转换：
- 使用number
使用Number()、parselnt()、perseFloat()
- 转换为字符chuan
拼接空字符串 - 转换为boolean
使用Boolean()
注意：0、空字符、null、undefined、NaN会被转换为false，其他值会被转换为true
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
数据类型
*/
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);//返回NaN
// console.log(typeof flag);
// console.log(typeof hobby);//如果数据是null，Date，Array等，返回object
// console.log(typeof date);
// console.log(typeof arr);
// console.log(typeof sex);
/*
类型转换
*/
//1.转换为number
// var a = '12';
// console.log(a,typeof a);
//方式一：使用Number()
// a = Number(a);
// console.log(a,typeof a);
// a = Number('12.5');
// a = Number('12sbc');
// console.log(a,typeof a);
//2.方式二：parseInt()
// a = parseInt('12');
// a = parseInt('12.5');//转换时会去掉小数部分
// a = parseInt('12abc');//按照字符的顺序依次解析
// a = parseInt('abc12');
// console.log(a,typeof a);
// 3.方式三：parseFloat()
// a = parseFloat('12');
// a = parseFloat('12.5');
// a = parseFloat('12abc');
// a = parseFloat('abc12');
// console.log(a,typeof a);
// 将数值转换为字符串
// var a = 12;
// console.log(a,typeof a);
// a = a + '';//后接一个空字符串
// console.log(a,typeof a);
// 将布尔类型的数值转换为数字
// var a;
// a = Number(true);//在js中true用1或非0表示，false用0表示
// console.log(a,typeof a);
// 转换为布尔
// var a = Boolean(0);
// var a = Boolean('');
// var a = Boolean(null);
// var a = Boolean(undefined);
// var a = Boolean(NaN);
// var a = Boolean(4);
var a = Boolean('tom');
var name;
name = 'tom';
if(name){
console.log(name);
}
// console.log(a,typeof a);
</script>
</body>
</html>
2.运算符
算数运算符：+、-、*、/、%求余、**乘方、++、–
比较运算符：>、>=、<、<=、==、= = =、!=
赋值运算符：=、+=、-=、*=、/=、%=
逻辑运算符：&&并且、||或者、!非
条件运算符：条件?表达式1：表达式2
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*算数运算符：+、-、*、/、%求余、**乘方、++、--
比较运算符：>、>=、<、<=、==、= = =、!=
赋值运算符：=、+=、-=、*=、/=、%=
逻辑运算符：&&并且、||或者、!非
条件运算符：条件?表达式1：表达式2*/
//1.算数运算符
// var a = 5;
// var b = 3;
// var c = '0';
// var d = true;
// var e = false;
// 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为数字字符时，会自动将数字字符转换为数值
// console.log(a+d);
// console.log(a+e);
//var a = 1;
// console.log(a++);//先使用a种的值，再让a自加，再原值的基础上加1，表达式会返回变化前a的值，然后自加 a = a + 1
// console.log(a);
// console.log(++a);//表达式返回变化后的值，先自加减，再返回值
// console.log(a);//自加自减表达式执行完a的值是多少
//2.比较运算符
// var a = 1;
// var b = true;
// console.log(a>b);
// console.log(a<b);
// console.log(a>=b);
// console.log(a<=b);//返回值是boolean值，true、false
// console.log(a==b);//判断a和b的值是否相同 只是判断a和b的内容是否相等
// console.log(a===b);//全等于 既要判断内容，也要判断数据类型
// console.log(a+b);
// console.log(a===b);//在js中true表示为1，false表示为0
//3.赋值运算符
// var a = 8;
// a += 2;//a = a + 2
// a -= 2;//a = a - 2
// console.log(a);
//4.逻辑运算符
var x = true;
var y = false;
// console.log(x && y);//并且运算时，两边为真才为真，一边为假就是假
// console.log(x || y);//或运算时，两边为假才为假，一边为真就是真
//逻辑运算短路问题
a = 0;
b = 5;
console.log(a && b);//0-----false
console.log(a || b);
//5.条件运算符
console.log(a>b?a+b:a-b);//如果条件为真返回表达式1的值，如果条件为假返回表达式2的值
</script>
</head>
<body>
</body>
</html>
案例：
<!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,4));
//3.四舍五入
console.log(Math.round(123.556));//在js中不可以指定四舍五入到第几位
//4.向上取整，向下取整
console.log(Math.ceil(3.5));//取大于等于3.5的最小整数
console.log(Math.floor(3.5));//取小于等于3.5的最大整数
//5.生成一个[0,0.1)之间的随机浮点数
console.log(Math.random());//以当前系统时间为随机数种子
//6.最大值，最小值
console.log(Math.max(23,1,54,-6));
console.log(Math.min(23,1,54,-6));
//7.圆周率的值
console.log(Math.PI);
</script>
</head>
<body>
</body>
</html>
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(day){
case '星期一':
console.log('吃包子');
break;
case '星期二':
console.log('吃油条');
break;
case '星期三':
case '星期四':
console.log('吃面条');
break;
case '星期五':
console.log('吃油饼');
break;
default:
console.log('今天不吃了！')
}
</script>
</head>
<body>
</body>
</html>
4.循环结构
while、do…while、for、for…in
break、continue
break：退出整个循环
continue：结束本次循环，返回到条件判断处继续进行下一次执行循环的条件判断
var str = 'welcome';//可以将字符串看作是由多个字符组成的集合
for(var index in str)
{
// console.log(index);//输出了str的索引
console.log(str[index]);
}
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//while 当型循环
var i =1;
var sum = 0;
while(i<100)
{
sum+=i;
i++;
}
console.log(sum);
//do...while
var i = 1;
var sum = 0;
do{
sum+=i;
i++;
}while(i<101);
console.log(sum);
//for
var sum = 0;
for(var i = 1;i<=100;i++)
if(i%7!=0)
sum+=i;
console.log(sum);
//for...in 对集合进行遍历
var str = 'welcome';//可以将字符串看作是由多个字符组成的集合
for(var index in str)
{
// console.log(index);//输出了str的索引
console.log(str[index]);
}
// s = 'abc';
// document.write(s[0]);
// document.write(s[1]);
// document.write(s[2]);
//break和continue
for(var i = 1;i <= 10;i++)
{
if(i % 2 == 0)
break;
console.log(i);
}
</script>
</head>
<body>
</body>
</html>
5.数组
5.1定义方式
语法：
var arr = new Array();
var arr = new Array(值1,值2,...)
var arr = [值1,值2,...]
注意：
- 数组的长度会自动扩展
- 数组中元素的默认值为undefined
- 使用length属性来获取数组的长度
5.2常用方法
方法 描述
sort() 排序，默认按字符编码进行升序排列，非string类型会自动转换为string，可自定义比较规则
reverse 反转，将数组元素倒序排列
join 将数组中元素使用指定的分隔符连成字符串，默认通过逗号连接
indexOf() 返回指定元素在数组中首次出现的位置
slice(beign,end) 截取数组中索引从begin到end之间的元素，左闭右开，如果省略第二个参数，则表示截取到末尾
toString 将数组转换为字符串
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*var arr = new Array();
arr[0] = 12;
arr[1] = 9;
//...
console.log(arr.length);
console.log(arr[0]);
console.log(arr[1]);*/
/*var arr = new Array('tom','jack','alice');
console.log(arr);
console.log(arr[2]);
console.log(arr[arr.length-1]);*/
/*var arr = ['tom','alice','jack','mike'];
console.log(arr[arr.length-1]);
console.log(arr[0]);*/
//将1-100之间所有被3整除的数字放到数组nums中，输出这个数组，并统计个数
/*var nums = [];
var index = 0;
for(var i = 1;i <= 100; i++)
if(i % 3 == 0){
nums[index]=i;
index++;
}
console.log(nums);*/
/*var nums = [];
for(var i=1;i<=100;i++)
if(i%3==0)
nums[nums.length] = i;
//每当向数组中添加元素时，length属性值都会改变
console.log(nums);*/
/* var arr = ['tom','jack','alice','mike'];
// var arr = [21,12,35,4,5,93,1];
console.log(arr);//未排序的结果
arr.sort();
console.log(arr);//排序后的结果*/
var arr = ['tom','jack','alice','mike','admin','jack'];
console.log(arr);
// arr.reverse();
// console.log(arr.join("-"));
console.log(arr.indexOf('jack'));
console.log(arr.lastIndexOf('jack'));
console.log(arr.slice(1,4));
console.log(arr.slice(1));
console.log(arr.toString());
</script>
</head>
<body>
</body>
</html>
5.3二维数组
二维数组可以看作一个特殊一维数组，即一维数组中的每个元素又是一个一维数组
var arr = new Array();//定义了一个具有m行个元素的特殊的一维数组
arr[0] = new Array();//第0行有n个元素
arr[1] = new Array();//第1行有n个元素
arr[][]=值;
var arr = [
[值1，值2...],
[值1，值2...],
[值1，值2...]
]
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[0][0]=12;
arr[0][1]=9;
arr[1][0]=10;
console.log(arr);*/
var arr = [
[12,51,2,6],
[1,32,12,5],
[6,43,7,23]
]
// console.log(arr);
// console.log(arr[0][1]);
//遍历元素
for(var i=0;i<arr.length;i++){
//循环输出每行的4个元素
for(var j =0;j<arr[i].length;j++)
document.write(arr[i][j]+' ');
//输出每行的换行
document.write('<br>')
}
</script>
</head>
<body>
</body>
</html>
6.函数
6.1自定义函数
语法：
function 函数名(参数1,参数2,.....)
{
函数体;
}
注意：
- 定义函数时不需要指定函数的参数类型
- 实参的个数和形参的个数可以不同，未指定实际参数时形参的默认值为undefined
- 不需要指定返回值的类型，如果有返回值，直接使用return语句返回即可
- 如果函数中没有return语句返回值，则默认人会undefined
变量的作用域：
- 局部作用域
在函数中声明的变量，只能在该函数内访问，函数运行结束变量自动销毁 - 全局作用域
在函数外声明的变量，在任何位置都可以访问 - 块级作用域
使用let关键
最低0.47元/天 解锁文章
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
