day9-Javascript

最新推荐文章于 2024-07-19 12:58:53 发布
最新推荐文章于 2024-07-19 12:58:53 发布
阅读量142 收藏
点赞数
分类专栏： 前端学习 前端 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43697280/article/details/110734245
版权

文章目录

一、JavaScript是什么

Javascrip是一个运行于Javascript解释器/引擎中的解释型脚本语言

运行环境：
1、独立安装的JS解释器（NodeJS）
2、嵌入在浏览器内核中的JS解释器
解释型：
运行前不需要编译（不同c++、java这些语言），直到碰到错误为止
编译型：
对源码进行编译，还能检查语法错误

JS的组成：
1、ECMAScript（核心）
2、DOM(Document Object Model)文档对象模型
让JS有能力与网页进行对话
3、BOM(Browser Object Model)浏览器对象模型
让JS有能力与浏览器进行对话

二、语法

一些单位的转换：
在这里插入图片描述
声明变量的时候要注意双引号的使用：
在这里插入图片描述
在这里插入图片描述

三、数据类型

1、首先定义都是用var，后面赋值是什么类型数据的就是什么类型
JS在运算过程中会自己进行转换的操作，不需要人为参与
在这里插入图片描述
JAVASCRIT语言也可以使用类似c的函数，如：
在这里插入图片描述
可以看到获取数据类型的方法有两种写法：

typeof(num);
typeof num;
这两条语句都是一个意思，都是获取num的数据类型

2、其次，对于isNaN(数据)，要注意它表示的是“不是一个数字”，如果判断的变量是数字则会返回false，否则就是返回true
图中的需注意点那里写着：所有的数据类型与string进行运算时，结果都是string类型的结果

var num=15;
var str = num+"";

3、使用函数parseInt()表示取指定数据的整数部分，如：

var result = parseInt(数据);

parseInt从左到右依次进行转换，碰到第一个非整数字符则停止转换。如果第一个字符是非整数字符，结果是NaN
同样的，parseFlost()函数和Number()函数也是一样的用法
但使用Number()函数时，如果原有变量中有非数字则直接返回NaN，如：var s=“999 888”和var s=“999nj”，但也有例外，如果是日期对象，如：var s=Date()，使用Number(s)时则会返回一串数字
在这里插入图片描述

四、运算符/表达式

1、算术运算符

下图可以看到str1是字符串类型的数据，然后在进行num1+str1的运算时，变成了字符串相加，这就是上面提到的，所有格式的数据与字符串类型的数据做+运算时都会变成字符串运算。
在这里插入图片描述
javascript也有自增自减操作
这个自增自减与c++等的编程语言是一样的规则，前加加或前减减都是先加或减再赋值，后加加或减减是先返回原值再加或减
在这里插入图片描述

2、逻辑运算符

在这里插入图片描述
在这里插入图片描述

3、条件运算符

在这里插入图片描述

五、函数的基本知识

语法：
function 函数名(){
	可执行语句;
}
例如：创建一个函数。名叫sayHello，功能是：
向控制台输出一句Hello World
function sayHello(){
	console.log("hello");
	console.log("world");
}

上面的例子都是无参数的例子，下面看一下有参数的情况
在这里插入图片描述
上面的例子都是没有返回值的函数，下面看一下有返回值的函数定义：
在这里插入图片描述

作用域

按值传递：
注意的是，函数中如果对全局变量进行操作，其实是没有改变全局变量的值的，函数相当于只是一开始从全局变量复制了一份放进函数里面进行操作，所以实际上操作并没有改变全局变量的值。
在这里插入图片描述

六、分支结构

程序=数据+算法
程序的三种结构：
1、顺序结构
2、分支结构
3、循环结构
在这里插入图片描述

1、分支结构

（1）if结构和if-else结构

使用到：
(1)if结构
(2)if-else结构

在这里插入图片描述

（2）switch结构

在这里插入图片描述

七、循环结构

1、while

在这里插入图片描述
在这里插入图片描述

2、do-while

在这里插入图片描述

3、for循环

在这里插入图片描述

4、for、while、do-while之间的区别

在这里插入图片描述

八、数组

1、索引数组

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用数组名字.length读取数组的长度
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、关联数组

