Web应用开发学习笔记————JS入门基础

面向对象的邓老凉茶

已于 2024-05-12 17:47:39 修改

阅读量808

点赞数 17

文章标签：前端学习笔记 javascript html5

于 2024-05-06 22:13:14 首次发布

本文链接：https://blog.csdn.net/2301_77606661/article/details/138496589

版权

本文介绍了JavaScript的基础知识，包括引入方式、语法特点、变量声明、运算符、函数定义、基础对象（如数组和字符串）、BOM和DOM操作，以及如何使用window对象和DOM事件监听。

摘要由CSDN通过智能技术生成

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基础对象

W3C定义的对象官方文档

自定义对象

在这里插入图片描述
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>