一、 JavaScript概述
1、JS作用
JS用于完成页面与用户的交互功能.
2、JS的特点
JS不需要编译,由浏览器直接解释执行.
js是弱类型语言,js变量声明不需要指明类型,不同类型的数据可以赋值给同一变量. 如:let a = true; a = "abc";
3、JS组成
ECMA Script js的基础语法
BOM(Brower Object Model) 浏览器对象模型
DOM(Document Object Model) 文档对象模型
JavaScript = ECMA + BOM + DOM
二、 JavaScript基础语法
2.1、JS脚本的3种引入方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-HTML引入JS</title>
</head>
<body>
<!--
js代码的3种引入方式:
1、内嵌方式
<script type="text/javascript">
</script>
此代码可以放在页面的任何位置。
2、外部方式
<script src="js/myJs.js"></script>
注:
1、引入外部文件,标签不能写成单标签
2、引入外部文件时,标签内不能写js代码。
3、行内方式
<input type="button" value="点我" onclick="alert('点我干嘛?')">
-->
<script type="text/javascript">
document.write("内部引入方式"); //向页面输出文本
</script>
<script src="js/myJs.js"></script>
<input type="button" value="点我" onclick="alert('点我干嘛?')">
</body>
</html>
2.2、JS三种输出方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-JS三种输出方式</title>
</head>
<body>
<!--
JS三种输出方式
1. 浏览器弹框输出字符 它会阻塞程序执行。
2. 输出html内容到页面
3. 输出到浏览器控制台 开发人员专属语句。
-->
<script>
alert("弹框输出字符");
document.write("输出内容到页面");
console.log("输出到浏览器控制台");
</script>
</body>
</html>
2.3、JS变量声明
java是强类型语言,注重变量的定义,所以在java中定义变量类型的方式如下:
// 整型
int i = 1314;
// 浮点型
double d = 521.1314;
// 字符型
char c ='c';
// 字符串型
String str = "用心做教育";
//布尔型
boolean b = true;
// 常量
final Integer PI = 3.14;
js是弱类型语言,不注重变量的定义,所以在js中定义变量的类型方式如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-JS变量声明</title>
</head>
<body>
<!--
java中变量的声明:
// String str = "用心做教育";
// int i = 1314;
// double d = 521.1314;
// final Integer PI = 3.14;
// boolean b = true;
js中的数据类型:
支持2种:
1、常量
使用const
2、变量
统一使用let声明变量,它看不出是什么类型,当赋值值时才知道是什么类型。
-->
<script>
//常量
const a = 10;
//a = 20;
console.log(a); //使用变量名.log 可以自动补全代码
//变量
let b = 10;
b = 20.5;
b = "abc";
console.log(b);
let t = typeof b;
console.log(t);
</script>
</body>
</html>
idea设置ES6的支持
2.4、JS数据类型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-JS数据类型</title>
</head>
<body>
<!--
JS数据类型
一、原始类型
1. string 字符串类型
2. number 数字 包括整数和小数类型
3. boolean 布尔类型 值只有 true和false 两个
4. object 对象为null
5. undefined 变量未赋值
二、引用类型(对象)
所有对象都是继承object
-->
<script>
let s = "abc";
console.log(s);
console.log(typeof s); // string
let n = 10;
console.log(n);
console.log(typeof n); // number
let b = true;
console.log(b);
console.log(typeof b); // boolean
let o = null;
console.log(o);
console.log(typeof o); //object
let u ;
console.log(u);
console.log(typeof u); //undefined
//创建一个数组对象类型
let a = new Array("a","b",10);
console.log(a);
console.log(typeof a);
</script>
</body>
</html>
2.5、JS运算符【记住不同点】
js与java的运算符基本一样,算数运算符、赋值运算符、逻辑运算符等等,不需要死记硬背,写程序会用就行:
1. 算数运算符
+ - * / % ++ --
2. 赋值运算符
= += -= *= /= %=
3. 比较运算符
> < >= <= == != js中 === !==
4. 逻辑运算符
&& || !
5. 三元(目)运算符
表达式? 结果1: 结果2;
关注js与java区别的运算符
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-JS运算符</title>
</head>
<body>
<script>
// 比较运算符
let a = 10;
let b = "10";
console.log(a==b); //true 在js中,==比较值,不看类型
console.log(a===b); //false 即比较类型,又比较值。
console.log(a!==b); //true
</script>
</body>
</html>
2.6、JS流程控制语句
高级语言中的三种基本结构:顺序、分支、循环
① 条件判断
if(条件表达式){
输出内容
}else if(条件表达){
输出内容
}else{
输出内容
}
switch(变量){
case 1:
输出内容
break;
case 2:
输出内容
break;
default:
输出内容
break;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-条件判断</title>
</head>
<body>
<!--
判断语句的条件, 在java中都必须是结果为boolean的表达式
js中的任何类型,在判断条件,自动转换成boolean
1. number
非0为true, 0为false
2. string
非空串为true, 空串为false
3. null
false
4. undefined
false
-->
<script>
let a = undefined;
if(a){ // a==true
console.log(true);
}else{
console.log(false);
}
</script>
</body>
</html>
② 循环语句
1. 普通for循环
for(let i=0; i<10;i++){
}
2. 增强for循环
for(let e of arr){
}
3. 索引for循环
for(let index in arr){
}
4. while循环
while(条件表达式){
内容
}
5. do..while循环
do{
内容
}while(条件);
6. break和continue
break: 跳出整个循环
continue:跳出本次循环,继续下次循环
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-循环语句</title>
</head>
<body>
<!--
1. 普通for循环
for(let i= 0; i<10; i++){
需要执行的代码;
}
2. 增强for循环
for(let element of array){
element表示被遍历对象/集合每个元素
}
3. 索引for循环
for(let index in array){
index表示 对象/数组 索引
}
java中的数组:int[] arr = {1,2,3};
let array = ["a","b","c"]; //js数组符号是中括号,不是大括号
-->
<script>
let array = ["a","b","c"]; //js数组符号是中括号,不是大括号
// 1. 普通for循环
/*for(let i = 0; i<10; i++){
console.log(i);
}*/
for(let i =0; i<array.length; i++){
console.log(array[i]);
}
//2. 增强for循环
for(let e of array){
console.log(e);
}
// 3. 索引for循环
for(let index in array){
console.log(array[index]);
}
</script>
</body>
</html>
3、 JS函数【方法】
功能:JS的函数就是方法。
3.1、普通函数【重点】
语法
function 函数名(参数列表){
函数体;
[return 返回值;] // 中括号意思表示内容可以省略....
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-普通函数</title>
</head>
<body>
<!--
java中的方法:
访问修饰符 返回值类型 方法名(参数列表){
方法体
}
Js中的方法
function 方法名(参数列表){ 参数不需要定义类型
方法体。
如果有返回值,直接return.
}
定义方法的形式:
1、无参无返回值
2、无参有返回值
3、有参有返回值
注:
1、方法如果有返回值,直接return
2、js中没有方法重载
-->
<script >
//1、无参无返回值
function method1(){
console.log("无参无返回值的方法");
}
//调用方法
method1();
//2、无参有返回值
function method2(){
return "无参有返回值的方法";
}
let result = method2();
console.log(result);
//3、有参有返回值
function method3(a,b){
return a+b;
}
let sum = method3(2, 3);
console.log(sum);
//js中没有方法重载
/*function method4(a,b){
return "aaaaaaaa";
}*/
function method4(a,b,c){
return a+b+c;
}
let aa = method4(2,3);
console.log(aa);
</script>
</body>
</html>
3.2、匿名函数
通常与事件结合使用,咱们现在先来看一下语法。。。。
function (参数列表){
函数体;
[return 返回值;] // 中括号意思表示内容可以省略....
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-匿名函数</title>
</head>
<body>
<!--
Js中的普通方法
function 方法名(参数列表){ 参数不需要定义类型
方法体。
如果有返回值,直接return.
}
匿名方法: 匿名方法其实是一个特殊的变量
function (参数列表){
方法体
如果有返回值,直接return.
}
-->
<script>
//普通方法
function method1(){
console.log("无参无返回值的方法");
}
method1();
//匿名方法
let method2 = function(a,b){
console.log("匿名方法"+ (a+b));
}
method2(2,3);
</script>
</body>
</html>
四、 JS事件【重点】
事件(event):JS可以监听用户的行为,并调用函数来完成用户交互功能.
js : 事件驱动型语言
网页中一切可以被检测到的行为 -> 事件
4.1、常用事件
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件 (double: 时间间隔很短两次单击)
2. 焦点事件
1. onblur:失去焦点
2. onfocus:元素获得焦点。
3. 加载事件:
1. onload:页面加载完成后立即发生。
4. 鼠标事件:
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 改变事件
1. onchange 域的内容被改变。
7. 表单事件:
1. onsubmit 提交按钮被点击。
4.2、事件绑定
将事件与html标签进行绑定,实现交互功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-事件绑定</title>
</head>
<body>
<input type="button" value="普通函数" onclick="method1()"> <br>
<input type="button" value="匿名函数" id="bun"> <br>
<script>
//普通方法
function method1(){
alert("调用了普通方法");
}
//根据id得到按钮对象。
let input = document.getElementById("bun");
//给标签元素绑定事件,并调用匿名方法
input.onclick = function(){
alert("调用了匿名方法");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-事件绑定</title>
<script>
//普通方法
function method1(){
alert("调用了普通方法");
}
//页面加载完成后执行的事件
//注:onload事件是唯一一个不用用户操作的事件。
window.onload = function(){
//根据id得到按钮对象。
let input = document.getElementById("bun");
//给标签元素绑定事件,并调用匿名方法
input.onclick = function(){
alert("调用了匿名方法");
}
}
</script>
</head>
<body>
<input type="button" value="普通函数" onclick="method1()"> <br>
<input type="button" value="匿名函数" id="bun"> <br>
</body>
</html>
五、 JS常用内置对象【知道】
内置对象: js提供好的对象, 开发者直接可以创建对象,并使用
5.1、Array 对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>11-数组</title>
</head>
<body>
<!--
java中的数组:
int[] arr = new int[5];
int[] arr = new int[]{12,32,15};
int[] arr = {12,24,14,56};
数组
查询手册完成:
1. 创建数组
let arr = new Array();
let arr = new Array(5); //定义长度
let arr = new Array("aa","bb","ccc");
let arr = ["aa","bb",123,true]; //推荐
2. 数组常用方法
length 属性
sort() 对数组的元素进行排序
-->
<script>
let arr1 = new Array();
console.log(arr1);
console.log(arr1.length);
let arr2 = new Array(5);
console.log(arr2);
console.log(arr2.length); // 5
let arr3 = new Array("aa","bb",12,true);
console.log(arr3);
console.log(arr3.length);
for(let e of arr3){
console.log(e);
}
let arr4 = ["aa","bb",123,true]; //推荐
arr4[5] = "dd";
console.log(arr4);
console.log(arr4.length);
for(let e of arr4){
console.log(e);
}
let arr5 = [1,9,6,5,3];
console.log(arr5.sort());
function sortNumber(a,b)
{
return b - a
}
var arr = new Array(6)
arr[0] = 10
arr[1] = 5
arr[2] = 40
arr[3] = 25
arr[4] = 1000
arr[5] = 1
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
</body>
</html>
5.2、Date 对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>12-日期</title>
</head>
<body>
<!--
创建日期对象:
var myDate=new Date()
方法:
getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
-->
<script>
var myDate=new Date();
console.log(myDate);
console.log(myDate.toLocaleString());
console.log(myDate.getFullYear()); // 2020
console.log(myDate.getMonth()+1+"月"); // 11月
console.log(myDate.getDate()+"日"); // 13日
console.log(myDate.getTime()); // 毫秒
</script>
</body>
</html>
5.3、Math 对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>13-数学</title>
</head>
<body>
<body>
<!--
数学运算
查询手册完成
1. 四舍五入 round()
2. 向下取整 floor()
3. 向上取整 ceil()
4. 产生随机数 random() :返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1
-->
<script >
let n = 1234.567
//1. 四舍五入取整
console.log(Math.round(n)); //1235
//2. 向下取整
console.log(Math.floor(n)); //1234
//3. 向上取整
console.log(Math.ceil(n)); // 1235
//4. 产生随机数
console.log(Math.random());
//5. 产生 [1,10]的随机整数
let m =Math.random()*10
console.log(Math.ceil(m));
</script>
</body>
</html>
5.4、全局函数 (了解)
我们不需要通过任何对象,可以直接调用的就称为全局函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>14-全局函数</title>
</head>
<body>
<!--
全局函数
1. 字符串转为数字
parseFloat() 解析一个字符串并返回一个浮点数。
parseInt() 解析一个字符串并返回一个整数。
2. 对字符串编码和解码
encodeURI() 把字符串编码为 URI。
decodeURI() 解码某个编码的 URI。
3. 把字符串当做js表达式来执行
eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。
4. isNaN() 检查某个值是否是数字。是数字返回 false 不是数字返回true
-->
<script >
let str1 = "123adsf";
let result = parseInt(str1) + 4;
console.log(result);
let str2 = "123.1";
let result2 = parseFloat(str2) + 4;
console.log(result2);
let s = encodeURI("张三"); // %E5%BC%A0%E4%B8%89
console.log(s);
let s2 = decodeURI(s); // 张三
console.log(s2);
let sum = eval("2*3");
console.log(sum);
console.log(isNaN("123")); //true
</script>
</body>
</html>