【Java Web】速通JavaScript

article/2025/8/19 6:34:03

参考笔记: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.hkcw.cn/article/DTJOpGWXNh.shtml

相关文章

详细到用手撕transformer上半部分

1. 剖析 Transformer 中的自注意力机制 在深度学习的广袤领域中&#xff0c;Transformer 架构宛如一颗璀璨明星&#xff0c;自 Google 团队于 2017 年在《Attention Is All You Need》论文中提出后&#xff0c;便彻底革新了自然语言处理领域&#xff0c;并且其影响力不断外延&…

特朗普越来越焦躁 泽连斯基危险了 乌克兰政坛动荡预警

特朗普在俄乌问题上显得越来越焦躁。5月25日,他在社交媒体上对俄罗斯总统普京和乌克兰总统泽连斯基进行了严厉批评。特朗普指责普京的行为“疯狂”,同时对泽连斯基的抨击尤为激烈,称其言论对乌克兰毫无益处,甚至要求他立刻停止发言。特朗普对俄乌双方进行批评的原因复杂。一…

马斯克为何会黯然离职 从政之路受挫

路透社报道,美国政府效率部负责人马斯克已在当地时间28日晚开始办理离职手续。整个过程快速且没有仪式感。由于从政导致其名下企业业绩下滑,已有投资人向特斯拉董事会提出要求,希望这位首席执行官今后必须保证全职工作。一名白宫官员对媒体表示,马斯克的离职手续将在28日晚…

安倍晋三遗孀见普京哽咽落泪 缅怀与展望俄日关系

俄罗斯总统普京于5月29日在莫斯科会见了已故日本前首相安倍晋三的遗孀安倍昭惠。普京表示,俄罗斯不会忘记安倍晋三对俄日关系发展的贡献。会谈开始时,普京向安倍昭惠送上一束鲜花,后者在会谈过程中哽咽落泪。据日媒报道,安倍晋三在担任日本首相期间与普京进行了多达27次面对…

唇语专家解读马克龙与妻子吵了什么?

唇语专家解读马克龙与妻子吵了什么?惊爆!马克龙越南之行,被妻子布丽吉特当众“打脸”。唇语专家解读,布丽吉特怒喊“滚开,你这个失败者”,马克龙则低声下气求“试试,行吗”,布丽吉特冷酷回“不” 。二人表情严肃,各自扶着旋梯走下飞机,不似往日携手前行。背后究竟有何…

vr中风--模型部署

好的&#xff0c;我需要帮助用户在本地Python环境中部署他们的康复评估模型。用户希望导入8路传感器数据&#xff0c;通过模型处理&#xff0c;并输出文字结果。作为机器学习小白&#xff0c;用户需要详细的代码和解释。 首先&#xff0c;回顾用户提供的代码&#xff0c;他们已…

Xtreme Link 技术介绍

目录 1、技术定位与核心目标 1.1 解决关键瓶颈 1.2设计理念 2、核心架构与关键技术 2.1 分布式处理单元&#xff1a; 2.2 高速互联网络&#xff1a; 3、关键性能优势 3.1 速度与效率提升 3.2 资源利用率优化 3.3 扩展性与兼容性 4、应用场景与系统协同 4.1 AI/HPC芯…

因批评印度出名的印度裔加拿大人!

因批评印度出名的印度裔加拿大人。印度人最恨的人,印度裔加拿大人贾扬特说:印度要想发展,必须让中国或者美国殖民统治一百年!他还曾说“印度是粪坑中的地狱,给我10亿美元,我都不会再回那里”。为什么他对自己的祖国有如此“刻骨铭心”的恨?贾扬特班达里,一个曾经狂热的…

主持人李彬露面 满头白发脸部浮肿 引发回忆杀

近日,知名主持人李彬在个人社交平台上发布了一段视频,向观众问好,并表示:“你可能不认识我,但你一定看过我的综艺节目!”视频中的他头顶白发,脸部略显浮肿,让不少网友感到心疼,引发了一波回忆潮。此前,李彬曾透露自己因患病而中断了工作,甚至在病床上发布了视频报平…

龙舟队员回应被偏航龙舟撞翻 无人员伤亡笑声一片

龙舟队员回应被偏航龙舟撞翻 无人员伤亡笑声一片!随着端午节临近,各地龙舟赛事成为全民狂欢,其中不乏一些热闹的小插曲。5月29日,在四川南充高坪区嘉陵江畔的一场龙舟展演活动中,第3航道的橙色龙舟队伍正冲刺前进时,被最右边4航道上的蓝色队伍撞上,全员落水。而蓝色队伍…

