【Java Web】速通JavaScript

参考笔记:JavaWeb 速通JavaScript_javascript 速通-CSDN博客


目录

一、JavaScript快速入门

        1. 基本介绍

        2. JavaScript特点

        3. JavaScript的引入方式(重要)

                3.1 写在script标签中

                ​​​​​3.2 以外部文件方式引入

二、JS的数据类型

        1. 变量

        2. 常用数据类型

        3.特殊值

三、JS的运算符

        1. 算数运算符

        2. 关系运算符 

        3. 逻辑运算符 || &&

         4.三目运算符

四、JS的分支结构和循环结构

        1. 分支结构

        2. 循环结构

五、JS中的数组

        1. 特点

        2. 创建方法

        3. 遍历方法

六、JS的函数

        1. 简介

        2. 声明方式

        3. 使用的注意事项

七、JS事件

        1. 什么是事件

        2. 常见事件

        3. 事件的绑定

                3.1 通过属性绑定

                3.2 通过DOM编程绑定

        4. 事件的案例演示

                4.1 onclick

               4.2 onblur

                4.3 onchange

八、JS创建对象的2种方式

九、BOM、DOM编程


一、JavaScript快速入门

        1. 基本介绍

        JavaScript 主要用于页面元素的动态处理,能改变 HTML 的内容和属性,能改变 HTML 的样式(CSS),能完成页面的数据验证,能控制网页的行为等等

        ② 关于 JS 代码:

  • JS 代码通常写在 <head></head> 内的 <script></script> 标签中

  • <script> 标签中的属性 type="text/javascript" 可加可不加

  • JS语句可不写分号 " ;"

        2. JavaScript特点

  • 脚本语言

    • JavaScript 是一种解释型的脚本语言。不同于 C、C++、Java 等语言需要先编译后执行, JavaScript 不会产生编译出来的字节码文件( Java 文件编译后会生成 .class 字节码文件),而是在程序的运行过程中对源文件逐行进行解释

  • 基于对象

    • JavaScript 是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。但是面向对象的三大特性:『封装』『继承』『多态』中,JavaScript 能够实现封装,可以模拟继承(但不是真正的继承),不支持多态

var i = 10;
var str = "小马"
  • 弱类型

    •  JavaScript 中有明确的数据类型,但是声明一个变量后它可以接收任何类型的数据,并且会在程序执行过程中根据上下文自动转换类型

    • JavaScript  的语法规范性没有那么强,约束性较弱

        3. JavaScript的引入方式(重要)

                3.1 写在script标签中

        虽然可以在 html 文件任意位置嵌入 <script> 标签,但通常还是写在 <head> 中,因为 html 文件的执行顺序是从上到下

                案例演示:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script>function suprise(){alert("Hello,我是惊喜")}</script></head><body><button onclick="suprise()">点我有惊喜</button></body>
</html>

        缺陷 + 解决方案:

缺陷:仅能在当前页面上使用,代码复用度不高

解决方案:将脚本放在独立的 js 文件中,通过 script 标签引入外部脚本文件

                ​​​​​3.2 以外部文件方式引入

        方法:  

         <script></script> 标签中添加 src 属性

        src 属性指明 .js 文件的路径,相对路径和绝对路径均可

                案例演示:

        第 1 步:抽取代码到独立的 js 文件中  

        第 2 步:在 html 文件中,通过 <script> 标签的 src 属性引入外部 js 文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script src="../js/button.js"></script><!--可引入多个外部JS文件--></head><body><button onclick="suprise()">点我有惊喜</button><button onclick="scare()">点我有惊吓</button></body>
</html>

        运行效果:


二、JS的数据类型

        1. 变量

        变量是用于存储信息的"容器"。JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)JS变量对大小写敏感

                内存指浏览器的内核空间。变量指向某一个内存空间
                如下图所示 :   

        2. 常用数据类型

        ① number:数值类型。JS 中数值类型统一为 number ,包括整数和小数

        ② string:字符串类型。和 Java 的 String 相似,但 JS 中不严格区分单双引号,都可以用于表示字符串

        ③ boolean:布尔类型。在 JSif 语句中,非空字符串会被转换为 '真',非零数字也会被认为是 '真' 

        ④ Object:引用数据类型。各种对象和数组在 JS 中都是 Object 类型

        ⑤ function:函数类型。 JS 中的各种函数属于 function  数据类型

                代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript">var i = 10console.log(typeof i)//numberi = "asf"console.log(typeof i)//stringi = falseconsole.log(typeof i)//booleani = new Object()console.log(typeof i)//Objecti = [1,2,3];console.log(typeof i)//Objectfunction say(){alert("hello")}console.log(typeof say)//function</script>
