JavaScript基础
JavaScript：跨平台、面向对象的脚本语言
（脚本语言：不需要编译，浏览器解释完直接运行）
作用：控制网页行为，使网页可交互
ps：JavaScript与Java是两门完全不同的语言
本文为学习黑马程序员JavaWeb开发教程中JS部分学习笔记
文章目录
一、JS引入方式
JS代码与html页面代码的结合方式
1.内部脚本
将JS代码定义在HTML中
写<script></script>标签，将JS代码写在该标签内（该标签可写在任意地方，任意数量，一般写在<body>标签底部）
<script>
alert("Hello JavaScript")
</script>
2.外部脚本
将JS代码定义在外部JS文件中，然后引入到HTML页面中
二、JS基础语法
1.书写语法
-
区分大小写
-
每行结尾分号可有可无（建议写）
-
注释：
- 单行注释：//注释内容（Ctrl+/）
- 多行注释：/* 注释内容 */ （Ctrl+Shift+/）
-
输出语句：
-
使用window.alert()写入警告框
-
使用document.write()写入HTML输出
-
使用console.log()写入浏览器控制台
-
2.变量
JavaScript是一门弱类型语言，变量可以存放不同类型的值
-
var关键字声明全局变量，可以重复定义
-
let关键字声明局部变量，不可重复定义
-
const关键字定义常量，不能改变
3.数据类型、运算符、流程控制语句
定义变量时不需要指定数据类型，但JS中是有数据类型的
（1）数据类型
- 原始类型
- number
- string：单双引号都可
- boolean
- null：对象为空
- undefined：当声明的变量未初始化时，该变量的默认值是undefined
- 引用类型
- 对象
- 数组
- 函数
- 正则
- 日期
使用typeof运算符可以获取数据类型
var a=20;
alert(typeof a);
-
类型转换
-
其他类型—>数字
使用parseInt()
alert(parseInt("12")); //12 alert(parseInt("12A45")); //12(从左到右，不是数字为止) alert(parseInt("A45")); //NaN(not a number) -
其他类型—>boolean
除了0、NaN、空字符串、Null、undefined为false，其他都为true
-
（2）运算符
-
算术运算符：+，-，*，/，%，++，–
-
赋值运算符：=，+=，-=，*=，/=，%=
-
比较运算符：>，<，>=，<=，!=，==，===（==会进行类型转换，===不会进行类型转换）
（3）流程控制语句
- if…else if…else
- switch
- for
- while
- do…while
三、JS函数
1.定义函数：
function 函数名(参数,...){
函数内容;
return 返回值;
}
var 函数名=function(参数,...){
函数内容;
return 返回值;
}
2.调用函数：
var result = 函数名(参数,...)
（函数调用时可以传递任意个参数）
示例：
//定义函数-1
function add(a,b){
return a+b;
}
//定义函数-2
var add = function(a,b){
return a+b;
}
//函数调用
var result = add(10,20);
四、JS对象
1.Array
Array对象用于定义数组。
（1）定义数组
①var arr=new Array(1,2,3,4);
②var arr=[1,2,3,4];
（2）特点
长度可变，类型可变
（3）属性
length
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
（4）方法
①forEach() ：遍历数组中有值的元素
arr.forEach(function(e)){
console.log(e);
}
②push() ：添加元素到数组末尾
eg. arr.push(7,8,9);
③splice() ：删除元素
arr.splice(start,count);
eg. arr.splice(2,2);
（5）ES6 箭头函数：
(…) => {…} 简化函数定义
arr.forEach((e)) => {
console.log(e);
}
2.String
（1）定义字符串
①var str=new String("Hello String");
②var str="Hello String";
（2）属性
length
console.log(str.length);
（3）方法
①charAt() ：返回在指定位置的字符
console.log(str.charAt(4));
②indexOf() ：检索字符串的位置
console.log(str.indexOf("lo"));
③trim() ：去除字符串中的空格
var s=str.trim(); console.log(s);
④substring() ：截取字符串，含头不含尾
console.log(s.substring(0,5));
3.JSON
JavaScript自定义对象
定义格式：
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3
函数名: function(形参列表){}
函数名(形参列表){} //简写
}
调用格式：
对象名.属性名
对象名.函数名()
JSON是通过JavaScript对象标记法书写的文本
因其语法简单、层次结构鲜明，多用于作为数据载体，在网络中进行数据传输（前后端）
（1）定义JSON
var 变量名 = ‘{“key1”:value1,“key2”:value2}’;
eg.var jsonstr={"name":"Tom","age":10,"addr":["北京","上海"]}; alert(jsonstr.addr[1]);
（2）JSON字符串—>JS对象
使用parse()方法
eg.var ovj=JSON.parse(jsonstr); alert(obj.name);
（3）JS对象—>JSON字符串
使用stringify()方法
eg.JSON.stringify(obj);
4.BOM
浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象
（1）组成
①Window：浏览器窗口对象
-
获取：
直接使用window，其中window.可以省略
eg.
window.alert("Hello Window");alert("Hello Window"); -
属性：
（用来获取其他BOM对象）
history：对History对象的只读引用
location：用于窗口或框架的Location对象
navigator：对Navigator对象的只读引用
-
方法：
alert()：显示带有一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
//confirm - 对话框 //确认：true，取消：false var flag=confirm("您确认删除该记录吗？");setlnterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
//setInterval - 定时器 //周期性的执行某一函数 var i=0; setInterval(function(){ i++; console.log("定时器执行了"+i+"次"); },2000);setTimeout()：在指定的毫秒数后调用函数或计算表达式
//setTimeout - 定时器 //延迟指定时间执行一次 setTimeout(function(){ alert("JS"); },3000);
②Navigator：浏览器对象
③Screen：屏幕对象
④History：历史记录对象
⑤Location：地址栏对象
-
获取：
使用window.location获取，其中window.可以省略
window.location.属性location.属性 -
属性：
href：设置或返回完整的URL
alert(location.href);//弹出当前地址栏的URL信息location.href="http://www.itcast.cn";//跳转到该地址
5.DOM
（1）概念：文档对象模型
（2）将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
（3）JavaScript通过DOM，就能够对HTML进行操作
//1.获取Element元素
//1.1 获取元素 - 根据ID获取
var img=document.getElementById('h1');
alert(img);//返回单个对象
//1.2 获取元素 - 根据标签获取
vardivs=document.getElementsByTagName('div');
for(let i=0;i<divs.length;i++){
alert{divs[i]};
}//返回数组
//1.3 获取元素 - 根据name属性获取
var ins=document.getElementsByName('hobby');
for(let i=0;i<ins.length;i++){
alert(ins[i]);
}//返回数组
//1.4 获取元素 - 根据class属性获取
var divs=document.getElementsByClassName('cls');
for(let i=0;i<divs.length;i++){
alert(divs[i]);
}//返回数组
//2.查询参考手册，属性、方法
//<a scr=>参考手册链接<\a> !!!!!!!!
var divs=document.getElementsByClassName('cls');
var div1=divs[0];
div1.innerHTML='hello';
案例：
要求：
代码：
<!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-对象-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"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
</body>
<script>
//1. 点亮灯泡 : src 属性值
var img = document.getElementById('h1');
img.src = "img/on.gif";
//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
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 ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
const check = ins[i];
check.checked = true;//选中
}
</script>
</html>
五、JS事件监听
事件：HTML事件是发生在HTML元素上的“事情”。
比如：按钮被点击、鼠标移动到元素上、按下键盘按钮…
事件监听：JavaScript可以在事件被侦测到时执行代码
事件绑定：
方法一：通过HTML标签中的事件属性进行绑定
<body>
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
</body>
<script>
function on(){
alert("按钮1被点击了...");
}
</script>
方法二：通过DOM元素属性绑定
<body>
<input type="button" id="btn2" value="事件绑定2">
</body>
<script>
document.getElementById("btn2").onclick=function(){
alert("按钮2被点击了...");
}
</script>
常见事件：
//onload:页面加载完毕
function load(){
console.log("页面加载完毕...");
}
//在HTML标签上添加属性onload="load()"
//onclick:鼠标点击
function fn1(){
console.log("我被点击了");
}
//在HTML标签上添加属性onclick="fn1()"
//onblur：失去焦点
function bfn(){
console.log("失去焦点...");
}
//在HTML标签上添加属性onblur="bfn()"
//onfocus:元素获得焦点
function ffn(){
console.log("获得焦点...");
}
//在HTML标签上添加属性onfocus="ffn()"
//onkeydown:某个键盘的键被按下
function kfn(){
console.log("键盘被按下了...");
}
//在HTML标签上添加属性onkeydown="kfn()"
//onmouseover:鼠标移动到元素上
function over(){
console.log("鼠标移入了...");
}
//在HTML标签上添加属性onmouseover="over()"
//onmouseout:鼠标移出某元素
function out(){
console.log("鼠标移出了...");
}
//在HTML标签上添加属性onmouseout="out()"
//onsubmit:提交表单
function subfn(){
alert("表单被提交了...");
}
//在HTML标签上添加属性onsubmit="subfn()"
案例：
要求：
代码：
<!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>
<img id="light" src="img/off.gif"> <br>
<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()">
<br> <br>
<input type="text" id="name" 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(){
//a. 获取img元素对象
var img = document.getElementById("light");
//b. 设置src属性
img.src = "img/on.gif";
}
function off(){
//a. 获取img元素对象
var img = document.getElementById("light");
//b. 设置src属性
img.src = "img/off.gif";
}
//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
function lower(){//小写
//a. 获取输入框元素对象
var input = document.getElementById("name");
//b. 将值转为小写
input.value = input.value.toLowerCase();
}
function upper(){//大写
//a. 获取输入框元素对象
var input = document.getElementById("name");
//b. 将值转为大写
input.value = input.value.toUpperCase();
}
//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
function checkAll(){
//a. 获取所有复选框元素对象
var hobbys = document.getElementsByName("hobby");
//b. 设置选中状态
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = true;
}
}
function reverse(){
//a. 获取所有复选框元素对象
var hobbys = document.getElementsByName("hobby");
//b. 设置未选中状态
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = false;
}
}
</script>
</html>