web学习笔记(九)

目录

1.初识JS(JavaScript)

1.1什么是JavaScript?

1.2HTML5 CSS3  javaScript三者的关系

1.3   JAVAScript的作用

1.4JAVAScript的组成部分

1.5JS注释

1.6补充知识

2.JS的引入方法

2.1行内式

2.2嵌入式(内嵌式)

2.3外链式

3.输入和输出

3.1输入

3.2输出 

3.3语法规定

3.4补充知识点


1.初识JS(JavaScript)

1.1什么是JavaScript?

JS是web开发领域功能强大的编程语言(脚本语言),javaScript不需要配置环境,浏览器直接可以运行。

1.2HTML5 CSS3  javaScript三者的关系

  • A:  HTML结构  用语义化的角度来描述页面。
  • B:CSS样式  用审美的角度来美化页面。
  • C: js交互(行为) 从交互的角度来提升用户体验。

1.3   JAVAScript的作用

  • 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)[ɪˈlektrɑːn]
  • App(Cordova)[kɔrˈdoʊvə]
  • 控制硬件-物联网(Ruff)[rʌf]
  • 游戏开发(cocos2d-js)

1.4JAVAScript的组成部分

  1.   JAVAScript核心语法( ECMAScript)
  2.   DOM(Document Object Model) 文档对象模型
  3.   BOM(Browser Object Model)浏览器对象模型

1.5JS注释

A:单行注释

格式:// 我是一行文字,不想被 JS引擎 执行,所以 注释起来

// 用来注释单行文字( 快捷键 ctrl + / )

B:多行注释

格式:/* 获取用户年龄和姓名 并通过提示框显示出来 */

/* */ 用来注释多行文字( 默认快捷键 alt + shift + A )

1.6补充知识

   (1)浏览器分为两部分:渲染引擎和js引擎

           A.  渲染引擎:解析HTML和CSS,俗称内核

           B.  js引擎:JS解释器(chrome浏览器内置V8引擎)

   (2) 给超链接跳转地址设置为javascript:; 是为了阻止超链接的默认跳转地址,这样点击超链接页面不会重复刷新,增强了代码规范性。

2.JS的引入方法

2.1行内式

   在标签内部进行编写JS代码(较少使用)

格式:

<button onclick="alert('警告')">单击</button>

2.2嵌入式(内嵌式)

可以在页面的任意位置插入,语句结束要记得加分号,一般习惯写在</body>之前。

格式:

   <script>alert('很好');// 语句用分号结束</script>

2.3外链式

需要另建.js文件,然后将文件引入 引入位置无所谓 在哪儿都行。

引入格式:

<script src="../JS/01.js"></script>

3.输入和输出

3.1输入

格式:prompt('请输入','某某') ;  

  • 第一个参数表示提示性文字
  • 第二个参数表示默认输入的内容,可以省略不写
  • 只编写输入语句无法在页面查看运行效果,通常搭配定义变量语句和输出语句一块使用
 var bianliang= prompt('请输入','某某') ; console.log(bianliang); 

3.2输出 

  1.    alert();      弹出一个框,是一个函数,但这个函数没有返回值。
  2.   console.log();   在控制台输出    用的比较多,多个控制台输出语句之间会用一条线分割起来
  3.     document.writr()    表示 在文档输出,输出语句在页面中直接显示。

3.3语法规定

  1.  区分大小写,大写的话会报错。             
  2.  每一条语句结束后要加结束符;
  3.  对空格 缩进 换行不敏感
  4.   符号是英文半角

3.4补充知识点

  • F12可以直接打开控制台

  • ""和''表示原样输出引号内的内容,需要输出变量的话就不加引号

  • js在执行时当发现一个错误代码时将自动终止执行后续代码

  • 在字符串中不能直接打回车换行,否则会报错。

  •  alert("");和 console.log('');可以添加\n来换行   或者\r\n

  •  document.write("");用<br>换行,这个输出语句还可以解析html标签   \ 用来转义特殊字符

  •  ES6新增 `  ` 反引号,  反引号里面的换行不会报错

  • 可以给字符串前面加上%c,这样就可以给字符串定义css样式了。

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

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

相关文章

Linux--系统安全及应用

1.1账号安全控制 用户账号是计算机使用者的身份凭证或标识&#xff0c;每个要访问系统资源的人&#xff0c;必须凭借其用户账号才能进入计算机。在Linux系统中&#xff0c;提供了多种机制来确保用户账号的正当、安全使用。 1.系统账号清理 在Linux系统中&#xff0c;除了用户手…

ChatGPT绘制全球植被类型分布图、生物量图、土壤概念图、处理遥感数据并绘图、病毒、植物、动物细胞结构图

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

2024年华为hcie方向有哪些?hcie 考点在哪里?

华为作为全球领先的ICT解决方案供应商&#xff0c;其认证体系在业内具有极高的权威性和认可度。其中&#xff0c;华为认证体系中的最高级别认证——HCIE&#xff0c;已经成为无数技术爱好者追求的目标。下面将探讨华为HCIE的方向及其考点&#xff0c;希望能对那些有志于获取HCI…

redis安装与配置

目录 1. 切换到 root 用户 2. 搜索安装包 3. 安装 redis 4. 查看 redis 是否正常存在 5. 修改ip 6. 重新启动服务器 7. 连接服务器 1. 切换到 root 用户 通过 su 命令切换到 root 用户。 2. 搜索安装包 apt search redis 这里安装的是下面的版本&#xff1a; 3. 安装 …

【MIT 6.S081】2020, 实验记录(1),Lab: Xv6 and Unix utilities