关联数组是可以自定义下标名称的数组
在这里插入图片描述
对关联数组进行遍历的时候使用的是for in
如上图的遍历就是for(var key in bookInfo){}
在这里插入图片描述

3、索引数组与关联数组的区别

在这里插入图片描述
在这里插入图片描述

九、数组API函数

1、数组转字符串

使用arr.join(“连接符”)函数
将arr中每个元素转为字符串

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<script>
	var chars=["h","e","l","l","o"];
		document.write(chars.join(","));
	
	</script>

</body>
</html>

在这里插入图片描述
利用该方法可以实现：
1、检查数组是否为空
2、将字符连接成单词
3、还可以将单词组成句子
4、将数组转化为页面元素的内容
在这里插入图片描述

2、拼接与选取

（1）concat()拼接

使用concat()函数对两个及两个以上的数组进行拼接
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<script>
	var arr1=[90,91,92];
	var arr2=[80,81];
	var arr3=[70,71,72,73];
	var arr4=arr1.concat(50,60,arr2,arr3);
	

	
	document.write(arr4);
	</script>

</body>
</html>

在这里插入图片描述

（2）slice()选取

slice()函数中放的是开始的下标和结束的下标，表示截取开始下标（包括这个下标的内容）到结束下标的前面一个数（含头不含尾）
当里面的参数使用的是负数的时候就是从后往前面数的意思
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<script>
	var arr1=[90,91,92,98,100,50,60];
	var arr2=[80,81];
	var arr3=[70,71,72,73];
	var arr4=arr1.slice(-4,-2);
	document.write(arr4);
	</script>

</body>
</html>

在这里插入图片描述
slice()还可以用来复制数组：
在这里插入图片描述

（3）splice()修改数组

在这里插入图片描述
在这里插入图片描述

（4）reverse()颠倒数组

在这里插入图片描述

（5）排序

在这里插入图片描述

十、DOM（document object model）查找

1、DOM

在这里插入图片描述
在这里插入图片描述

2、DOM查找

（1）document.getElementById("")

按id找
注意上面的Element后面是没有s的
1、document这个词不能换不能省略
2、只用于精确查找一个元素
3、不是所有元素都有id
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮来改变这一段中的文本。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML="Hello World";
};
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

（2）document.getElementsByTagName("")

按标签名找
注意Element后面是有s的
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮来改变这一段中的文本。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementsByTagName("P")[0].innerHTML="Hello World";
};
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

（3）document.getElementsByName("")

按name找
注意有兼容性问题：IE9+
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function getElements(){
	var x=document.getElementsByName("x");
	alert(x.length);
}
</script>
</head>
<body>

猫:
<input name="x" type="radio" value="猫">
狗:
<input name="x" type="radio" value="狗">
<input type="button" onclick="getElements()" value="多少名称为 'x'的元素?">

</body>
</html>

在这里插入图片描述
在这里插入图片描述

（4）getElementsByClassName("")

按class找
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div class="example">第一 Div 元素 class="example"。</div>
<div class="example">第二个 Div 元素 class="example"。</div>
<p>点击按钮修改第一个 Div 元素的文本信息（索引值为 0 的 class="example")。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    x[0].innerHTML = "Hello World!";
}
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

（5）使用css选择器进行查找

querySelector("");
在这里插入图片描述
在这里插入图片描述
下面是使用querySelector("")查找一个id的情况

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">id="demo" 的 p 元素</p>
<p> 点击按钮修改 id="demo" 的 p 元素内容</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
    document.querySelector("#demo").innerHTML = "Hello World!";
}
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
下面是使用querySelectorAll("")查找多个的情况

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2 class="example">使用 class="example" 的标题</h2>
<p class="example">使用 class="example" 的段落</p> 

<p>点击按钮为 class="example" (索引为 0) 的第一个元素设置背景颜色。</p>

<button onclick="myFunction()">点我</button>

<p><strong>注意:</strong>Internet Explorer 8  及更早版本不支持 querySelectorAll() 方法。</p>

<script>
function myFunction() {
    var x = document.querySelectorAll(".example");
    x[0].style.backgroundColor = "red";
}
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

十一、DOM修改

1、读取属性值

在这里插入图片描述

2、修改属性值

（1）setAttribute(“属性名”,"")

