Web前端-JavaScript书写位置

一、JavaScript介绍

1.JavaScript 是什么?

是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。

2.作用

(1)网页特效(监听用户的一些行为让网页作出对应的反馈)

(2)表单验证(针对表单数据的合法性进行判断)

(3)数据交互(获取后台的数据,渲染到前端)

(4)服务端编程(node.js)

3.JavaScript的组成

ECMAScript : 规定了js基础语法核心知识。比如:变量、分支语句、循环语句、对象等等

Web APls : DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作

                  BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等

二、体验js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.yyy {background-color: green;}</style>
</head>
<body><button class="yyy">按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>let bts = document.querySelector('button')for (let i = 0; i < bts.length; i++) {bts[i].addEventListener('click',function{document.querySelector('.yyy').className=''this.className = 'yyy'})}</script>
</body>
</html>

三、JavaScript书写位置

1.内部JavaScript

直接写在html文件里,用script标签包住

规范:script标签写在</body>上面

拓展: alert('你好,js')页面弹出警告对话框

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 内部js --><script>//页面弹出警示框alert('sgqt')</script>
</body>
</html>

注意:

我们将 <script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。因此,将JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

2.外部JavaScript

代码写在以.js结尾的文件里

语法:通过script标签,引入到html页面中

js文件:

alert('外部js文件')

html文件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="/JS/basis.js"></script>
</body>
</html>

注意:

(1)script标签中间无需写代码,否则会被忽略!

(2)外部]avaScript会使代码更加有序,更易于复用,且没有了脚本的混合,HTML 也会更加易读,因此这是个好的习惯。

3.内联JavaScript

代码写在标签内部

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="alert('内联js')">点击</button>
</body>
</html>


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

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

相关文章

大语言模型训练

大语言模型训练 1.两大问题2.并行训练2.1数据并行2.2模型并行2.3张量并行2.4混合并行 3.权重计算3.1浮点数3.2混合精度训练3.3deepspeed&#xff08;微软&#xff09;3.3.1 ZeRO3.3.2ZeRO-offload 3.3总结 4.PEFT4.1Prompt TuningPrefix-tuning4.2P-tuning & P-tuning v2 5…

sentinel dashboard分布式改造落地设计实现解释(二)-分布式discovery组件

discovery discovery负责维护app/机器资料库&#xff0c;transport健康检测&#xff0c; transport上下线处理。discovery关键是分布式存储&#xff0c;后续研究一下raft&#xff0c;其复制&#xff0c;状态机&#xff0c;快照技术&#xff0c;但个人觉得&#xff0c;discover…

DBeaver连接Hive教程

hive shell&#xff1a;通过hive shell来操作hive&#xff0c;但是至多只能存在一个hive shell&#xff0c;启动第二个会被阻塞&#xff0c;也就是说hive shell不支持并发操作。 基于JDBC等协议&#xff1a;启动hiveserver2&#xff0c;通过jdbc协议可以访问hive&#xff0c;hi…

基于SSM服装定制系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;服装类型管理&#xff0c;服装信息管理&#xff0c;服装定制管理&#xff0c;留言反馈&#xff0c;系统管理 前台账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xf…

git commit / push 报错 文件不存在

1. 错误信息 尝试使用 git restore --staged filename 取消暂存&#xff0c;但是报错 2. 解决方法 进入 当前仓库/.git文件夹内&#xff0c;删除 index.lock 文件 再执行 git restore --staged filename 等操作。

通过无线路由器连接三菱PLC的设置方法

1.首先设置无线路由器上网方式为DHCP&#xff08;自动获取IP地址&#xff09;。点击保存&#xff0c;然后点击更多功能 2.再点击网络设置-局域网&#xff0c;勾选DHCP服务器&#xff0c;此功能的作用是对局域网内所有设备分配IP地址。 然后保存&#xff1b; 3.再点击系统设置…

Git极速入门

git初始化 git -v git config --global user.name "" git config --global user.email "" git config --global credential.helper store git config --global --list省略(Local) 本地配置&#xff0c;只对本地仓库有效–global 全局配置&#xff0c;所有…

云计算实验1——基于VirtualBox的Ubuntu安装和配置

实验步骤 1、VirtualBox的安装 本实验使用VirtualBox-7.0.10 进行演示。对于安装包&#xff0c;大家可以前往 VirtualBox官网下载页面(https :/ / www. virtualbox.org/wiki/Downloads)下载其7.0版本安装包进行安装&#xff0c;或者直接使用QQ群的安装包VirtualBox-7.0.10-15…

