当前位置: 首页 > news >正文

10 JS01——初识JS

目标:
1、初识JavaScript
2、JavaScript注释
3、JavaScript输入输出语句

一、初识JavaScript

1、JavaScript是什么

· JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)
· 脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行
· 现在也可以基于Nodeis技术进行服务器端编程

2、JavaScript的作用

· 表单动态校验(密码强度检测)(JS产生最初的目的)
· 网页特效
· 服务端开发(Nodejs)
· 桌面程序(Electron)
· App(Cordova)
· 控制硬件-物联网(Ruff)
· 游戏开发(cocos2d-js)

3、HTM L/CSS/JS的关系

HTML/CSS 标记语言–描述类语言
· HTML决定网页结构和内容(决定看到什么),相当于人的身体
· CSS决定网页呈现给用户的模样(决定好不好看),相当于给人穿衣服、化妆
JS 脚本语言–编程类语言
· 实现业务逻辑和页面控制(决定功能),相当于人的各种动作

4、浏览器执行JS简介

浏览器分成两部分:渲染引擎和JS引擎
· 渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit
· JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8

浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器) 来执行 JS 代码 。
JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,
所以 JavaScript 语言归为脚本语言,会逐行解释执行。

5、JS组成

请添加图片描述

(1)ECMAScript

ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。
在这里插入图片描述
ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

(2)DOM-文档对象模型