使用setAttribute(“属性名”,"")第二个参数也是需要加双引号的：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
function myFunction(){
	document.getElementsByTagName("INPUT")[0].setAttribute("type","button"); 
	document.getElementsByTagName("input")[0].setAttribute("value","good"); 
};
</script>
	
	
<input value="OK">
<p id="demo">点击下面的按钮来设置按钮的类型属性。</p>
<button onclick="myFunction()">点我</button>

<p>Internet Explorer 8 及更早的版本不支持 setAttribute 方法。</p>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

（2）setAttributeNode(“属性名”)

意思是增加一个属性值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
.democlass{
	color:red;
}
</style>
</head>
<body>

<h1>Hello World</h1>
<p id="demo">单击按钮来设置标题上面的类属性节点。</p>
<button onclick="myFunction()">点我</button>


	
	<script>
function myFunction(){
	var atr=document.createAttribute("class");
	atr.nodeValue="democlass";
	var h=document.getElementsByTagName("H1")[0];
	h.setAttributeNode(atr); 
};
</script>
	
</body>
</html>

在这里插入图片描述
在这里插入图片描述

3、判断是否存在指定属性

在这里插入图片描述

4、移除属性值

在这里插入图片描述

5、修改样式

在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript：改变 HTML 样式</title> 
</head>
	<script>
	function myFunction(){
  	x=document.getElementById("demo");// 找到元素
  	x.style.backgroundColor="red";     // 改变样式
	x.style.color="white"; 	
}
</script>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>

<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

在这里插入图片描述
在这里插入图片描述

十二、DOM添加

1、

添加元素的步骤
1、创建空元素
2、设置关键属性
3、将元素添加到DOM树

其实在十一里面介绍setAttribute时的例子里面用到了createElement()
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述上述图片在insertBefor中使用的lastChild就是指，放在最后一个节点的前面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮插入一个项目列表</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var newItem=document.createElement("LI")
	var textnode=document.createTextNode("Water")
	newItem.appendChild(textnode)
	var list=document.getElementById("myList")
	list.insertBefore(newItem,list.childNodes[0]);
}
</script>
<p><strong>注意:</strong><br>首先创建一个li节点,<br>然后创建一个文本节点,<br>然后添加文本节点的在li节点。<br>最后在第一个子节点列表插入li节点。</p>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

2、注意

在这里插入图片描述
在这里插入图片描述

十三、BOM（Browser Object Model）浏览器对象模型

1、

在这里插入图片描述
在这里插入图片描述

2、定时器

作用：
让程序按指定时间间隔自动执行任务
网页的动态效果、计时功能等
（1）周期性定时器setInterval()

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮，等待 3 秒会弹出 "Hello"。</p>
<p>在弹出的对话框中点击 “确定”, 3 秒后会继续弹出。如此循环下去...</p>
<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    setInterval(function(){ alert("Hello"); }, 3000);
}
</script>

</body>
</html>
（2）一次性定时器setTimeOut（）

在这里插入图片描述

（3）使用抉择

在这里插入图片描述