目录 实验准备TasksTask 1: Boot xv6Task 2: sleepTask 3: pingpongTask 4: primesTask 5: find 实验准备 这个 lab 用来学习尝试如何通过 system call 来实现常见的 shell 命令行程序&#xff0c;比如 ls、sleep、xargs 等。 实验官网 可以使用 docker 搭建实验环境&#x…

低代码UI构件程序设计基础实训一

步骤一 低代码在线调试工具 网址 低代码在线调试工具 步骤二 D盘建一个文件夹&#xff0c;文件夹下建两个文件夹ico和js 网上找一些图片&#xff0c;后缀.png&#xff0c;编号从0开始&#xff0c;图片另存到ico文件夹下 下载&#xff08;右键另存为&#xff09;以下四个页面…

数据结构和算法-数据结构的基本概念和三要素和数据类型和抽象数据类型

文章目录 总览数据结构的基本概念总览数据早期和现代的计算机处理的数据数据元素-描述一个个体数据对象-一类数据元素什么是数据结构小结 数据结构的三要素总览逻辑结构-集合结构逻辑结构-线性结构逻辑结构-树形结构逻辑结构-图形结构逻辑结构-小结数据的运算物理结构&#xff…

整除判断-判断正整数a能否被b整除,如果不能整除,输出商和余数 C语言xdoj42

问题描述 判断正整数a能否被b整除&#xff0c;如果不能整除&#xff0c;输出商和余数 输入说明 输入两个正整数a和b&#xff08;0<a, b<10000&#xff09;&#xff0c;a和b之间用空格分隔。 输出说明 如果a能被b整除&#xff0c;输出yes&#xff0c;否则在同…

python封装接口自动化测试套件

在Python中&#xff0c;我们可以使用requests库来实现接口自动化测试&#xff0c;并使用unittest或pytest等测试框架来组织和运行测试套件。以下是一个基本的接口自动化测试套件封装示例&#xff1a; 首先&#xff0c;我们需要安装所需的库&#xff1a; pip install requests …

《MySQL系列-InnoDB引擎04》MySQL表相关介绍

文章目录 第四章 表1 索引组织表2 InnoDB逻辑存储结构2.1 表空间2.2 段2.3 区2.4 页2.5 行2.6 拓展&#xff1a;MySQL的varchar(n)能存储几个字符&#xff1f;占多少字节&#xff1f; 3 InnoDB行记录格式4 文件格式5 约束5.1 数据完整性5.2 约束的创建和查找5.3 约束和索引的区…

2023-2024学年上学期算法设计与分析题期末考试模拟卷

2023-2024学年上学期算法设计与分析题期末考试模拟卷 文章目录 2023-2024学年上学期算法设计与分析题期末考试模拟卷单选题程序填空题输入格式:输出格式:输入样例1:输出样例1: 主观题 注意&#xff1a;该题集非标准答案&#xff0c;仅供参考&#xff0c;如果异议&#xff0c;请…

鸿蒙学习笔记

DevEco Studio, ArkTS, ArkUI, ArkCompiler, DevEco Testing是啥 DevEco Studio是华为开发的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;用于开发基于华为鸿蒙操作系统&#xff08;HarmonyOS&#xff09;的应用程序。它提供了丰富的开发工具和功能&#xff0c;包…

vue3 实现关于 el-table 表格组件的封装以及调用

一、示例图&#xff1a; 二、组件 <template><div class"sn-table" :class"props.colorType 1 ? : bg-scroll"><el-table :data"tableData" :row-class-name"tableRowClassName" height"500" style"…

DevOps(8)

目录 36.当发出的命令与上次使用时产生的结果不同时&#xff0c;会出现什么问题&#xff1f; 37./usr /local的内容是什么&#xff1f; 38.你如何终止正在进行的流程&#xff1f; 39.如何在命令行提示符中插入注释&#xff1f; 40.什么是命令分组以及他是如何工作的&…

云卷云舒:【实战篇】Redis迁移

1. 简介 Remote Dictionary Server(Redis)是一个由Salvatore Sanfilippo写的key-value存储系统&#xff0c;是一个开源的使用ANSIC语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 2. 迁移原理 redis-sh…

什么是 RFID 及其工作原理?

一、自动识别技术 自1999年麻省理工学院研究人员的首创开始&#xff0c;自动识别技术&#xff08;简称auto-ID&#xff09;的领域不断扩大。自动识别技术形成了多种技术路线&#xff0c;使我们能够自动、精确地捕获、识别和存储与物体、物品或个人相关的数据&#xff0c;从而减…

Selenium-java 定位元素时切换iFrame时的方法

具体方法如下图所示&#xff0c;如果iFrame中嵌套多层iFrame需要逐层定位到需要的那一层iFrame,完成操作后&#xff0c;执行该代码&#xff1a;driver.switchTo() .defaultContent() ; 是返回最顶部的frame

理解二叉树的遍历(算法村第七关白银挑战)

二叉树的前序遍历 144. 二叉树的前序遍历 - 力扣&#xff08;LeetCode&#xff09; 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3]解 LeetCode以及面试中提供的方法可能…

科普:嵌入式多核并行仿真

自信息技术革命以来&#xff0c;计算机一直被应用在各种复杂的数据处理中&#xff0c;如火箭弹道&#xff0c;高能物理和生物学数据等。随着嵌入式领域的多样化需求的不断丰富&#xff0c;多核CPU的应用也越来越广泛&#xff1a;嵌入式系统通常需要同时处理多个任务和实时数据&…

ChatGPT是什么,海鲸AI软件功能有哪些

ChatGPT是一种基于人工智能的对话生成技术&#xff0c;它利用深度学习模型来理解和生成自然语言对话。ChatGPT的核心是一种称为生成式预训练模型(GPT)的技术&#xff0c;它能够根据输入的对话内容生成连贯、自然的回答&#xff0c;实现智能对话的目的。这种技术的出现&#xff…