文档对象模型(DocumentObjectModel,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口.通过DOM提供的接口可以对页面上的各种元素进行操作(大小位置、颜色等)。

(3)BOM-浏览器对象模型

BOM(Browser ObjectModel,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

6、JS三种书写位置

(1)行内式

<input type = "button" value = "点我试试" onclick = "alert('Hello World')"/>

· 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如:onclick
· 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
· 可读性差,在html中编写JS大量代码时,不方便阅读;
· 引号易错,引号多层嵌套匹配时,非常容易弄混;
· 特殊情况下使用

(2)内嵌JS

<script>alert('Hello World!');
</script>

· 可以将多行JS代码写到script标签中
· 内嵌JS是学习时常用的方式

(3)外部JS文件

<script src = "my.js"></script>

· 利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
· 引用外部JS文件的script标签中间不可以写代码
· 适合于JS代码量比较大的情况

二、JavaScript注释

(1)单行注释

//单行注释

快捷键:ctrl+/

(2)多行注释

/*
多行注释
多行注释
*/

默认快捷键:shift+alt+a
vscode中修改多行注释

三、JavaScript输入输出语句

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

相关文章:

10 JS01——初识JS

目标&#xff1a; 1、初识JavaScript 2、JavaScript注释 3、JavaScript输入输出语句 一、初识JavaScript 1、JavaScript是什么 JavaScript是世界上最流行的语言之一&#xff0c;是一种运行在客户端的脚本语言(Script是脚本的意思) 脚本语言:不需要编译&#xff0c;运行过程…...

【软考备考-综合知识】安全性、可靠性与系统性能评测基础知识

计算机的安全性 安全等级 计算机系统中的三类安全性是指技术安全性、管理安全性和政策法律安全性。 信息安全五要素 机密性&#xff1a;全包信息不暴露给未授权的实体或进程。 完整性&#xff1a;只有得到允许的人才能够修改数据&#xff0c;并能够判别出数据是否已被篡改。…...

匆忙之间难免疏忽,写代码更加如此

一个方法包含了多个知识点的合计&#xff0c;合计起来用。实战开发特点1&#xff1b; 基础知识点不牢固&#xff0c;您必定就会感觉寸步难行啊 public class AddJiChuShu{int a 1;int b 2;int c 0;int d 0;string str "";string str2 "张三";//mothe…...

低代码(七)低代码平台后端技术选型2.0

JWT 登录token Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准&#xff08;(RFC 7519).该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点的单点登录&#xff08;SSO&#xff09;场景。JWT的声明一般被用来在身份提供者和服…...

UDS介绍

首先要有网络网络七层的概念&#xff1a; 学习链接&#xff1a; 七层网络模型-CSDN博客 UDS网络层/TP层&#xff08;ISO 15765-2&#xff09;的解读 - 知乎 (zhihu.com) 概念&#xff1a; UDS&#xff08;Unified Diagnostic Services&#xff0c;统一的诊断服务。 标准名是《…...

ASP.NET Core MVC 从入门到精通之初窥门径

随着技术的发展&#xff0c;ASP.NET Core MVC也推出了好长时间&#xff0c;经过不断的版本更新迭代&#xff0c;已经越来越完善&#xff0c;本系列文章主要讲解ASP.NET Core MVC开发B/S系统过程中所涉及到的相关内容&#xff0c;适用于初学者&#xff0c;在校毕业生&#xff0c…...

英码科技智慧环卫:构建宜居城市新篇章

随着城市化进程的加快&#xff0c;城市环境卫生问题日益凸显。如何提高城市环境卫生管理水平&#xff0c;提升城市品质&#xff0c;成为了各级政府和社会各界关注的焦点。智慧环卫作为一种结合现代信息技术的环境卫生管理方式&#xff0c;正在逐渐成为解决城市环境卫生问题的有…...

在Spring Boot微服务使用HashOperations操作Redis Hash哈希散列

记录&#xff1a;403 场景&#xff1a;在Spring Boot微服务使用RedisTemplate的HashOperations操作Redis Hash哈希散列。 版本&#xff1a;JDK 1.8,Spring Boot 2.6.3,redis-6.2.5 1.微服务中Redis配置信息 1.1在application.yml中Redis配置信息 spring:redis:host: 192.1…...

innobackupex备份mysql产生returned OS error 124

解决使用innobackupex备份mysql产生returned OS error 124 xtrabackup 报错Too many open files 故障处理 一、背景 客户反馈数据库备份失败。 二、环境描述 [rootmes-node1 ~]# mysql -V mysql Ver 14.14 Distrib 5.7.24, for Linux (x86_64) using EditLine wrapper [root…...

明明有index.jsp文件访问的时候却显示404

重建一下项目...

人工智能前沿——「全域全知全能」人类新宇宙ChatGPT

&#x1f680;&#x1f680;&#x1f680;OpenAI聊天机器人ChatGPT——「全域全知全能」人类全宇宙大爆炸&#xff01;&#xff01;&#x1f525;&#x1f525;&#x1f525; 一、什么是ChatGPT?&#x1f340;&#x1f340; ChatGPT是生成型预训练变换模型&#xff08;Chat G…...

eslint-plugin-import - import/order

eslint-plugin-import是什么&#xff1f; 该插件目的在于支持ES6以上的导入/导出语法&#xff0c;并防止文件路径和导入名称拼写错误的问题。 import/order是什么&#xff1f; 按照约定的规则对引入的模块进行排序。 import/order常用规则介绍 groups 约定引入模块顺序的…...

selenium知识点大全

selenium知识点大全 在使用selenium之前必须先配置浏览器对应版本的webdriver。 1. 初始化浏览器对象 from selenium.webdriver import Chrome# 创建浏览器对象&#xff0c;并且打开一个空的页面 browser Chrome()# 关闭浏览器 browser.close()2. 访问指定网页 from selen…...

Biotin-PEG-SH生物素-聚乙二醇-巯基结构式;SH-PEG-Biotin

Biotin-PEG-SH 生物素-聚乙二醇-巯基 中文名称&#xff1a;生物素-聚乙二醇-巯基 英文名称&#xff1a;Biotin-PEG-SH Biotin-PEG-Thiol 性状&#xff1a;粘稠液体或者固体粉末&#xff0c;取决于分子量 溶剂&#xff1a;溶于水和DCM、DMF等大部分有机溶剂 分子式&#x…...

【防止恶意用户注册】-- 手机在网状态 API 的防欺诈应用解析

简介 手机在网状态 API 支持传入手机号码&#xff0c;查询手机号在网状态&#xff0c;返回在网、在网不可用、不在网&#xff08;销号/未启用/停机&#xff09;等多种状态&#xff0c;查询手机号在网状态之后&#xff0c;可以根据具体的业务需求来进行不同的处理。 本文主要介…...

Python json 数据提取 jsonpath 详解

一、JsonPath JsonPath 是一种信息抽取类库&#xff0c;是从JSON文档中抽取指定信息的工具&#xff0c;提供多种语言实现版本&#xff0c;包括&#xff1a;Javascript, Python&#xff0c; PHP 和 Java。也就是独立的可以配合多种语言进行匹配的目标值的一种类库&#xff0c;和…...

TCP和UDP的区别以及应用场景

区别 首先UDP协议非常简单&#xff0c;头部只有8个字节&#xff1a; 校验和为了提供可靠的UDP首部和数据而设计&#xff0c;防止收到在网络传输中受损的UDP包。 再对比下TCP协议&#xff1a; 传输层有两个传输协议分别是 TCP 和 UDP&#xff0c;在内核中是两个完全独立的软件…...

高铁轮毂表面缺陷的<视觉显著性>超像素图像检测方法

内容:提出一种基于视觉显著性注意机制的超像素自适应检测方法&#xff1b; 设计视觉显著性注意机制滤波器用于粗略定位出缺陷空间范围&#xff0c;结合超像素分块图像分割方法消除光照不均匀引起的噪声干扰&#xff0c;有效地完成缺陷区域的边界分割和实时特征提取&…...

纺织工业库房如何有效防潮?恒温恒湿真的有效吗?

纺织工业库房中的设备或存放的货物对温度或湿度的变化又非常敏感&#xff0c;温度或湿度的波动可能会产生一些问题。 针对库房环境温湿度的监测&#xff0c;若采用人工检测的方式&#xff0c;很难管控精准且工作效率低&#xff1b;其次&#xff0c;人工综合成本高。那么该如何实…...

SDK之动态链接库开发—基本概念

动态链接库&#xff08;Dynamic Link Library&#xff0c;简称 DLL&#xff09;是一种在运行时加载的库&#xff0c;可用于在多个应用程序之间共享代码和数据。与静态链接库相比&#xff0c;动态链接库的主要优劣势如下&#xff1a; 优势&#xff1a; 空间效率更高&#xff0…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

DBLP数据库是什么?

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...