目录
一、JavaScript简介
脚本语言：不需要编译，直接经过浏览器的解释就可以运行了。
java：需要编译，源代码编译成.class文件，再给虚拟机运行。
二、js的引入方式
1、内部脚本
重点是第9-11行
2、外部脚本
三、js基础语法
1、书写语法、输出语句
除了第二点其他和 java一样
<!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>JS-基本语法</title>
</head>
<body>
<script>
window.alert("Hello JS"); //弹出框
document.write("Hello JS"); //写入HTML页面
console.log("Hello JS"); //浏览器控制台
</script>
</body>
</html>2、变量
不需要声明具体的类型
1️⃣var
特点1：var可以重复定义
特点2：var定义的变量作用域很大，是全局变量
2️⃣ let、const
let是局部变量，且不能重复定义
const声明后不能改变
3、数据类型、运算符、流程控制语句
1️⃣数据类型
2️⃣运算符
==类型转换成一样后再比较，值相同就true；===先比较类型，不一样直接false，一样才比较值，类型和值都相同才true。
3️⃣流程控制语句
语法和java一样，也可以参考官方文档
四、js函数
1、方式一
2、方式二
但是：函数接收参数时，若有n个形参，那只接受调用那里的多个参数的前n个参数
五、js对象
1、Array
1️⃣定义
特点：长度可变、类型可变，类似于java中的集合
代码
输出的结果
2️⃣属性和方法
arr.push(7,8,9)在数组末尾加上7，8，9
arr.splice(2,2)从数组索引2的位置开始删，从此往后删2个数，也就是删掉的所以2、3的数
forEach()使用演示，以及和for循环遍历的区别
for全都遍历，forEach只遍历有值的
forEach()的简化：箭头函数；和上面43-46作用相同
2、String
1️⃣定义
2️⃣属性和方法
<!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>JS-对象-String</title>
</head>
<body>
</body>
<script>
//创建字符串对象
//var str = new String("Hello String");
var str = " Hello String ";
console.log(str);
//length
console.log(str.length);
//charAt
console.log(str.charAt(4));//求索引4的元素
//indexOf
console.log(str.indexOf("lo"));//求lo的开始索引
//trim
var s = str.trim();
console.log(s);
//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
console.log(s.substring(0,5));
</script>
</html> 结果：
3、JSON
1️⃣JavaScript自定义对象
2️⃣JSON介绍、基础语法
作用：方便前后端传输数据
key必须用双引号圈起来
转化成对象，才能用对象的操作方式，用.属性名和来获取数据
4、BOM
Window对象：就是图中显示的浏览器的整个部分，上面那个浏览器的图片所包含的区域
Location对象：就是上面baidu.com那一个灰色的横条
1️⃣Window浏览器窗口对象
2️⃣Location地址栏对象
<!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>JS-对象-BOM</title>
</head>
<body>
</body>
<script>
//获取
window.alert("Hello BOM");
alert("Hello BOM Window");
//方法
//confirm - 对话框 -- 确认: true , 取消: false
var flag = confirm("您确认删除该记录吗?");
alert(flag);
//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);
//定时器 - setTimeout -- 延迟指定时间执行一次
//setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(function(){
alert("JS");
},3000);
//location
alert(location.href);//获取当前浏览器的地址
location.href = "https://www.itcast.cn";//设置地址栏的url，并且自动跳转到该地址
</script>
</html>5、DOM
1️⃣定义
2是1的子集，3是1的拓展
2️⃣用DOM如何获取指定的元素对象
3️⃣案例
<!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>Dom案例</title>
</head>
<body>
<img id="h1" src="./img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby" value="电影">电影
<input type="checkbox" name="hobby" value="旅游">旅游
<input type="checkbox" name="hobby" value="游戏">游戏
</body>
<script>
//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
//a. 获取img元素对象
var img = document.getElementById('h1');
//b. 设置src属性
img.src = './img/on.gif';
//2.将所有div标签的内容后面加上：verygood（红色字体）
var divs = document.getElementsByTagName("div");
for (let i = 0; i < divs.length; i++) {
const div = divs[i];
div.innerHTML += "<font color = 'red' >very good</font>";
}
//3.使所有的复选框呈现选中状态
var checks = document.getElementsByName('hobby');
for (let i = 0; i < checks.length; i++) {
const check = checks[i];
check.checked = true;
}
</script>
</html>六、js事件监听
如果让事件发生之后（如鼠标移动到某个html元素上了，键盘按下了，表单提交了），执行相应的代码
1、事件绑定
2、常见事件
3、案例
<!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>事件监听案例</title>
</head>
<body>
<img id = "light" src="./img/off.gif"> <br>
<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()"><br><br>
<input id="name" type="text" value="ITCAST" onfocus="lower()" onblur="upper()"><br><br>
<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏<br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">
</body>
<script>
//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
function on(){
var img = document.getElementById('light');
img.src = "./img/on.gif";
}
function off(){
var img = document.getElementById('light');
img.src = "./img/off.gif";
}
//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
function lower(){
var input = document.getElementById('name');
input.value = input.value.toLowerCase();//toLowerCase()是字符串的方法
}
function upper(){
var input = document.getElementById('name');
input.value = input.value.toUpperCase();//toLowerCase()是字符串的方法
}
//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
function checkAll(){
var hobbys = document.getElementsByName('hobby');
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = true;
}
}
function reverse(){
var hobbys = document.getElementsByName('hobby');
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = false;
}
}
</script>
</html>
4439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
