【Java Web】速通JavaScript

news2025/6/2 22:43:21

参考笔记: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 = 10
        console.log(typeof i)//number
        
        i = "asf"
        console.log(typeof i)//string

        i = false
        console.log(typeof i)//boolean

        i = new Object()
        console.log(typeof i)//Object

        i = [1,2,3];
        console.log(typeof i)//Object

        function 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.coloradmin.cn/o/2392404.html

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

相关文章

TDengine 运维——巡检工具(安装前预配置)

背景 TDengine 的安装部署对环境系统有一定的依赖和要求&#xff0c;安装部署前需要进行环境预配置操作&#xff0c;本文档旨在说明安装前预配置工具在安装 TDengine 前对环境的预配置内容和工具的使用方法。 预配置工具使用方法 工具支持通过 help 参数查看支持的语法 Usa…

RDS PostgreSQL手动删除副本集群副本的步骤

由于PostgreSQL不支持直接删除副本集群&#xff0c;而是需要先将副本集群升级到主实例(区域集群)&#xff0c;然后在逐一将写入器实例删除&#xff0c;然后才可以删除副本集群 查看现有的主从实例集群 将副本集群提升到区域集群 选择副本集群–>操作–>提升 提升只读副本…

MySQL 自增主键重置详解:保持 ID 连续性

目录 前言正文 前言 爬虫神器&#xff0c;无代码爬取&#xff0c;就来&#xff1a;bright.cn Java基本知识&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;【Java项目】实战CRUD的功能整理&#xff08;持续更新&#xff09…

国产化Word处理控件Spire.Doc教程:通过Java简单快速的将 HTML 转换为 PDF

在处理 HTML 文件时&#xff0c;你可能会发现它们在不同的浏览器和屏幕尺寸下的显示效果并不一致。而将 HTML 转换为 PDF 则可以有效地保留其布局和格式&#xff0c;从而确保内容在不同设备和平台上的呈现保持一致。本文将介绍如何在 Spire.Doc for Java 的帮助下通过 Java 将 …

5G NTN卫星通信发展现状(截止2025年3月)

今天咱们用实实在在的数据唠唠卫星通信这事儿—这些数字可比科幻片还刺激&#xff0c;直接告诉你这玩意儿现在有多火&#xff0c;未来能有多野&#xff01; 先甩个大数字&#xff1a;截至2025年3月&#xff0c;全球已经有143个运营商和卫星厂商的合作项目&#xff0c;覆盖53个国…

【计算机网络】第2章:应用层—DNS

目录 一、PPT 二、总结 DNS&#xff08;域名系统&#xff09;详解 &#xff08;一&#xff09;DNS核心概念 &#xff08;二&#xff09;DNS查询过程&#xff08;重点❗&#xff09; &#xff08;三&#xff09;DNS资源记录&#xff08;RR&#xff09;类型…

[Linux]虚拟地址到物理地址的转化

[Linux]虚拟地址到物理地址的转化 水墨不写bug 文章目录 一、再次认识地址空间二、页表1、页表的结构设计2、页表节省了空间&#xff0c;省在哪里&#xff1f;3、页表的物理实现 一、再次认识地址空间 OS和磁盘交互的内存基本单位是4KB&#xff0c;这4KB通常被称为内存块。OS对…

Linux线程入门

目录 Linux线程概念 什么是线程 重新理解进程 线程的优点 线程的缺点 线程的异常 线程用途 Linux线程概念 什么是线程 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控制序列”。一切进程至…

Kubernetes超详细教程,一篇文章帮助你从零开始学习k8s,从入门到实战

k8s 概述 k8s github地址&#xff1a;https://github.com/kubernetes/kubernetes 官方文档&#xff1a;https://kubernetes.io/zh-cn/docs/home/ k8s&#xff0c;全程是 kubernetes&#xff0c;这个名字源于希腊语&#xff0c;意为"舵手"或"飞行员” k8s 这…

OpenHarmony平台驱动使用(二),CLOCK

OpenHarmony平台驱动使用&#xff08;二&#xff09; CLOCK 概述 功能简介 CLOCK&#xff0c;时钟是系统各个部件运行的基础&#xff0c;以CPU时钟举例&#xff0c;CPU 时钟是指 CPU 内部的时钟发生器&#xff0c;它以频率的形式工作&#xff0c;用来同步和控制 CPU 内部的各…

