前端基础3——JavaScript基础用法

文章目录

  • 一、基本使用
    • 1.1 内部方式
    • 1.2 外部导入方式
    • 1.3 css标签调用js脚本(触发事件)
  • 二、Windows对象
    • 2.1 对象属性
    • 2.2 对象方法
  • 三、数据类型
    • 3.1 字符串处理
    • 3.2 数组处理
    • 3.3 对象处理
  • 四、流程控制
    • 4.1 操作符
    • 4.2 if判断语句
    • 4.3 for循环语句
    • 4.4 continue与break语句
    • 4.5 函数定义与调用
  • 五、选择器
    • 5.1 通过id获取元素
    • 5.2 通过标签名获取元素
  • 六、JS操作HTML
    • 6.1 插入内容
    • 6.2 修改标签属性
    • 6.3 改变标签样式
    • 6.4 获取输入的值
    • 6.5 添加标签元素
    • 6.6 删除元素

一、基本使用

  • JavaScript(简称JS):是一种轻量级客户端脚本语言,通常被直接嵌入HTML 页面,在浏览器上执行。
  • JavaScript作用:改变页面中的HTML元素、属性、样式、事件。

1.1 内部方式

  • 内嵌样式,在body标签中使用。

1.在body标签中写js脚本。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js测试</title>
</head>
<body>
<script>alert("你好,qingjun");
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

1.2 外部导入方式

  • 在head标签中使用。

1.编写js脚本main.js,统一存放在js目录下。

alert("你好,卿君");

2.html模板引用js文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js测试</title><script type="text/javascript" src="js/main.js"></script>   ##引用js文件。
</head>
<body>
</body>
</html>

3.查看效果。
在这里插入图片描述

1.3 css标签调用js脚本(触发事件)

  • 事件:指的是当HTML中发生某些事件时所调用的方法(处理程序)。
  • 例如点击按钮,点击后做相应操作,例如弹出一句话。

1.可以使用css中的一个标签直接调用js脚本。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js测试</title>
</head>
<body><button type="button" onclick="alert('欢迎来到中国')">提交</button>   ## onclick标签直接调用js脚本。</body>
</html>

2.查看效果。
在这里插入图片描述

二、Windows对象

  • Window 对象表示浏览器中打开的窗口。

2.1 对象属性

window对象属性描述
document每个载入浏览器的 HTML 文档都会成为 Document 对象
innerheight返回窗口的文档显示区的高度
innerwidth返回窗口的文档显示区的宽度
location Location对象包含有关当前 URL 的信息
Navigator Navigator对象包含有关浏览器的信息
Screen Screen对象包含有关客户端显示屏幕的信息
history History对象包含用户(在浏览器窗口中)访问过的 URL
window window包含对窗口自身的引用

1.基本使用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<script type="text/javascript">window.document.write("输出内容");console.log(window.innerWidth,window.innerHeight,"输出内容");   //浏览器做适配时可以使用。console.log(window.Navigator);
</script>
</body>
</html>

在这里插入图片描述

2.刷新按钮。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<button type="button" onclick="location.reload()">刷新当前页面</button>
<button type="button" onclick="location.href=location.href">重新请求当前页面</button>
<button type="button" onclick="location.href='http://www.baidu.com'">请求别的页面</button>
</body>
</html>

在这里插入图片描述

2.2 对象方法

window对象方法描述
alert()显示带有一段消息和一个确认按钮的警告框
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval()取消由 setInterval() 设置的 timeout
setTimeout()在指定的毫秒数后调用函数或计算表达式。(类似于休眠)
clearTimeout()取消由 setTimeout() 方法设置的 timeout
typeof()查看数据类型

1.点击一次,刷新一次当前系统时间。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<button type="button" onclick="refresh()">点击查看当前时间</button>
<script type="text/javascript">function refresh() {date = new Date()alert("当前时间为:"+date)console.log(date)}
</script>    
</body>
</html>    