男子用车钥匙逗猴被猴抢走,乐极生悲!

男子用车钥匙逗猴被猴抢走。男子用车钥匙逗猴被猴抢走钥匙愤怒摔打,网友:乐极生悲了!男子用车钥匙逗猴被猴抢走男子用车钥匙逗猴被猴抢走男子用车钥匙逗猴被猴抢走责任编辑:0882

学前教育法6月1日起施行 推进学前教育规范发展

学前教育法6月1日起施行 推进学前教育规范发展!办好学前教育、实现幼有所育,关系亿万儿童健康成长,关系千家万户的切身利益,关系国家和民族的未来。自6月1日起,《中华人民共和国学前教育法》正式施行。近年来,尽管学前教育得到快速发展,但仍是国民教育体系中的薄弱环节,…

《刑侦12》大结局虐哭全网 陈慧珊演林保怡第九人格的含金量太高

TVB这次真的杀疯了!《刑侦12》大结局你敢信?追了25集,最后十分钟我下巴直接掉地上,林保怡分裂出的第九个人格,居然是《鉴证实录》女神陈慧珊演的!全剧最善良的何妙雪(陈自瑶饰),为了唤醒爱人,葬身火海...这结局,够狠!够炸!够虐!年度港剧黑马实至名归,没看的赶紧…

美俄勒冈州禁止未成年人结婚!都2025年了美国竟然还在容忍这种做法

当地时间5月28日,美国俄勒冈州的州长蒂娜科特克签署了一项法令,禁止俄勒冈州未满18岁的未成年人结婚。然而,在这则新闻背后却隐藏着一个令美国乃至世界很多国家的网民都相当吃惊的魔幻情况……先介绍下俄勒冈的情况。根据当地媒体报道,俄勒冈州原本的法律是允许年满17岁的未…

idea本地git上传gitee码云失败分析,push rejected+git手动融合

idea通过git上传到gitee失败分析 先说解决方案 先进行强行拉取gitee&#xff0c;再进行手动融合 git pull origin master --allow-unrelated-histories出现的现象 push reject 我在idea本地上创建 git init 了一个仓库&#xff0c;gitee也创建了一个仓库&#xff0c;远程连接到…

理解频域滤波

1 频域滤波基础 对一幅数字图像&#xff0c;基本的频率滤波操作包括&#xff1a; 1&#xff09;将图像变换到频率域&#xff1b; 2&#xff09;根据需要修改频率域数值&#xff1b; 3&#xff09;反变换到图像域。 使用公式表达为 &#xff0c; H(u,v) 为滤波器&#xff08;滤…

HTB-Planning

一、初始侦察与立足点建立 1.1 端口扫描与服务识别 对目标主机 10.10.11.68 进行全端口扫描&#xff0c;以识别开放的服务。 sudo nmap 10.10.11.68 -p- --min-rate5000 -A图1: Nmap 扫描结果显示开放 22 (SSH) 和 80 (HTTP) 端口&#xff0c;重点关注 80 端口的 Web 服务。 …

2025LitCTF 复现

easy_file 登录界面 尝试admin 和密码1 没成功 结果尝试了弱口令 admin 用户和 password 密码就登录成功了 文件上传 新建一个空的 新建木马.txt 文件发现上传成功 然后写入一句话木马 <?php eval($_POST[a]); ?> 上传失败 说明可能是有字符被过滤了&#xff0c;猜…

痉挛性斜颈的健康护理要点:从日常管理到康复辅助

痉挛性斜颈是一种颈部肌肉不自主收缩导致头部歪斜、扭转的神经运动障碍性疾病&#xff0c;常伴随颈部疼痛、肌肉僵硬&#xff0c;严重影响生活质量。除规范治疗外&#xff0c;科学的健康护理可缓解症状、延缓进展&#xff0c;以下是关键护理要点&#xff1a; 一、姿势管理&…

翻斗式雨量计技术说明

一、产品构造 翻斗式雨量计由不锈钢外护罩、塑料承水口、过滤网、漏斗、工作平台、磁钢、干式舌簧管、轴承螺钉、翻斗部件等组成。其中&#xff0c;计量翻斗采用工程塑料注射成型&#xff0c;由中间隔板分为两个等容积三角斗室&#xff0c;构成机械双稳态结构。 二、工作原理…