</head>
<body>
</body>
</html>

                运行效果:

        3.特殊值

        有 3 个比较特殊的值,如下:

        ① undefined:只声明但未作初始化的变量,默认为 undefined 类型,其变量值也为 undefined 

        ② null:在 JS 中,如果给一个变量赋值 null ,其数据类型是 Object ,变量值是 null

        ③ Nan:非数值,全称是 Not a Number ,一般进行错误的数学运算会导致变量值变为Nan

                代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>special value</title><script type="text/javascript">var v1;console.log("v1 = " + v1 + ", v1 type: " + typeof v1);var v2 = null;console.log("v1 = " + v2 + ", v1 type: " + typeof v2);var v3 = 5 * '小马';console.log("v3 = &#

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

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

相关文章

Python打卡训练营-Day13-不平衡数据的处理

浙大疏锦行 知识点&#xff1a; 不平衡数据集的处理策略&#xff1a;过采样、修改权重、修改阈值交叉验证代码 过采样 过采样一般包含2种做法&#xff1a;随机采样和SMOTE 过采样是把少的类别补充和多的类别一样多&#xff0c;欠采样是把多的类别减少和少的类别一样 一般都是缺…

Mac OS 使用说明

Mac 的启动组合键 了解可通过在启动时按住一个或多个按键来访问的 Mac 功能和工具。 若要使用这些组合键中的任何一个&#xff0c;请在按下电源按钮以开启 Mac 后或在 Mac 开始重新启动后&#xff0c;立即按住相应按键。请一直按住&#xff0c;直至电脑出现对应的行为。 !!!上…

LoadRunner 是什么

LoadRunner 是一款由 Micro Focus&#xff08;原惠普企业软件部门&#xff09;开发的性能测试工具&#xff0c;广泛应用于软件、应用程序和系统的 负载测试、压力测试 和 性能分析。它通过模拟大量用户并发操作&#xff0c;帮助测试人员评估系统在高负载下的性能、稳定性和可扩…

RISC-V PMA、PMP机制深入分析

1 PMA PMA&#xff08;Physical Memory Attributes&#xff09;&#xff0c;物理内存属性&#xff0c;顾名思义就是用来设置物理内存属性的&#xff0c;但这里说“设置”&#xff0c;并不合理&#xff0c;因为一般情况下各存储的属性&#xff0c;在芯片设计时就固定了&#xf…

SQL正则表达式总结

这里写目录标题 一、元字符二、正则表达函数1、 regexp_like(x,pattern[,match_option])2、 regexp_instr(x,pattern[,start[,occurrence[,return_option[, match_option]]]]) 3、 REGEXP_SUBSTR(x,pattern[,start[,occurrence[, match_option]]]) 4、 REGEXP_REPLACE(x,patter…

Shortest path 代码

Project https://graphics.cs.utah.edu/research/projects/shortest-path-to-boundary/ Build and Debug Fork:(在Win10上&#xff09; https://github.com/chunleili/Shortest-Path-to-Boundary-for-Self-Intersecting-Meshes commit hash d3160168d2b6a58188d12e6cd959da…

AMBA总线家族成员

在AMBA总线协议体系中&#xff0c;AXI4虽然是最新且性能最强的总线协议&#xff0c;但AHB和APB仍然被广泛使用&#xff0c;主要原因在于​​场景适配性、资源优化和系统兼容性​​的综合考量。以下是具体分析&#xff1a; AMBA 1‌&#xff1a;仅包含ASB和APB1。‌AMBA 2‌&am…

前端高频面试题1:HTML/CSS/浏览器/计算机网络

目录 1.为什么会出现margin塌陷&#xff1f; 2.如何解决margin塌陷&#xff1f; 3.HTML5有哪些新特性&#xff1f; 4.常见的语义化标签有哪些&#xff1f;语义化标签的好处&#xff1f; 5.使用css和js做动画有何优劣 6.如何实现文本超出展示省略号 7.deep在css中存在吗&…

基于 Spring Boot + Vue 的墙绘产品展示交易平台设计与实现【含源码+文档】

项目简介 本系统是一个基于 Spring Boot Vue 技术栈开发的墙绘产品展示交易平台&#xff0c;旨在提供一个高效、便捷的在线商城平台&#xff0c;方便用户浏览、选购墙绘产品&#xff0c;并提供管理员进行商品管理、订单管理等功能。系统采用了前后端分离的架构&#xff0c;前…

STM32F103_Bootloader程序开发05 - Keil修改生成文件的路径与文件名,自动生成bin格式文件

导言 通过Keil的相关配置&#xff0c;可以灵活地修改输出文件的保存路径及文件名称。在Bootloader程序开发过程中&#xff0c;合理配置输出文件对于后续固件升级和自动化脚本处理至关重要。完成路径和文件名配置后&#xff0c;还可以借助Keil自带的fromelf.exe工具&#xff0c;…

力扣每日一题2025.5.28——题号:3372.连接两棵树后最大目标节点数目 |

目录 题目链接&#xff1a;3372. 连接两棵树后最大目标节点数目 I - 力扣&#xff08;LeetCode&#xff09; 题目描述 解法一&#xff1a; Java写法&#xff1a; C写法&#xff1a; 运行时间 时间复杂度和空间复杂度 总结 题目链接&#xff1a;3372. 连接两棵树后最大目…

华为防火墙NAPT配置

1.实验拓扑 2.实验配置 [SW1]dis cu # sysname SW1 # vlan batch 10 20 # interface Vlanif10ip address 192.168.10.254 255.255.255.0 # interface Vlanif20ip address 192.168.20.253 255.255.255.0 # interface GigabitEthernet0/0/1port link-type accessport default vl…

java导入excel

这样读取excel时&#xff0c;得到的是结果值&#xff0c;而不是单元格的公式 import cn.hutool.poi.excel.ExcelReader; import cn.hutool.poi.excel.ExcelUtil;InputStream inputStream file.getInputStream(); ExcelReader reader ExcelUtil.getReader(inputStream, 1); L…

stm32cube ide如何生成LL库工程

在 STM32Cube IDE 里生成使用 LL&#xff08;Low Layer&#xff09;库的工程&#xff0c;可按以下步骤操作&#xff1a; 1. 新建 STM32 工程 启动 STM32Cube IDE&#xff0c;选择File→New→STM32 Project。依据需求挑选目标 MCU 型号&#xff0c;接着点击Next。 2. 配置工程…

阿里通义实验室突破空间音频新纪元!OmniAudio让360°全景视频“声”临其境

在虚拟现实和沉浸式娱乐快速发展的今天&#xff0c;视觉体验已经远远不够&#xff0c;声音的沉浸感成为打动用户的关键。然而&#xff0c;传统的视频配音技术往往停留在“平面”的音频层面&#xff0c;难以提供真正的空间感。阿里巴巴通义实验室&#xff08;Qwen Lab&#xff0…

二十八、面向对象底层逻辑-SpringMVC九大组件之ViewResolver接口设计

在 Spring MVC 框架中&#xff0c;视图解析器&#xff08;ViewResolver&#xff09;是连接控制器逻辑与具体视图技术的核心纽带。它通过抽象化的接口设计&#xff0c;将视图的渲染逻辑与业务逻辑解耦&#xff0c;使开发者能够灵活支持 JSP、Thymeleaf、FreeMarker 等多种视图技…

LiveWallpaperMacOS:让你的 Mac 桌面动起来

随着桌面美化需求的不断提升,用户对于桌面壁纸的要求已经不再局限于静态图片。越来越多的 Mac 用户希望桌面能像 Windows 一样,拥有动态壁纸,展现个性、提升体验。LiveWallpaperMacOS 正是这样一款让你的 Mac 桌面焕发活力的开源项目。 本文将详细介绍 LiveWallpaperMacOS …

豆瓣电视剧数据工程实践:从爬虫到智能存储的技术演进(含完整代码)

通过网盘分享的文件&#xff1a;资料 链接: https://pan.baidu.com/s/1siOrGmM4n-m3jv95OCea9g?pwd4jir 提取码: 4jir 1. 引言 1.1 选题背景 在影视内容消费升级背景下&#xff0c;豆瓣电视剧榜单作为国内最具影响力的影视评价体系&#xff0c;其数据价值体现在&#xff1a…

集成均衡功能电池保护芯片在大功率移动电源的应用,创芯微CM1341-DAT、杰华特JW3312、赛微微电CW1244、中颖SH366006

一文了解集成均衡功能电池保护IC在大功率移动电源的应用 创芯微CM1341-DAT 创芯微CM1341-DAT是一款专用于4串锂离子/磷酸铁锂电池的保护芯片&#xff0c;内置有高精度电压检测电路和电流检测电路。通过检测各节电池的电压、充放电电流及温度等信息&#xff0c;实现电池过充电…

PHP生成pdf方法

1&#xff1a;第一种方法&#xff1a; 主要使用PHP的扩展 【 “spatie/browsershot”: “3.57”】 使用这个扩展生成PDF需要环境安装以下依赖 1.1&#xff1a;NPM【版本&#xff1a;9.2.0】 1.2&#xff1a;NODE【版本&#xff1a;v18.19.1】 1.3&#xff1a;puppeteer【npm in…