我们是如何为 ES|QL 重建自动补全功能的

作者&#xff1a;来自 Elastic Drew Tate Elasticsearch 拥有许多新功能&#xff0c;可以帮助你根据使用场景构建最佳搜索方案。浏览我们的示例笔记本了解更多内容&#xff0c;开始免费试用云服务&#xff0c;或者立即在本地机器上尝试 Elastic。 对于我们开发者来说&#xff0…

MATLAB在逐渐被Python淘汰吗

MATLAB在学术研究、工程仿真、数值计算等传统领域仍占据一席之地&#xff0c;但Python因其开源免费、生态丰富、易于集成的优势&#xff0c;正在快速崛起&#xff0c;逐步蚕食MATLAB的市场份额。尤其在人工智能、数据分析和科学计算等领域&#xff0c;Python的优势愈发明显。例…

Git 使用规范

Git 使用规范 一、版本控制的核心原则 &#x1f9ed;二、分支策略&#xff08;Branch Strategy&#xff09; &#x1f33f;2.1 分支类型与命名规范2.2 可视化流程图 三、提交信息规范&#xff08;Commit Message&#xff09;✍️3.1 提交格式3.2 Type 类型说明 四、Tag 版本规范…

代码随想录第43天:图论4(最小生成树、拓扑排序)

一、冗余的边II&#xff08;Kamacoder 109&#xff09; from collections import defaultdict# 并查集 - 查找根节点&#xff08;路径压缩&#xff09; def find(fa, x):if fa[x] ! x:fa[x] find(fa, fa[x])return fa[x]# 并查集 - 合并两个集合&#xff0c;返回是否合并成功 …

AI智能体|扣子(Coze)搭建【自动生成超高质量PPT】工作流

各位好久不见&#xff0c;你的失踪人口又回来了&#xff0c;已经超过一周的时间没有进行文章的更新了。 没更新的这段时间&#xff0c;主要还是因为工作上的调整以及身体生病所导致的停更&#xff0c;具体以后再说。 我们先讲今天的主要主题&#xff0c;使用 Coze 智能体一键生…

文档处理的相关工具

目前网页端的文档&#xff0c;可以通过沉浸式翻译来进行翻译阅读和学习。 但是某些文献只有pdf下载的版本&#xff0c;所以需要一个免费的针对pdf的翻译工具。 保留公式和图片格式。 推荐一个pdf翻译的工具&#xff0c;可以自己部署使用。如果需要word版本&#xff0c;后面讨论…

java基础(面向对象进阶高级)内部类

内部类 内部类概述、成员内部类 (了解&#xff09; 内部类创建对象&#xff1a; 一定要继承外部类对象&#xff0c;才能创建内部类对象。 拓展:成员内部类访问外部类的成员特点&#xff1a; 成员内部类中&#xff0c;是否可以直接访问外部类的实例成员?? 当然可以啊&#x…

使用Python,OpenCV,Tesseract-OCR对自己的运动数据图片进行识别及分析,并使用Matplotlib绘制配速图出来

使用Python,OpenCV,Tesseract-OCR对自己的运动数据图片进行识别及分析,并使用Matplotlib绘制配速图出来 1. 效果图2. 源码3. 全量源码及运动图片资源参考主要分为 目录下图片解析及读取;拼九宫格图片出来,可以自由配置(m*n)取决于自己有多少张运动图片遍历图片并进行运动…

小白的进阶之路系列之七----人工智能从初步到精通pytorch自动微分优化以及载入和保存模型

本文将介绍Pytorch的以下内容 自动微分函数 优化 模型保存和载入 好了,我们首先介绍一下关于微分的内容。 在训练神经网络时,最常用的算法是反向传播算法。在该算法中,根据损失函数相对于给定参数的梯度来调整参数(模型权重)。 为了计算这些梯度,PyTorch有一个内置…

创建型模式之 Builder (生成器)

创建型模式之 Builder (生成器) 摘要&#xff1a; 本文介绍了生成器&#xff08;Builder&#xff09;设计模式&#xff0c;属于创建型模式之一。该模式通过将复杂对象的构建与表示分离&#xff0c;使同一构建过程能创建不同表现形式。文章以小米汽车不同配置版本为例说明了模式…