当前位置: 首页 > 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…...

ms-swift多模态训练:图文视频语音混合训练,速度提升100%+

ms-swift多模态训练&#xff1a;图文视频语音混合训练&#xff0c;速度提升100% 1. 多模态训练的新选择 在AI模型开发领域&#xff0c;多模态训练一直是个技术难题。传统方法需要分别处理文本、图像、视频和语音数据&#xff0c;然后手动对齐不同模态的特征表示&#xff0c;整…...

Qt QTabWidget标签页文字方向调校实战:当标签在左侧时,如何让文字乖乖水平显示?

Qt QTabWidget标签页文字方向调校实战&#xff1a;当标签在左侧时&#xff0c;如何让文字乖乖水平显示&#xff1f; 在桌面应用开发中&#xff0c;Qt框架的QTabWidget组件因其灵活性和易用性广受开发者青睐。但当我们尝试将标签页位置调整为左侧时&#xff0c;一个令人头疼的问…...

AzurLaneAutoScript:碧蓝航线全自动游戏助手,释放您的双手与时间

AzurLaneAutoScript&#xff1a;碧蓝航线全自动游戏助手&#xff0c;释放您的双手与时间 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAuto…...

终极指南:用OpenCore Legacy Patcher让旧Mac焕发新生的5个简单步骤

终极指南&#xff1a;用OpenCore Legacy Patcher让旧Mac焕发新生的5个简单步骤 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否还在为手中的旧款Mac无法…...

AI写论文超厉害!4款AI论文生成工具,解决毕业论文写作难题!

还在为撰写期刊论文而烦恼吗&#xff1f;面对成堆的文献、复杂的格式要求以及无休止的修改&#xff0c;许多学术人员常常感到效率低下。这并不奇怪&#xff01;不过&#xff0c;不必太担心&#xff0c;以下将推荐4款实测有效的AI论文写作工具&#xff0c;它们能帮助你在论文文献…...

Oracle日期处理进阶:除了EXTRACT,这些场景你还可以试试INTERVAL和TO_CHAR

Oracle日期处理进阶&#xff1a;解锁INTERVAL与TO_CHAR的高阶应用场景 在Oracle数据库的日常开发中&#xff0c;日期时间处理是每个开发者都无法回避的课题。当我们已经熟练掌握了EXTRACT这类基础函数后&#xff0c;往往会发现单纯提取日期部分已经无法满足复杂业务场景的需求—…...

嵌入式Linux C++开发框架AppKit实战解析

1. 嵌入式Linux C开发框架AppKit深度解析在嵌入式Linux开发领域&#xff0c;C开发者经常面临一个尴尬局面&#xff1a;标准库功能有限&#xff0c;而ROS等框架又过于庞大。AppKit框架正是为解决这一痛点而生&#xff0c;它提供了恰到好处的中间层抽象。我在多个工业控制项目中实…...

WSL 启动闪退问题排查

第一步&#xff1a;检查当前状态在开始折腾 BIOS 之前&#xff0c;我们先确认一下系统到底有没有识别到虚拟化。按下快捷键 Ctrl Shift Esc 打开任务管理器。点击左侧的“性能”图标&#xff0c;选择 “CPU”。看右下角的信息&#xff0c;找到 “虚拟化”&#xff1a;如果是“…...

3D Face HRN开源镜像:ModelScope官方cv_resnet50_face-reconstruction部署

3D Face HRN开源镜像&#xff1a;ModelScope官方cv_resnet50_face-reconstruction部署 1. 引言&#xff1a;从2D照片到3D人脸的魔法转换 你是否曾经想过&#xff0c;仅仅通过一张普通的2D人脸照片&#xff0c;就能生成精确的3D人脸模型&#xff1f;这在过去可能需要专业设备和…...

Qt——窗口部件及窗口类型、坐标系统

1.QWidget类继承QObject和QPaintDevice类&#xff0c;是所有用户界面组件的父类QObject是所有支持Qt对象模型的基类QPaintDevice是Qt中所有可绘制组件的基类QWidget的功能&#xff1a;QWidget能够绘制自己和处理用户的输入QWidget是Qt中所有窗口组件类的父类QWidget是所有窗口组…...