新人小程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day02-JavaScript-Vue
qq_44428997的博客
03-02 1107
文章目录1 JavaScript1.1 介绍1.2 引入方式1.3 基础语法1.3.1 书写语法1.3.2 变量1.3.3 数据类型和运算符1.4 函数1.4.1 第一种定义格式1.4.2 第二种定义格式1.5 JavaScript对象1.5.1 基本对象1.5.1.1 Array对象语法格式特点属性和方法1.5.1.2 String对象语法格式属性和方法1.5.1.3 JSON对象自定义对象json对象1.5.2 BOM对象1.5.2.1 Window对象1.5.2.2 Location对象1.5.3 D
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3947
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
03 day5--javascript笔记pink老师-提高篇之ES6+，重中之重
小女不才
08-31 1789
思维导图： 1. 严格模式 JavaScript 除了提供正常模式外，还提供了严格模式 ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码 严格模式在IE10 以上版本的浏览器才会被支持，旧版本浏览器会被忽略 严格模式对正常的JavaScript语义做了一些更改： 消除了Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为 消除代码运行的一些不安全之处，保证代码运行的安全 提高编译器效率，增加运行速度 禁用了在 ECMAScri
kettle开发篇-JavaScript脚本-Day31
qq_29061315的博客
12-29 3760
前言： 昨天我们讲了映射，映射可以帮我来将转换进行封装便于我们的重用，今天我们来讲解下JavaScript脚本，可以通过JavaScript脚本来处理一些复杂的转换问题。JavaScript脚本就是使用JavaScript语言通过代码编程来完成对数据流的操作。JS中有很多内置函数，可以在编写JS代码时查看。 一、JavaScript脚本 JavaScript脚本就是使用JavaScript语言...
JavaScript 逆向 ( 一 ) --- JavaScript 语法基础、逆向技巧
freeking101的博客
05-11 6882
JavaScript 语法基础、逆向技巧
Day03--前端项目构建
weixin_44077834的博客
05-29 3785
项目构建 在webstorm中打开终端，进入项目目录 输入 vue init webpack pytools-fe-ver1.0 初始化项目 项目名称为pytools-fe-ver1.0 添加项目描述，作者 runtime选择第一项’Runtime + Compiler’,按空格切换，按回车确认 Install vue-router 选择Y Use ESLint to lint your code? 选择Y Standard 选择’Stander’ Set up unit tests 选择N Set up
红日代码审计（day1-day14）
weixin_44897902的博客
01-05 8581
day_1:wishlist class Challenge { const UPLOAD_DIRECTORY = './solutions/'; private $file; private $whitelist; public function __construct($file) { $this->file = $file; $this->whi...
JavaScript-ECMAScript编程
qq_46096136的博客
09-30 7822
1、JavaScript语言是一种脚本语言（解释型语言），JavaScript的“目标程序”是以普通文本的形式保存。2、JavaScript是一门编程语言，专门用来操作HTML页面中的节点，让网页产生动态效果的。JavaScript中也有变量、数据类型、运算符、if语句、for循环、标识符、关键字等。3、JavaScript和Java的区别?JavaScript运行在浏览器当中，浏览器中有执行JS代码的内核。Java运行在JVM当中。JavaScript和Java没有任何关系。
JavaScript Day_03
m0_66095162的博客
03-24 1046
Javascript学习笔记
JavaScript-时区
MountGao的博客
08-13 3267
JavaScript-时区 简介 时区是地球上的区域使用同一个时间定义。以前，人们通过观察太阳的位置（时角）决定时间，这就使得不同经度的地方的时间有所不同（地方时）。1863年，首次使用时区的概念。时区通过设立一个区域的标准时间部分地解决了这个问题。 世界各国位于地球不同位置上，因此不同国家，特别是东西跨度大的国家日出、日落时间必定有所偏差。这些偏差就是所谓的时差。 历史 在农业社会，世界各地一般采用各自的地方时。十九世纪随着长途铁路运输的发展，1870年代加拿大铁路工程师弗莱明首次提出全世界按统一标准
30-day-of-javascript-day-1
03-04
【标题】"30-day-of-javascript-day-1" 是一个关于JavaScript编程的学习计划，旨在帮助初学者在30天内逐步掌握JavaScript的基础知识。这个计划的第一天通常会涵盖JavaScript的入门概念，为后续的学习打下坚实的基础...
高级软件人才培训专家-day02-JavaScript-Vue
03-10
高级软件人才培训专家-day02-JavaScript-Vue
day07-JavaScript.md
03-07
day07-JavaScript.md
day02-JavaScript-Vue.md
04-27
day02-JavaScript-Vue.md
day04-javascript高级.pdf
03-22
JavaScript是一种广泛应用于网页和网络应用的脚本语言，尤其在前端开发中占据核心地位。本教程主要关注JavaScript的高级特性，特别是与浏览器对象模型（BOM）相关的编程知识。 BOM（Browser Object Model）编程是...
博客前端项目学习day03——框架页
最新发布
qq_53237241的博客
07-19 195
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 989
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 783
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 857
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
"Day10_JavaScript高级1：DOM的功能与控制HTML文档
本节课主要学习了JavaScript高级的内容，包括BOM对象和DOM对象的使用以及四个案例的实践。下面对每个部分进行详细总结： 1. BOM对象：BOM对象是JavaScript的浏览器对象模型，通过BOM可以控制浏览器的行为和属性。本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值