在这里插入图片描述
2.点击开始,时间自动走。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body><div id="demo"><p>当前时间</p>
</div>
<button type="button" onclick="startRefresh()">开始</button>
<button type="button" onclick="stopRefresh()">停止</button><script type="text/javascript">function refresh() {x = document.getElementById('demo');y = x.getElementsByTagName("p");y[0].innerHTML = new Date() // 获取当前时间}// 点击开始,调用refresh()函数,1000毫秒进行周期性计数走动。function startRefresh() {interval = setInterval("refresh()", 1000);}// 停止function stopRefresh() {console.log(interval);clearInterval(interval)}
</script>
</body>
</html>

在这里插入图片描述

三、数据类型

  • 在JS中,数据类型有:字符串、数组、布尔、数组、对象、Null、Undefined。

3.1 字符串处理

1.字符串处理方法。

<script type="text/javascript">var s = "hello world";s.length; // 字符串长度s[4] //根据索引获取值s.replace('h','H'); //替换某个字符s.split("分隔符") //分隔为数组s.match("w") //找到返回匹配的字符,否则返回nullconsole.log(s.match("w"));  //将内容打印在控制台。console.log(s.length);console.log(s);console.log(s.replace('o','M'));console.log(s.split("o"))
</script>

在这里插入图片描述
2.字符拼接+。
在这里插入图片描述

3.2 数组处理

1.数组处理,相当于python中的列表,是一个序列的数据结构。

###############################################################
//定义数组。
var computer = new Array();     //定义空数组。
var computer = ["主机","显示器","键盘","鼠标"]    //定义有值的数组。
###############################################################
//向数组添加元素。
computer[0]="主机";     //通过索引下标获取数组中的有序元素。
computer[1]="显示器";
computer[2]="键盘";
computer.push("网线");   //追加元素。
###############################################################
console.log(computer[3]);   //根据下标获取元素并打印到控制台。

2.查看效果。
在这里插入图片描述

3.3 对象处理

1.对象处理,相当于python中的字典,是一个具有映射关系的数据结构,用于存储有一定关系的元素。字典中的key不允许重复。

格式:d = {'key1':value1, 'key2':value2, 'key3':value3}
###############################################################
var user = {name:"卿君",sex: "男",age:"26"
};
console.log(user.name);   //根据key查看value值,方式一。
console.log(user['age']);   //根据key查看value值,方式二。
user.height = "180cm"      //增加一对key-value。
user['height'] = "182cm";    //根据key修改value值。
console.log(user.height);

2.查看效果。
在这里插入图片描述

四、流程控制

4.1 操作符

  • 操作符:一个特定的符号,用它与其他数据类型连接起来组成一个表达式。常用于条件判断,根据表达式返回True/False采取动作。
类型操作符
比较操作符== 等于
!= 不等于
> 大于
< 小于
>= 大于等于
<= 小于等于
算术操作符+ 加法
- 减法
* 乘法
/ 除法
% 取余
++ 自增,自动+1
– 自减,自动-1
逻辑操作符&& 与
|| 或
!() 结果取反
赋值运算符= 赋值
+= 加法赋值
-= 减法赋值
*= 乘法赋值
/= 除法赋值
%= 取余赋值

4.2 if判断语句

  • if条件判断:判定给定的条件是否满足(True或False),根据判断的结果决定执行的语句。
//语法。
if (表达式) {<代码块>
} else if (表达式) {<代码块>
} else {<代码块>
}

1.控制开关。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<img id="dengpao" src="img/off.png" alt=""><br>
<button type="button" onclick="main('on')">开灯</button>
<button type="button" onclick="main('off')">关灯</button>
<script type="text/javascript">function main(status) {x = document.getElementById('dengpao');console.log(x);if (status == 'on') {x.src = "img/on.png";} else if (status == 'off') {x.src = "img/off.png";}
}
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

4.3 for循环语句

  • for循环:一般用于遍历数据类型的元素进行处理,例如字符串、数组、对象。
//语法。
for (<变量> in <序列>) {<代码块>
}

1.遍历数组,通过索引获取元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<script type="text/javascript">var computer = ["主机","显示器","键盘","鼠标"];for(i in computer) {// console.log(i)   //获取元素索引。console.log(i,computer[i]) // 使用索引获取值}
</script>
</body>
</html>

在这里插入图片描述
2.遍历数组,通过匿名函数返回元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<script type="text/javascript">var computer = ["主机","显示器","键盘","鼠标"];computer.forEach(function(e) {console.log(e)})
</script>
</body>
</html>

在这里插入图片描述
3.遍历对象。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<script type="text/javascript">var user1 = {name:"卿君",sex:"男",age:"26"};   for(let a in user1) {                        //方式一。console.log(a+":"+user1[a])}var user2 = {name:"柏木",sex:"男",age:"28"};Object.keys(user2).forEach(function (k) {    //方式二,使用内置对象遍历。console.log(k + "——" + user2[k])})
</script>
</body>
</html>

在这里插入图片描述

4.4 continue与break语句

  • continue 当满足条件时,跳出本次循环。
  • break 当满足条件时,跳出所有循环。
  • 注意:只有在循环语句中才有效。

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<script type="text/javascript">var computer = ["主机","显示器","键盘","鼠标"];//不打印第三个元素for(i in computer) {if (i == "2") {continue} else {console.log(computer[i])}}//不打印第第二个以后的元素for(i in computer) {if (i == "2") {break} else {console.log(computer[i])}}
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

4.5 函数定义与调用

  • 函数:是指一段可以直接被另一段程序或代码引用的程序或代码。
  • 在编写代码时,常将一些常用的功能模块编写成函数,放在函数库中供公共使用,可减少重复编写程序段和简化代码结构。
//语法:
function 函数名称(参数1, 参数2, ...) {<代码块>
return <表达式>
}

1.定义函数hello,在按钮中引用函数,点击按钮执行hello函数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<button type="button" onclick="hello()">按钮</button>
<script type="text/javascript">function hello() {alert("hello world")}
</script>
</body>
</html>

在这里插入图片描述
2.传参用法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制开关</title>
</head>
<body>
<button type="button" onclick="hello('卿君','26')">按钮</button>
<script type="text/javascript">function hello(name,age) {alert("你好,我是"+name+", 今年"+age+"岁。")console.log(hello)}
</script>
</body>
</html>

在这里插入图片描述

五、选择器

查找元素方法:

  • 通过id(常用)
  • 通过类名
  • 通过标签名

5.1 通过id获取元素

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js测试</title>
</head>
<body>
<button type="button" id="qingjun">查看内容</button>
<script>var x = document.getElementById("qingjun"); //获取id为qingjun的元素x.onclick = function () {                  //绑定“查看内容”事件alert('好好学习')}
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

5.2 通过标签名获取元素

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js测试</title>
</head>
<body>
<div id="main"><p>Hello world!1</p><p>Hello world!2</p><p>Hello world!3</p>
</div>
<script type="text/javascript">var x = document.getElementById("main");  //document表示当前页面,获取id为main的元素,返回的是一个集合。var y = x.getElementsByTagName("p"); // 获取集合中的p标签,通过下标获取。document.write("div中的第二段文本是:" + y[1].innerHTML); //向当前文档写入内容
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

六、JS操作HTML

6.1 插入内容

1.向id=bb的标签写入内容。

<p id="bb"></p>
<script type="text/javascript">var x = document.getElementById('bb');  //获取id为main的元素x.innerHTML="Hello"   //插入内容Hello。
</script>

2.查看结果。
在这里插入图片描述

6.2 修改标签属性

1.修改显示图片,修改之前。

<img src="img/3.jpg" alt="" id="aa">

在这里插入图片描述
2.修改之后。

<img src="img/3.jpg" alt="" id="aa">
<script type="text/javascript">var x = document.getElementById('aa');x.src="img/4.jpg"
</script>

在这里插入图片描述

6.3 改变标签样式

1.修改id=bb标签的颜色。

<p id="bb"></p>
<script type="text/javascript">var x = document.getElementById('bb');x.innerHTML="Hello"   //先插入内容。x.style.color="blue"  //在修改字体颜色
</script>

2.查看结果。
在这里插入图片描述

6.4 获取输入的值

  • 比如提交一个数据框里的内容,点击提交按钮,可以获取到刚刚输入的值供其他功能使用。

1.获取输入框里的内容。

请输入您的姓名: <input type="text" id="cc"><br>
<button type="button" name="text" onclick="main1()">提交</button>  //店家提交按钮执行main1函数。<script type="text/javascript">function main1() {var y =  document.getElementById("cc");alert(y.value)}
</script>

在这里插入图片描述
2.修改其他标签的内容。

#############################################################
<p id="bb"></p>
请输入您的姓名: <input type="text" id="cc"><br>
<button type="button" name="text" onclick="main1()">提交</button>
#############################################################
<script type="text/javascript">var x = document.getElementById('bb');    //获取id=bb标签的元素。x.innerHTML="Hello"    //向元素插入HTML内容function main1() {var y =  document.getElementById("cc");var s = document.getElementById("bb");s.innerHTML = y.value   //设置s元素的内容是id=c的input值}

在这里插入图片描述

6.5 添加标签元素

1.向div中添加一个p标签,并追加标签内容。

<div id="main"><p>张三,Java开发</p><p>李四,大数据工程师</p><p>王五,k8s运维</p>
</div><script type="text/javascript">var x = document.getElementById("main"); //获取id为main的元素var y = x.getElementsByTagName("p"); // 返回的是一个集合,下标获取var p = document.createElement("p"); //创建p标签var t = document.createTextNode("卿君,渗透测试"); //创建添加的文本p.appendChild(t); //向创建的p标签追加文本var e = document.getElementById("main"); //获取添加的标签父元素e.appendChild(p) //向父元素添加新创建的p标签
</script>

2.查看效果。
在这里插入图片描述

6.6 删除元素

1.删除id=main标签的元素。

<div id="main"><p>张三,Java开发</p><p>李四,大数据工程师</p><p>王五,k8s运维</p>
</div><script type="text/javascript">var x = document.getElementById("main"); //获取id为main的元素var y = x.getElementsByTagName("p"); // 返回的是一个集合,下标获取var p = document.createElement("p"); //创建p标签var t = document.createTextNode("卿君,渗透测试"); //创建添加的文本p.appendChild(t); //向创建的p标签追加文本var e = document.getElementById("main"); //获取添加的标签父元素e.remove()   //删除id=main标签的所有元素。
</script>

2.查看效果。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/63202.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 预览 有token验证的 doc、docx、pdf、xlsx、csv、图片 并下载

预览 doc我也不会 //docx <div v-if"previewType docx" ref"iframeDom" style"border: none; width: 100%; height: 100%"></div> import { renderAsync } from "docx-preview"; let iframeDom: any ref(); axios({url…

机器学习——聚类算法一

机器学习——聚类算法一 文章目录 前言一、基于numpy实现聚类二、K-Means聚类2.1. 原理2.2. 代码实现2.3. 局限性 三、层次聚类3.1. 原理3.2. 代码实现 四、DBSCAN算法4.1. 原理4.2. 代码实现 五、区别与相同点1. 区别&#xff1a;2. 相同点&#xff1a; 总结 前言 在机器学习…

【Java】Java 内存管理最佳实践

文章目录 前言Java 应用程序内存泄漏的常见原因Java 应用程序中内存管理的最佳实践1. 使用不可变对象2. 最小化对象创建3. 使用适当的数据结构4. 正确关闭资源5.使用弱引用6.使用 EnumSet 和 EnumMap 进行枚举7. 对大型集合使用并行流8. 更新到最新的 Java 版本9.定期测试和调整…

ASCII码 对照表

总256个字符元素 0&#xff5e;255 码值整数据 字符结构 字符元素(内容) 整数结构 码值整数

怎么将pdf合并成一个?将pdf合并成一个的方法

在日常工作和学习中&#xff0c;我们经常会遇到需要将多个PDF文件合并成一个的情况。这不仅能够提高文件管理的便捷性&#xff0c;还能节省存储空间并使阅读更加流畅。那么&#xff0c;怎么将pdf合并成一个呢&#xff1f;在本文中&#xff0c;我将为您介绍几种简单实用的方法&a…

无涯教程-机器学习 - 数据可视化

在上一章中&#xff0c;无涯教程讨论了数据对于机器学习算法的重要性&#xff0c;以了解具有统计信息的数据&#xff0c;还有另一种称为可视化的方式来理解数据。 借助数据可视化&#xff0c;可以看到数据的属性保持什么样的关联&#xff0c;这是查看要素是否与输出相对应的最…

【枚举区间+线段树】CF Ehu 152 E

Problem - E - Codeforces 题意&#xff1a; 思路&#xff1a; 感觉是个套路题 对区间计数&#xff0c;按照CF惯用套路&#xff0c;枚举其中一个端点&#xff0c;对另一个端点计数 对于这道题&#xff0c;枚举右端点&#xff0c;对左端点计数 Code&#xff1a; #include &…

类和对象(中)

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; C&#x1f440; 刷题专栏&#x1f440; C语言&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大…

Spring Cloud Gateway的快速使用

环境前置搭建Nacos&#xff1a;点击跳转 Spring Cloud Gateway Docs 新建gateway网关模块 pom.xml导入依赖 <!-- 网关 --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifact…

React 如何获取上一次 state 的值

React 如何获取上一次 state 的值 一、用 ref 存储上一次的 state 类似 usePrevious function usePrevious(value) {const ref useRef();useEffect(() > {ref.current value;});return ref.current; }二、通过 setState 的入参改为函数获取

【ES6】Promise.race的用法

Promise.race()方法同样是将多个 Promise 实例&#xff0c;包装成一个新的 Promise 实例。 const p Promise.race([p1, p2, p3]);上面代码中&#xff0c;只要p1、p2、p3之中有一个实例率先改变状态&#xff0c;p的状态就跟着改变。那个率先改变的 Promise 实例的返回值&#…

知识图谱笔记:TransH

1 TransE存在的问题 一对多 假设有一个关系 "是父亲"&#xff0c;其中一个父亲&#xff08;头实体&#xff09;可能有多个孩子&#xff08;尾实体&#xff09; 父亲 A -> 孩子 1父亲 A -> 孩子 2在 TransE 中&#xff0c;这两个关系会被建模为&#xff1a; A是…

GPS全球卫星定位系统原理

GPS全球卫星定位系统是一种利用导航卫星进行定位、导航和时间测量的系统。它由三部分组成&#xff1a;空间部分、地面控制部分和用户设备部分。其中&#xff0c;空间部分由24颗卫星组成&#xff0c;分布在6个轨道面上&#xff0c;每个轨道面有4颗卫星&#xff1b;地面控制部分由…

CentOS 7.6环境下Nginx1.23.3下载安装配置使用教程

一、前言 这篇文章主要介绍了CentOS 7.6环境下Nginx下载安装配置使用教程&#xff0c;学习nginx的朋友可以参考一下 二、下载 使用如下命令进行下载 wget http://nginx.org/download/nginx-1.23.3.tar.gz 三、安装nginx需要的环境库 项目首先我们需要安装gcc、gcc-c、zlib、…

进程控制相关 API-创建进程、进程分离、进程退出、进程阻塞

进程控制相关 API p.s 进程控制中的状态转换 相关 API&#xff0c;用户很少用到&#xff0c;在此不提。 一般来说&#xff0c;这些内核标准 API&#xff0c;在执行出错&#xff08;可能是资源不够、权限不够等等&#xff09;会返回负值&#xff08;比如 -1&#xff09;&#…

【Qt QAxObject】使用 QAxObject 高效任意读写 Excel 表

1. 用什么操作 Excel 表 Qt 的官网库中是不包含 Microsoft Excel 的操作库&#xff0c;关于对 Microsoft Excel 的操作库可选的有很多&#xff0c;包含基于 Windows 系统本身的 ActiveX、Qt Xlsx、xlsLib、LibXL、qtXLS、BasicExcel、Number Duck。 库.xls.xlsx读写平台Qt Xls…

JVM的故事——类文件结构

类文件结构 文章目录 类文件结构一、概述二、无关性基石三、Class类文件的结构 一、概述 计算机是只认由0、1组成的二进制码的&#xff0c;不过随着发展&#xff0c;我们编写的程序可以被编译成与指令集无关、平台中立的一种格式。 二、无关性基石 对于不同平台和不同平台的…

二分图最大完美匹配

嗯 想不通就是二分之后的点&#xff0c;寻找左边的点和右边的点的保证两条边的顶点不相同的最大边数 匈牙利算法 O(mn) 左边寻找和右边相邻的边&#xff0c;如果右边还没有和左边进行连线&#xff0c;那么匹配成功。如果右边已经进行连线&#xff0c;那么考虑左边是否能更改连…

docker命令学习

docker vscode插件出现的问题 docker命令 docker images &#xff08;查看所有的镜像&#xff09; docker ps -a &#xff08;查看所有的容器&#xff09; docker ps &#xff08;查看运行的容器&#xff09; docker run imageID docker run --gpus all --shm-size8g -it imag…

网络安全体系架构介绍

网络安全体系是一项复杂的系统工程&#xff0c;需要把安全组织体系、安全技术体系和安全管理体系等手段进行有机融合&#xff0c;构建一体化的整体安全屏障。针对网络安全防护&#xff0c;美国曾提出多个网络安全体系模型和架构&#xff0c;其中比较经典的包括PDRR模型、P2DR模…