JS入门基础
引入方式
<script>
是js引入的html标签,如果是以内部脚本的方式引入,一般吧js脚本放在<body>
下面
基础语法
书写语法
js 大部分语法和java差不多
- js每行并不需要用分号来分割
输出语句
alert
在后面的教学中是比较常用的,且通常只需要写成
<script>
alert("jsjsjs")
</script>
变量
JavaScript中的变量需要用关键字var
来声明,但不需要指定变量类型,变量类型取决于存放的值。
js的全局变量和局部变量与java有很大区别,是依靠声明的关键字来判断的 例子如下:
<script>
function fun1(a , b){
return a + b;
}
function main(){
var a = 1;
var b = 1;
return (fun1(a,b));
}
<!-- 无论是在那里声明,var声明的变量都是全局的-->
alert(main())
{
let a1 = 2;
let b1 = 2;
alert(fun1(a1,b1));
}
<!-- let变量只认代码块框-->
a = 3;
b = 3;
console.log(fun1(a,b))
<!-- let变量在代码块框以外就失效了,能重新声明同名变量-->
const a1 =4;
const b1 =4;
document.write(fun1(a1,b1))
</script>
变量类型
运算符
==
和===
的区别
注意JavaScript的==
号是会将变量都转化成数字类型才比较,这和其他语言是有区别的,而===
才更接近我们平时理解的双等号
函数
function
关键字用于定义函数,JS的函数不需要定义返回类型。
JS的函数可以在声明的同时将其赋值给变量
真简约像java和python喝大了一样
JS基础对象
自定义对象
JS的自定义对象直接用var声明既可以
var user={
name : "candy",
age : 20,
gender: "female",
study: function (){
console.log("I go to school for study everyday");
},
//定义对象内函数的省略写法
eat(){
console.log("eat apple")
}
}
console.log(user.name)
user.study()
user.eat()
Array数组对象:
- js的Array数组是可以存放任意元素的,且动态长度。
Array对象常用方法实例:
<script>
var arr = new Array(1,2,3,4);
document.write(arr.length);
document.write(("/"))
arr[5] = 6
document.write(arr.length);
for (let i = 0; i < arr.length; i++){
document.write(arr[i])
}
document.write(("/"))
arr.forEach(function (e){
document.write(e);
});
document.write(("/"))
arr.forEach((e) =>{
document.write(e);
}
)
arr.push(7);
arr.forEach((e)=>{document.write(e)})
arr.splice(2,2);
document.write("/")
arr.forEach((e) =>{
document.write(e)
})
</script>
页面展示结果:
String字符串对象
String对象常用方法实例代码如下:
var str = new String("hello string")
console.log(str)
var str1 = " hello html "
console.log(str1)
console.log(str.length);
console.log(str.charAt(4));
console.log(str.indexOf("o"));
str1 = str1.trim();
console.log(str1);
str = str.substring(0,5);
console.log(str)
实现效果:
JSON对象
JSON的W3C官方文档
JSON格式的文档数据密度较高(跟xml对比),一般用于前后端数据传输
JS Browser BOM
BOM官方文档
BOM的五个基础对象
Window对象
以下是Window对象四个主要方法的实践代码:
// 使用window对象的alert方法弹出一个对话框,内容为"hello dom"
window.alert("hello dom");
// 使用window对象的confirm方法弹出一个确认框,询问用户是否删除记录
// confirm方法返回一个布尔值,用户点击确定返回true,点击取消返回false
var flag = window.confirm("是否删除记录");
// 弹出确认框的返回值
alert(flag);
// 定义变量i,并赋值为0
var i = 0;
// 使用window对象的setInterval方法,每隔1000毫秒(1秒)执行一次匿名函数
// 匿名函数中,先使变量i的值加1,然后在控制台输出"执行次数" + i + "次"
window.setInterval(function () {
i++;
console.log("执行次数" + i + "次");
}, 1000);
// 使用window对象的setTimeout方法,延迟2000毫秒(2秒)后执行一次匿名函数
// 匿名函数中,弹出一个对话框,内容为"the setTimout() was done"
window.setTimeout(function () {
alert("the setTimout() was done")
}, 2000);
// 弹出当前页面的URL
alert(location.href);
// 使用window对象的location属性,将当前页面的URL设置为"https://www.yuanshen.com/#/"
window.location.href = "https://www.yuanshen.com/#/";
window.confirm
返回的是一个布尔值,页面中会弹出警告框,根据用户的选择window.confirm
返回ture
或者false
。
DOM对象
DOM模型概念:
DOM是为给类标记语言定制的标准,DOM将标记语音的各个部分分别封装为不同的JS对象,如下图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6d5cbbd6905b42b59efa971955c51fc7.png
引用w3school上对HTML DOM的解释:
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
以下是HTML DOM 模型被结构化为对象树:
DOM规范模型的组成
下面重点讲述HTML DOM对象的
- HTML DOM对象的获取方法
- HTML DOM对象的属性和1方法
DOM类对象常见获取方法
以下是实践代码:
// 通过元素的ID获取页面上的第一个图像元素
var img = document.getElementById('img1');
console.log(img); // 打印图像元素到控制台
// 通过标签名获取所有div元素,返回的是一个HTMLCollection
var divs = document.getElementsByTagName("div")
for (let i = 0; i < divs.length; i++) {
console.log(divs[i]); // 遍历并打印每个div元素到控制台
}
// 弹出一个确认框,询问用户是否更改成中文,返回一个布尔值
var cfm = window.confirm("是否更改成中文");
console.log(divs[0]); // 打印第一个div元素到控制台
var div0 = divs[0]; // 将第一个div元素赋值给变量div0
if (cfm) {
div0.innerHTML = "长征五号"; // 如果用户确认,更改第一个div元素的内部HTML为"长征五号"
}
// 通过name属性获取所有名为'action'的表单元素,返回的是一个NodeList
var ins = document.getElementsByName('action')
for (let i = 0; i < ins.length; i++) {
console.log(ins[i]); // 遍历并打印每个名为'action'的元素到控制台
}
// 通过类名获取所有包含'cls'类的元素,返回的是一个HTMLCollection
var classes = document.getElementsByClassName('cls')
for (let i = 0; i < classes.length; i++) {
console.log(classes[i]); // 遍历并打印每个包含'cls'类的元素到控制台
}
== 因为通过元素某个属性获取的对象往往不止一个,所以对象都是以数组保存。
DOM对象的其他实践代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM_dome</title>
</head>
<body>
<img id="img1" src="../img/长征五号.jpg" width="500"> <br>
<div class="cls">CZ5</div> <br>
<div class="cls">嫦娥六号</div> <br>
<input type="checkbox" name="action">燃油加注
<input type="checkbox" name="action">燃油管松脱
<input type="checkbox" name="action">点火
<script src="../js/app.js"></script>
</body>
<script>
var imge = document.getElementById("img1")
if (window.confirm("是否转为gif"))
imge.src = "../img/着陆过程动画.gif";
var ids = document.getElementsByTagName("div")
for ( let i = 0; i < ids.length; i++){
var div = ids[i];
div.innerHTML += "<font color='red'>very good</font>";
}
var names = document.getElementsByName("action")
for (let i = 0; i < names.length; i++) {
var cheak = names[i];
cheak.checked = true;
}
</script>
</html>
实现效果:
DOM事件监听:
基本的操作就是将DOM对象和事件绑定,然后在javascritp
中的编写函数进行操作,关于HTML事件就不做展示了(太多了,都在官方文件中)
未完待续