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

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...