给定一个正整数n随机生成n个字节即生成2n个十六进制数将其组成字符串返回secrets.token_hex(n)

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 给定一个正整数n 随机生成n个字节 即生成2n个十六进制数 将其组成字符串返回 secrets.token_hex(n) [太阳]选择题 根据题目代码&#xff0c;执行的结果错误的是&#xff1f; import secrets …

对vue响应式数据的理解(vue基础,面试,源码级讲解)

首先我们要知道哪些数据可以劫持。 是否可以劫持&#xff1a; 在JavaScript等动态语言中&#xff0c;字符串和数字虽然是基本数据类型&#xff08;也称为原始数据类型&#xff09;&#xff0c;但它们可以包装成对象&#xff08;如String对象和Number对象&#xff09;进行处理。…

软件测试笔记——接口测试

文章目录 一、概念1.接口测试流程2.URL3.HTTP协议4.RESTful5.案例介绍 二、Postman1.Postman软件2.登录接口调试-获取验证码3.登录接口调试-自动关联数据4.合同上传接口-提交请求数据5.提交参数查询6.批量执行7.接口用例设计8.断言8.参数化三、案例1.项目2.课程添加3.课程列表查…

萤石云服务支持云端视频AI自动剪辑生成

萤石视频云存储及媒体处理服务是围绕IoT设备云端存储场景下的音视频采集、媒体管理、视频剪辑和分发能力的一站式、专业云服务&#xff0c;并可面向广大开发者提供复杂设备存储场景下的完整技术方案。目前该服务新增了视频剪辑功能&#xff0c;支持将视频片段在云端进行裁剪并拼…

大数据新视界 --大数据大厂之数据脱敏技术在大数据中的应用与挑战

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

智能取暖桌:以九芯电子NRK3502语音识别芯片提升用户体验

随着科技的不断发展&#xff0c;智能家居市场日益繁荣。智能取暖桌作为其中的一款产品&#xff0c;受到了广大消费者的关注。在智能取暖桌的众多创新中&#xff0c;九芯电子NRK3502语音识别芯片的融入&#xff0c;为用户体验带来了质的飞跃。 首先&#xff0c;NRK3502语音识别芯…

#每日一题#自动化 2024年10月

#每日一题#自动化 2024年10月 1、深拷贝和浅拷贝的区别是什么&#xff1f; 参考答案&#xff1a; 深拷贝是将对象本身复制给另一个对象。这意味着如果对对象的副本进行更改时不会影响原对象。在 Python 中&#xff0c;我们使用 deepcopy&#xff08;&#xff09;函数进行深拷贝…

Vue3——模板引用

绑定dom组件 defineExpose 可以用来暴露子组件的变量&#xff08;例如 ref 或 reactive&#xff09;和方法。这让父组件可以直接访问子组件的某些状态。 defineExpose 示例 以下是如何通过 defineExpose 暴露变量的示例&#xff1a; <template> <div> <bu…

空间数据分析实验04:空间统计分析

实验概况 实验目的 了解空间统计分析的基本原理掌握空间统计分析的常用方法 实验内容 根据某村的土地利用数据和DEM数据&#xff0c;提取各村组耕地面积比例&#xff0c;并将其与村组平均坡度进行相关性分析&#xff0c;最后计算各村组单元的景观多样性指数。 实验原理与方…

鸿蒙网络编程系列30-断点续传下载文件示例

1. 断点续传简介 在文件的下载中&#xff0c;特别是大文件的下载中&#xff0c;可能会出现各种原因导致的下载暂停情况&#xff0c;如果不做特殊处理&#xff0c;下次还需要从头开始下载&#xff0c;既浪费了时间&#xff0c;又浪费了流量。不过&#xff0c;HTTP协议通过Range…

基于web的酒店客房管理系统【附源码】

基于web的酒店客房管理系统&#xff08;源码L文说明文档&#xff09; 目录 4 系统设计 4.1 系统概述 4.2系统结构 4.3.数据库设计 4.3.1数据库实体 4.3.2数据库设计表 5系统详细实现 5.1 用户信息管理 5.2 会员信息管理 5.3 客房信息管理 5.…

k8s系列-Rancher 上操作的k8s容器网络配置总结

Rancher 上操作的k8s容器网络配置总结 要在 Rancher 中配置Spring Boot 应用 ykhd-zhjgyw-xpwfxfjfl 服务&#xff0c;正确的配置方式如下&#xff1a; 1. 应用程序监听端口 在 application.yaml 文件中&#xff0c;配置的应用监听端口是 10001&#xff0c;并且应用的上下文…