一、JavaScript简介
1.什么是JavaScript
JavaScript简称JS,由网景公司开发的客户端脚本
语言,不需要编译,可以直接运行。
Web前端三层:
- 结构层HTML,定义页面的结构
- 样式层CSS,定义页面的样式
- 行为层JavaScript用来实现交互,提升用户的体验
2.JavaScript作用
- 在客户端浏览器上动态的操作页面
- 在客户端浏览器上作数据的校验
- 在客户端上发送异步请求
二、引用方式
1.内联方式
在页面中使用script标签,在script标签中编写js代码
script标签可以放在页面的任意位置,一般放在head中
<script>
js代码
</script>
2.行内方式
在普通标签中编写js代码,一般需要结合事情的属性,如:onclick、onmouseover等
提示:什么是事件属性?……面向对象
eg:对象……外观修饰……CSS实现
行为、事件……某一事件发生的对象不一样,所引发的反应也不相同 多态性
<!--2.行内方式-->
<input type="button" value="点我" οnclick=alert("我被点,晕了")>
<!--<a href="" οnclick="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">
<meta charset="UTF-8">
<title>Title</title>
</head>
<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="点我" οnclick=alert("我被点,晕了")>
<!--<a href="" οnclick="alert('超链接被触发了')">超链接</a>-->
<a href="javascript:alert('超链接被触发')">超链接</a>
<div onmouseover="alert('走开')">把鼠标移上来</div>
</body>
</html>
js中的代码;
alert('哈哈');
案例;
三、基本语法
1.变量
变量是用来存储常量的量
常量就是固定值……常数项
js是一门弱类型语言,声明变量时使用var关键字,不需要之ID那个变量的类型
语法: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>
<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(姓名);
// 1_age = 18; //数字开头的最后不显示(后台显示为错误)
Age = 19;
// alert(1_age);
alert(Age);
</script>
</head>
<body>
</body>
</html>
案例:
2、输入和输出
输出:
- alert()弹出警告框
- console.log()输出到浏览器的控制台
- document.write()输出到页面
输入:
-
prompt()弹出输入框,获取用户输入的数据
使用
typeof变量
判断变量的类型使用
Number(变量)
将字符串转换为数值
3、转义字符
常用转义字符:
\n
换行\t
缩进\"
双引号\'
单引号\\
斜杠
4、注释
单行注释://
多行注释:/* 注释内容 */
5、编码规范
代码是区分大小写的
每个语句以分号结尾
代码缩进
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本语法</title>
<script>
//输出信息
// alert("嘿嘿");
// console.log("哈哈");
// document.write("嘻嘻");
// 输入
// var name=prompt("请输入你的姓名");
// console.log(name);
// var age=prompt("请输入你的年龄:");
// console.log(age,typeof age);
// age = Number(age);
// console.log(age,typeof age);
// console.log(age+2);
// 转义字符
console.log("he\'llo\n world"); // \n表示换行
// 注释
// 这是单行注释
/*
这是多行注释
*/
</script>
</head>
<body>
</body>
</html>
案例:
四、核心语法
1、数据类型
常量:具体值,不变的量……常数项
变量:变化的值,存储常量的量
基础数据类型:
- string字符串
- number数值(NaN表示非数字Not a Number,其自身是number类型,表示数值的不正常状态)
- boolean布尔
- null空类型
- undefined未定义类型
类型转换
-
转换number
使用Number()、parselnt()、perseFloat()
-
转换为字符串
拼接空字符串
-
转换为布尔boolean
使用Boolean
注:0、空字符串、null、undefined、NaN会被转换为false,其他值会被转换为true
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型</title>
<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('12abc');
// a = Number('abc12');
//2.方式二:parseInt()
// a = parseInt('12');
// a= parseInt('12.5'); //在转换时 会去掉小数部分
// a = parseInt('12abc'); //按照字符的顺序依次分析
// a = parseInt('abc12');
//3.方式三:parseFloat
// a = parseFloat('12');
// a = parseFloat('12.5');
// a = parseFloat('12abc');
// a = parseFloat('abc12');
//将数值转换为字符串
// var a = 12;
// console.log(a,typeof a);
// a = a + ''; //后接一个空字符串
// console.log(a,typeof a);
//将布尔类型的值转换为数字
// var a;
// a = Number(false); //在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>
</head>
<body>
</body>
</html>
案例:
2、运算符
算术运算符:+、-、*、/、%求余、**乘方、++、–
比较运算符:>、>=、<、<=、、=、!=
赋值运算符:=、+=、-=、*=、/=、%=
逻辑运算符:&&并且、||或者、!非
条件运算符:条件?表达式1:表达式2
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
<script>
//算数运算符
//+、-、*、/、%求余、**乘方、++、--
// var a = 5;
// var b = 3;
// var c = '2';
// 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为数字字符时,会自动将数字字符转换为数值
// console.log(a+d);
// var a = 1;
// console.log(a++); //先使用a 中的值,再让a 自加,在原值的基础上加1减1 表达式会返回变化前 a 的值,然后自加 a = + 1
// console.log(a);
// console.log(++a); //表达式返回变化后 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 = 20;
b = 5;
console.log(a && b); //0---false
console.log(a || b);
//5.条件运算符
console.log(a>b?a+b:a-b);
</script>
</head>
<body>
</body>
</html>
案例:
运算的其他方式:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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,2,55,5,-3));
console.log(Math.min(23,2,55,5,-3));
//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>
<script>
//if …… else语句
var age = 25;
if(age>=60)
{
console.log('老年');
}
else if(age>=30)
{
console.log('中年');
}
else if(age>=16)
{
console.log('少年');
}
else
{
console.log('童年');
}
//switch语句
var day = '星期五' ;
switch(day){
case'星期一':
console.log('吃油条');
break;
case'星期二':
console.log('吃包子');
break;
case'星期三':
case '星期四':
console.log('吃饼子');
break;
case'星期五':
console.log('吃条子');
break;
default:
console.log('减肥!');
break;
}
</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>
<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);
//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(begin,end) | 截取数组中索引从begin到end之间的元素,左闭右开,如果省略第二个参数,则表示截取到末尾 |
toString | 将数组转换为字符串 |
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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]);
// console.log(arr[arr.length]);
//第三种方式
// 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);
/*
一维数组常用的方法
*/
// sort()的方法:正序排列
// 1.字母
// var arr = ['tom','jack','alice','mike'];
// console.log(arr); //未排序的输出结果
// arr.sort();
// console.log(arr); //排序后的输出结果
// 2.数字(了解即可)
// var arr = ['11','55','1','5425','515'];
// console.log(arr); //未排序的输出结果
// arr.sort();
// console.log(arr); //排序后的输出结果
// reverse的方法:倒叙排列
// var arr = ['tom','jack','alice','mike'];
// console.log(arr); //未排序的输出结果
// arr.reverse();
// console.log(arr); //排序后的输出结果
//join的方法:默认为逗号进行连接
// var arr = ['tom','jack','alice','mike'];
// console.log(arr); //未排序的输出结果
// console.log(arr.join('-')); //排序后的输出结果
//indexOf()
// var arr = ['tom','jack','alice','mike','jack','alice'];
// console.log(arr);
// console.log(arr.indexOf('jack'));
// console.log(arr.lastIndexOf('jack'));
//slice(start,end)
// var arr = ['tom','jack','alice','mike','jack','alice'];
// console.log(arr);
// console.log(arr.slice(1,5));
// console.log(arr.slice(1));
toString()
var arr = ['tom','jack','alice','mike','jack','alice'];
console.log(arr);
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>
<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,54,5,69],
[1,24,56,2],
[9,65,22,8]
];
// 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关键字声明的变量,只能在声明它的代码内访问
代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义函数</title>
<script>
/*
自定义函数
*/
//1.定义函数
// function show()
// {
// console.log('嘿嘿');
// }
//
// function calc(num1,num2,num3) //形式参数
// {
// // console.log(num1,num2,num3);
// var sum = num1+num2+num3;
// // console.log(sum);
// return sum;
// }
//2.调用函数 有2个功能 1:返回值 2:执行函数体为目的 来实现某一具体功能
// show();
// var result = calc(12,6,3,5); //实际参数
// console.log(result);
//3.变量的作用域
// var c = 6; //全局变量(在函数外进行定义的变量)
// function fn()
// {
// var a = 5; //局部变量(在函数中进行定义的变量)
// console.log(a);
// console.log(c);
// } //定义函数
// fn(); //调用函数
function fn()
{
if(true)
{
var a = 5; //局部变量
// let a = 5; //块级变量
console.log(a);
}
console.log(a);
}
fn();
// {
// var d = 2; //全局变量
// let x = 4;
// console.log(x);
// }
// console.log(d);
// console.log(a);
// console.log(c);
</script>
</head>
<body>
</body>
</html>
代码:
6.2回调函数
不立即执行的函数调用,满足一i的那个条件时 会执行或者由别的代码调用执行,称为 回调函数callback,调用时 只写函数名,没有小括号和参数
应用:
- 作为事件绑定的函数
- 作为另一个函数的参数
代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回调函数</title>
<script>
function f1()
{
console.log('111');
}
// f1();
//当我们单机窗口时执行f1函数
// window.onclick = f1;
/*
函数本身也是一种数据类型
数据类型有:string、number、boolean、null、undefined、function
*/
// console.log(typeof f1);
var a = f1