快速入门
1. Javascript概述和分类
概述
Javascript是一门客户端脚本语言。
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言:不需要编译,直接就可以被浏览器解析执行了
分类
- ECMAScript:主要讲述javascript的基础语法。
- DOM:document object model 文档对象模型,有一些api用来操作html页面的标签
- BOM:browser object model 浏览器对象模型,有一些api用来和浏览器打交道。
2. javascript的引入方式(重要)
方式1:内部js
在html页面将js代码写到一组<script>标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的两种引入方式</title>
</head>
<body>
<!--方式1:内部js-->
<script>
alert("hello js");
</script>
</body>
</html>
方式2:外部文件
【第一步】将js代码写到一个xxx.js文件。
alert("hi js");
【第二步】在html页面的script标签中使用src属性引入xxx.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的两种引入方式</title>
</head>
<body>
<!--方式2:引入js文件-->
<script src="js/my.js"></script>
<script src="js/my.js"/>//错误
</body>
</html>
注意:如果script标签中使用了src属性引入了外部js文件,那么这组script标签体中就不能再写js代码,不会执行,只能重新在使用一组script标签写js代码。
基本语法
1. 注释
js中的注释只有两种,和Java中的注释一样
1.1 单行注释:快捷键ctrl+/
//单行注释内容
1.2 多行注释:快捷键ctrl+shift+/
/*
多行注释内容
*/
2 输入输出语句
2.1 输入语句
//输入框
var num = prompt("请输入一个整数:"); //var 表示声明变量的关键字
//弹出警告框
alert(num);
2.2 输出语句
alert(num); //以弹框的方式输出
console.log("接收到的整数是:"+num);// 展示到浏览器的控制台中,需要使用F12或者fn+F12打开浏览器的控制台
document.write("接收到的整数是:"+num+"<br>"); //展示到浏览器的页面上,<br>标签表示换行
3. 变量和常量【重要】
3.1变量,使用let关键字
js属于弱类型语言,定义变量时不区分具体的数据类型。
//1.定义局部变量
let name ="张三";
let age = 21;
document.write(name+","+age+"<br>");
//2.定义全局变量
{
l2="bb";
}
document.write(l2+"<br>");
3.2常量,使用const关键字
//定义常量,使用const关键字
const PI=3.1415926
console.log("PI="+PI);
PI=10; //常量不能被修改
4 .数据类型和typeof(重要)
4.1 原始数据类型
数据类型 | 说明 |
---|---|
boolean | 布尔类型,true或者false |
null | 声明null值的特殊关键字 |
undefined | 代表变量未定义 |
number | 整数或浮点数 |
string | 字符串 |
bigint | 大整数,例如let num =10n; |
typeof 用于判断变量的数据类型
let l4 = 10;
document.write(typeof(l4) + "<br>"); // number
代码实现
<script>
let l1 = true;
document.write(typeof (l1)+"<br>");//boolean
let l2 = null;
document.write(typeof (l2)+"<br>");//object js原始的一个错误
let l3;
document.write(typeof (l3)+"<br>");//undefined
let l4 = 100;
document.write(typeof (l4)+"<br>");//number
let l5 = "hello";
document.write(typeof (l5)+"<br>");//string
let l6 = 100n;
document.write(typeof (l6)+"<br>");//bigint
</script>
4.2 引用数据类型,就是对象
//引用类型
let date = new Date();
document.write(date); //Thu Aug 13 2020 11:17:01 GMT+0800 (中国标准时间)
document.write(date.getFullYear()); //2020
document.write(typeof(date) + "<br>"); //object
拓展:强制类型转换和自动类型转换
强制类型转换
* String():将参数转成字符串
* Number():将参数转成数值
* 注意:null可以和数值进制转换,而undefined不可以
* Boolean():将参数转成boolean类型的值
* Boolean()可以将任意类型转成boolean类型,0.null.undefined可以被转成false,非0,非null,非undefined会被转成true
自动类型转换
任意类型的数据加上字符串都会执行字符串的拼接
true,false,null和数值类型进行运算都会转成数值
规律
如果+两端有一端是字符串,就会执行字符串的拼接
如果+两端没有一个是字符串,就会使用Number()强转,然后进行加法运算
5. 运算符
5.1 比较运算符
<script>
let m=10;
document.write("m="+m+"<br>");//m=10
document.write(m+10+"<br>");//20
document.write(m+"10"+"<br>");//1010
document.write(m*10+"<br>");//100
let n="10";
document.write("n="+n+"<br>");//n=10
document.write(n+10+"<br>");//1010
document.write(n+"10"+"<br>");//1010
document.write(n*10+"<br>");//100 //string类型是10会自动转成number类型的10,然后做乘法运算
document.write(n-5+"<br>");//5 //string类型是10会自动转成number类型的10,然后做减法运算
document.write((m==n)+"<br>"); //true,只比较值,值一样结果就是true
document.write((m===n)+"<br>"); //false,比较值和类型,值和类型都相同结果才是true。(判断数据类型和值是)
</script>
总结:==仅仅比较值,值相同结果就是true。===比较值和类型,值和类型都相同结果才是true
5.2 三元运算符
let result=m>5?10:20; //result=10
document.write(result+"<br>");
6. 流程控制语句
if、switch、for循环、while循环、do…while循环和Java中的相同
7. 数组(重要)
特点:数组的长度动态可变,类似于Java中的集合
7.1 数组的定义
let arr1=[];//定义了一个长度为0的数组
let arr2=[10,true,"hello",200]; //数组中的元素可以是任意类型
7.2 数组遍历(重要)
let arr = [10,20,30];
//方式1:fori的方式遍历,快捷键:itar+回车
for (let i = 0; i < arr.length; i++) {
document.write(arr[i]+"<br>");
}
document.write("==============<br>");
//方式2:forof方式遍历:for(let 变量名 of 数组对象){},快捷键:iter
for (let el of arr) {
document.write(el+"<br>");
}
7.3 扩展运算符:…
- 复制数组
//复制数组
let arr2 = [...arr];
- 合并数组
//合并数组
let arr3 = [40,50,60];
let arr4 = [...arr , ...arr3];
- 将字符串拆成数组
//将字符串转成数组
let arr5 = [..."heima"];
8. 函数(重点)
注意
-1 js中函数没有重载 同名的函数,后声明的,会把先声明的给覆盖
-2 js中函数调用的时候,你可以传值,也可以不传值,传进来了就有,没传就没有
function f(num) {
alert(num);
}
function f() {
alert("============");
}
f(20);
方式1:普通函数
/*
方式1:普通函数
function 方法名(变量名1,变量名2,...){
方法体;
return 返回值;
}
调用方法:
let 变量=方法名(参数值1,参数值2,...); //如果有返回值就使用变量接收
*/
//定义无返回值函数
function show(str) {
alert("hello "+str);
}
//调用函数
show("周衡");
//定义有返回值函数
function add(a,b) {
return a+b;
}
let sum=add(10,20);
document.write("sum="+sum+"<br>")
方式2:匿名函数
/*
方式2:匿名函数
let 变量名=function (变量名1,变量名2,...){
方法体;
return 返回值;
}
调用方法:
let 返回值变量=变量名(参数值1,参数值2,...); //如果有返回值就使用变量接收
*/
let sub=function (a,b) {
return a-b;
};
let result=sub(10,20);// -10
document.write("result="+result+"<br>");
DOM操作和事件
1. DOM操作
1.1 概述
document object model 文档对象模型,浏览器会将页面的标签、属性、文本等都封装成一个个对象,这些对象都存在于一个叫document的对象身上,然后我们可以操作这些对象。
1.2 DOM操作的基本思路(重要)
【第一步】:通过document获取标签/元素对象。
【第二步】:操作标签的属性、文本、样式、以及添加子元素或者删除子元素
【第一步】:获取标签/元素对象
- 传统方式(ES5方式)
方法名 | 说明 |
---|---|
getElementById(id属性值) | 根据id获得一个元素 |
getElementByTagName(标签名称) | 根据标签名称获得多个元素 |
getElementByName(name属性值) | 根据name属性获得多个元素 |
getElementByClassName(Class属性值) | 根据Class属性获得多个元素 |
子元素对象.parentElement属性 | 获取当前元素的父元素 |
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
<script>
//1. getElementById() 根据id属性值获取元素对象
let div1 = document.getElementById("div1");
alert(div1);
//2. getElementsByTagName() 根据元素名称获取元素对象们,返回数组
let divs = document.getElementsByTagName("div");
alert(divs.length);
//3. getElementsByClassName() 根据class属性值获取元素对象们,返回数组
let cls = document.getElementsByClassName("cls");
alert(cls.length);
//4. getElementsByName() 根据name属性值获取元素对象们,返回数组
let username = document.getElementsByName("username");
alert(username.length);
//5. 子元素对象.parentElement属性 获取当前元素的父元素
let cls2 = document.getElementsByClassName("cls")[1];
let parentElement = cls2.parentElement;
alert(parentElement);
</script>
</body>
- 新的方式(ES6方式) 了解
document.querySelector(“css选择器”); 根据css选择器查询一个元素
document.querySelectorAll(“css选择器”); 根据css选择器查询一组元素
//es6中的新方式
let div1=document.querySelector("#div1"); //根据css选择器查询一个元素
alert(div1);
let input=document.querySelector("input[name='username']");
alert(input);
let divs=document.querySelectorAll("div"); //根据css选择器查询一组元素
alert(divs.length); //4
let cls=document.querySelectorAll(".cls");
alert(cls.length); //2
【第二步】:操作这些对象
操作属性和样式
方法名 | 说明 |
---|---|
setAtrribute(属性名,属性值) | 设置属性 |
getAtrribute(属性名) | 根据属性名获取属性值 |
removeAttribute(属性名) | 根据属性名移除指定的属性 |
style属性 | 为元素添加样式 |
- 操作属性
//1. setAttribute() 添加属性
let a = document.getElementsByTagName("a")[0];
a.setAttribute("href","http://www.baidu.com");//对象名.setAttribute(属性名,属性值);
//2. getAttribute() 获取属性
alert(a.getAttribute("href"));//let 变量名=对象名.getAttribute(属性名);
//3. removeAttribute() 删除属性
a.removeAttribute("href");
//1. setAttribute() 添加属性
let a = document.getElementsByTagName("a")[0];
a.href="http://www.baidu.com";//对象名.属性名=属性值
//2. getAttribute() 获取属性
alert(a.href);//let 变量名=对象名.属性名;
//3. removeAttribute() 删除属性
a.href="";
- 操作样式
//让超链接的字体大小为30px,颜色为绿色
el.style.fontSize="30px";
el.style.color="green";
el.className="cls"; //先写好样式
--------------------
<style>
.cls{
font-size: 60px;
color: yellowgreen;
background-color: yellow;
}
</style>
操作文本
/*
innerHTML属性【重要】:获取/设置标签内容体html代码的,如果包含标签,浏览器会解析成对应的html元素
innerText属性【了解】:获取/设置标签内容体文本的,如果包含标签,浏览器不会解析,原模原样展示。
value属性【重要】:用来获取/设置输入框中的内容
*/
document.getElementById("d1").innerHTML="<a href='http://www.itheima.com'>黑马程序员</a>";
// document.querySelector("#div").innerText="<a href='http://www.itheima.com'>黑马程序员</a>"
let value=document.querySelector("#username").value; //获取输入框中的内容
document.write(value);//打印
document.querySelector("#username").value="刘曲"; //设置输入框中的内容
添加或者删除子元素【了解】
添加元素:select.innerHTML+="<option>武汉</option>";
<body>
<select id="s">
<option>---请选择---</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<script>
//1. createElement() 创建新的元素
let option = document.createElement("option");
//为option添加文本内容
option.innerText="深圳";
//2. appendChild() 将子元素添加到父元素中
let s = document.getElementById("s");
s.appendChild(option);
//3. removeChild() 通过父元素删除子元素
// s.removeChild(option);
//4. replaceChild() 用新元素替换老元素
let option2 = document.createElement("option")
option2.innerText="武汉";
s.replaceChild(option2,option);
</script>
</body>
2. 常用事件
事件的概念
事件指的是某些组件执行了某些操作后,会触发某些代码的执行
常见的事件
常见的事件:
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
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 域的内容被改变,用于下拉列表选中值,例如:省市区联动
2. onselect 文本被选中。
7. 表单事件:
1. onsubmit 确认按钮被点击,表单提交事件,当submit按钮被单击之后出发。用于表单校验,可以提交表单或者阻止表单提交。(很特殊)
2. onreset 重置按钮被点击。
8. 页面加载完成事件:
页面加载完成指的是整个html页面的代码都加载完成
绑定事件的方式
方式一:通过标签中的事件属性进行绑定
方式二:通过DOM元素属性绑定
方式1:行内绑定
直接给html标签添加事件属性,属性值就是要执行的方法
【第一步】:给html标签添加事件属性
<button id="up" onclick="up()">上一张</button>
<button id="down" onclick="down()">下一张</button>
【第二步】:声明要执行的方法
//显示第一张图片的方法
function up(){
let img = document.getElementById("img");
img.setAttribute("src","img/01.png");
}
//显示第二张图片的方法
function down(){
let img = document.getElementById("img");
img.setAttribute("src","img/02.png");
}
方式2:动态绑定
<script>
//为上一张按钮绑定单击事件
document.getElementById("up").onclick = function () {
document.getElementById("img").setAttribute("src","img/01.png");
};
//为下一张按钮绑定单击事件
document.getElementById("down").onclick = function () {
document.getElementById("img").setAttribute("src","img/02.png");
};
</script>
4. 作业:
-
请描述js 的 分为几个部分
基础语法,文档对象模型(DOM),浏览器对象模型(BOM)
-
js中的基本语法要 搞会 ,
注释,变量,输入输出,运算符,if ,for ,数组,函数
-
js 数组如何声明, 如何遍历, 取出 数组中元素 .
let arr = [10,20,30]; for (let i=0;i<arr.length;i++){ document.write(arr[i]+"<br>"); }
-
js 中如何声明函数 , 如何调用, js 中函数有没有重载
function getSum(a,b){ return a+b; } let sum = getSum(10,20); document.write(sum) js中函数没有重载,后声明的函数会被覆盖
-
js的引入方式 , (js的标签 script 可以不可以写成 自闭和标签 )
俩种引入方式,内部引入,还有外部引入,
-
js 中常见的事件, 以及如何绑定 (会两种方式 )
点击事件,焦点事件 行类绑定,动态绑定
-
js 中 绑定调用 js 函数的时候,如果 传 常量字符串 需要注意 什么
function show(str) { alert("hello"+str); } //调用函数 show("黄磊");