当前位置： 首页 > news >正文

JavaScript极速入门(1)

news 2025/9/18 18:11:35

初识JavaScript

JavaScript是什么

JavaScript(简称JS),是一个脚本语言,解释型或者即时编译型语言.虽然它是作为开发Web页面的脚本语言而著名,但是也应用到了很多非浏览器的环境中.

看似这门语言叫JavaScript,其实在最初发明之初,这门语言的名字其实是在蹭Java的热度,实际上和Java差别挺大.

JavaScript和HTML和CSS之间的关系

HTML:网页的结构(骨) 

CSS:网页的表现(皮)

JavaScript:网页的行为(灵魂).

JavaScript快速上手

1.在HTML中,运行如下代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><script>alert("原神启动!")</script>
</body>
</html>

2.运行浏览器

 

引入方式

JS有三种引入方式,语法如下表所示:

引入方式语法描述示例
行内样式直接嵌入到html内部

<input type="button" value="点我一下"

οnclick="alert('haha')">

内部样式定义<script>标签,写到script标签中

<script>

        alert("星穹铁道启动!");

</script>

外部样式定义<script>标签,通过src属性引入外部js文件<script src="???.js"></script>

3种引入方式对比:

1.内部样式会出现大量代码冗余,不方便后期的维护,所以不常用.

2.行内样式,只适合于简单样式.只针对某个标签生效,缺点是不能使用太复杂的js.

3.外部样式,html和js实现了分离,这也是企业开发种常用的方式. 

基础语法

JavaScript虽然一些设计理念和Java相去甚远, 但是在基础语法层面还是有一些相似之处的.有了Java的基础很容易理解JavaScript的一些基础语法.

变量

创建变量(变量定义/变量声明/变量初始化),JS有三种方式.

关键字解释示例
var早期JS中声明变量的关键字,作用域在该语句函数范围内var name='zhangsan';
lesES6种新增声明变量的关键字,作用域在该语句所在代码块内les name='zhangsan';
const声明变量的,声明变量后不能修改const name='zhangsan';

注意事项:

1.JavaScript是一门动态弱类型的语言,变量可以存放不同类型的值(动态).比如:

var name='zhangsan';
var count=5;

随着程序的运行,变量的类型可能会发生改变(弱类型).

var a = 10;
a = "hehehe";

Java是静态强类型语言,在变量声明中,需要明确定义变量的类型.如果不强制转换,类型不会发生变化. 

2.变量命名规则:

a.组成字符可以是任何字母,数字,下划线(_)或美元符号($)

b.数字不能开头

c.建议使用驼峰命名

 3.+表示字符串拼接,也就是将两个字符串首尾相连组成新的字符串.

4.\n表示换行.

数据类型

虽然js是弱数据类型的语言,虽然js中也存在数据类型,js中的数据类型分为:原始类型和引用类型,具体有如下类型:

数据类型描述
numbernumber,不区分小数和整数.
string

字符串类型.

字符串面值需要使用引号引起来,用双引号或者单引号皆可

booleantrue真,false假
undifined表示变量未初始化

使用typeof可以返回数据的类型.

    <script>var a = 10;console.log(typeof a);var b = 'hello';console.log(typeof b);var c = false;console.log(typeof c);var d;console.log(typeof d);var e = null;console.log(typeof e);</script>

运算符

由于JavaScript大部分运算符与Java的运算符相同,因此这里只讲有区别的部分

1. /  :在java中 1 / 2 是0, 而在JavaScript中求出来的结果为0.5.

2.==比较相等(会进行隐式类型转换),比如var a = 10; var b = '10';(a==b)它们比较也会相等.

3.===比较相等(不会进行隐式类型转换), var a = 10; var b = '10';(a===b)它们不会比较相等.

4.!= 和!==规则同2,3.

代码示例:

var age = 20;
var age1 = '20';
var age2 = 20;
console.log(age==age1);//true
console.log(age===age1);//false
console.log(age==age2);true

JavaScript对象

数组

数组定义

创建数组有两种方式

1.使用new关键字进行创建.

//Array 的 A要大写
var arr = new Array();

2.使用字面变量方式创建(常用):

var arr = [];
arr = [1, 2.0, 'haha', false];//数组中的内容称为元素

注意:JS数组中的元素可以是不同类型.

数组操作

1.读:使用下标的方式访问数组元素(下标从0开始)

2.增:通过下标新增,或者使用push来新增元素.

3.改:通过下标修改.

4.删:通过splice来删除数组元素. 

    <script>var arr = [1, 2, 'haha', false];//读取数组console.log(arr[0]);//1//添加数组元素arr[4] = "add";console.log(arr[4]);//addconsole.log(arr.length);//5, 获取数组的长度//修改数组的元素arr[4] = "update";console.log(arr[4]);//update//删除数组的元素arr.splice(4, 1); //第一个参数表示从下标为4的位置开始删除,第二个参数表示要删除的元素数量.console.log(arr[4]);//undefined 元素已经删除,如果元素不存在,则结果为undefined.console.log(arr.length); //4</script>

注意:

1.如果下标超出范围读取元素,则结果为undefined

2.不要给数组名直接赋值,此时数组中的元素会全部消失. 

函数

语法格式

创建函数/函数声明/函数定义

function 函数名(形参列表) {
        函数体;

        return 返回值;

}

//函数调用

函数名(实参列表) //不考虑返回值

返回值 = 函数名(实参列表) //考虑返回值

函数定义并不会执行函数体内的内容,必须要调用才会执行.调用几次就执行几次.

function hello() {console.log("hello");
}
//如果不调用函数,则不打印执行语句.
hello();

调用函数的时候函数内部执行,函数结束时回到调用位置继续执行.调用几次就会执行几次.

函数的定义和调用先后顺序没有要求.(这一点和变量不同,变量是先定义后使用).

hello();
function hello() {console.log("hello");
}

 关于参数个数

实参和形参之间的参数可以不匹配.但是实际开发一般要求形参和实参个数匹配.

1.如果实参个数比形参多,则多出来的参数不参与函数运算.

sum(10, 20, 30); //30

2.如果实参个数比形参少,则返回undefined.

JS相比于其它语言比较灵活,实际上这种灵活性往往不是好事. 

函数表达式

另一种函数表达方式.

        var add = function() {var sum = 0;for(var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}console.log(add(10, 20));console.log(add(1, 2, 3, 4));console.log(typeof add); // function

此时形如function(){}这样的写法定义了一个匿名函数,然后将这个匿名函数用一个变量来表示. 

后面就可以通过add变量来调用函数了.

对象

在JS中,字符串,数组,数值,函数都是对象.

每个对象都有若干的属性和方法.

属性:事物的特征. 方法:事物的行为.

JavaScript的对象和Java的对象概念基本一致.只是具体的语法表项形式差别较大.

1.使用字面量创建对象.[常用]

使用{}创建对象.

var a = {}; //创建了一个空的对象
var student = {name: '蔡徐坤',height: 175,weight: 140,sayHello: function() {console.log("hello");}
};

使用{}创建对象

属性和方法使用键值对的形式来组织.

键值对之间使用 , 分割.最后一个属性后面的,可有可无.

键和值之间使用 : 分割 .

方法的值是一个匿名函数.

使用对象的属性和方法:

//1.使用 . 成员访问运算符来访问属性,'.'可以理解为"的"
console.log(student.name);
//2.使用[]来访问属性,此时属性应该加上引号
console.log(student['height']);
//3.调用方法,别忘了加上()
student.sayHello();

2.使用new Object来创建对象.

var student = new Object();
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function() {console.log("hello");
}
console.log(student.name);
console.log(student['height']);
student.sayHello();

注意:使用{}创建对象也可以随时使用student.name = '蔡徐坤';这样的方式来新增属性.

3.使用构造函数来创建对象.

function 构造函数名(形参) {

        this.属性值 = 值;

        this.方法 = function...

}

var obj = new 构造函数名(形参); 

注意:

1.在构造函数内部使用this关键字来表示当前构造的对象

2.构造函数的首字母一般是大写的.

3.构造函数的函数名可以是名词.

4.构造函数不需要return

5.创建对象的时候必须使用new关键字. 

        function Cat(name, type, sound) {this.name = name;this.type = type;this.miao = function () {console.log(sound); // 别忘了作⽤域的链式访问规则}}var mimi = new Cat('咪咪', '中华田园猫', '喵');console.log(mimi);mimi.miao();

 

 

 

 

相关文章：

JavaScript极速入门(1)

初识JavaScript JavaScript是什么 JavaScript(简称JS),是一个脚本语言,解释型或者即时编译型语言.虽然它是作为开发Web页面的脚本语言而著名,但是也应用到了很多非浏览器的环境中. 看似这门语言叫JavaScript,其实在最初发明之初,这门语言的名字其实是在蹭Java的热度,实际上和…...

编程日记 2024/3/7 13:15:37

鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：浮层）

设置组件的遮罩文本。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 overlay overlay(value: string | CustomBuilder, options?: { align?: Alignment; offset?: { x?: number; y?: number } })…...

编程日记 2024/3/7 13:13:35

Meta AI移动设备上部署LLM的新框架MobileLLM

Meta AI 研究团队推出的 MobileLLM 标志着大语言模型（LLMs）朝着模拟人类理解和生成自然语言迈出了革命性的一步。LLMs 在处理和分析大量数据集方面的能力已经显著影响了自动化客户服务、语言翻译和内容创作等多个领域。然而，由于传统 LLMs 在计算和存储资源方面的需求庞大，…...

编程日记 2024/3/7 13:12:34

使用Tesseract-OCR对PDF等图片文件进行文字识别

安装 用 Homebrew 来安装 Tesseract brew install tesseract 2. 完成 tessearact 的安装后&#xff0c;还需要安装中文数据包&#xff0c;执行以下两个操作&#xff0c; brew info tesseract 执行这个指令的目的&#xff0c;是找到 Homebrew 把 tesseract 安装在文件夹内&am…...

编程日记 2024/3/7 13:11:33

部署YOLOv8模型的实用常见场景

可以的话&#xff0c;GitHub上点个小心心&#xff0c;翻不了墙的xdm&#xff0c;csdn也可以点个赞&#xff0c;谢谢啦 车流量检测&#xff08;开源代码github&#xff09;&#xff1a; test3 meiqisheng/YOLOv8-DeepSORT-Object-Tracking (github.com) 车牌检测&#xff0…...

编程日记 2024/3/7 13:10:32

SpringBoot缓存

目录 缓存支持 缓存集成 redis缓存集成 缓存支持 Spring 框架只提供抽象&#xff0c;不提供具体的缓存存储&#xff0c;底层需要依赖第三方存储组件&#xff0c;如果当前应用没有注册CacheManager 或者 CacheResolver 实例&#xff0c;Spring Boot 会按以下缓存组件的顺序来…...

编程日记 2024/3/7 13:09:31

STC89C52串口通信详解

目录 前言 一.通信基本原理 1.1串行通信与并行通信 1.2同步通信和异步通信 1.2.1异步通信 1.2.2同步通信 1.3单工、半双工与全双工通信 1.4通信速率 二.串口通信简介 2.1接口标准 2.2串口内部结构 2.3串口相关寄存器 三.串口工作方式 四.波特率计算 五.串口初始化步骤 六.实验…...

编程日记 2024/3/7 13:08:30

基础算法|线性结构|前缀和学习

参考文章&#xff1a; https://blog.csdn.net/weixin_72060925/article/details/127835303 二维数组的前缀和练习&#xff1a; 这里要注意的地方就是求子矩阵和的时候&#xff0c;这里要减去的是x1-1&#xff0c;y1-1的部分&#xff0c;因为所求的目标值是包括边界的 //前缀…...

编程日记 2024/3/7 13:05:27

设计模式之模版方法实践

模版方法实践案例 实践之前还是先了解一下模版方法的定义 定义 模板方法模式是一种行为设计模式&#xff0c;它定义了一个骨架&#xff0c;并允许子类在不改变结构的情况下重写的特定步骤。模板方法模式通过在父类中定义一个模板方法&#xff0c;其中包含了主要步骤&#xf…...

编程日记 2024/3/7 13:03:25

sql中COALESCE函数详解

在SQL中&#xff0c;COALESCE函数是一个非常有用的函数&#xff0c;用于从其参数列表中返回第一个非NULL值。如果所有给定的参数都是NULL&#xff0c;那么COALESCE函数将返回NULL。这个函数可以接受多个参数&#xff0c;使其在处理可能出现的NULL值时非常灵活和强大。 语法 C…...

编程日记 2024/3/7 13:02:24

rust-analyzer报错“Failed to spawn one or more proc-macro servers,....“怎么解决？

最近，在使用vscode测试rust代码时，遇到了一些问题。在经过反复折腾后，最终解决了问题，在此写下作为记录，以便于以后参考。 我遇到的报错内容是： Failed to spawn one or more proc-macro servers. cannot find proc-macro-srv, the workspace E:\100rust\temp is missin…...

编程日记 2024/3/7 12:59:22

Communications--9--一文读懂双机热备冗余原理

1、热备冗余管理 2、主备系状态判断 3、如何从冷备做到热备&#xff1f; 参见&#xff1a; 用软件实现热备冗余信号系统的安全切换...

编程日记 2024/3/7 12:58:20

可调恒定电流稳压器NSI50150ADT4G车规级LED驱动器 提供专业的汽车级照明解决方案

NSI50150ADT4G产品概述&#xff1a; NSI50150ADT4G可调恒定电流稳压器 (CCR) &#xff0c;是一款简单、经济和耐用的器件&#xff0c;适用于为 LED 中的调节电流提供成本高效的方案&#xff08;与恒定电流二极管 CCD 类似&#xff09;。该 (CCR) 基于自偏置晶体管 (SBT) 技术&…...

编程日记 2024/3/7 12:57:20

Unity中使用代码动态修改URP管线下的标准材质是否透明

//修改为透明 material.SetFloat("_Surface",1.0f); material.SetInt("_SrcBlend", (int)UnityEngine.Rendering.BlendMode.One); material.SetInt("_DstBlend", (int)UnityEngine.Rendering.BlendMode.OneMinusSrcAlpha); material.Set…...

编程日记 2024/3/7 12:54:16

关于制作Python游戏全过程(汇总1)

目录 前言: 1.plane_sprites模块: 1.1导入模块: 1.1.1pygame&#xff1a;一个用于创建游戏的Python库。 1.1.2random&#xff1a;Python标准库中的一个模块&#xff0c;用于生成随机数。 1.2定义事件代号: 1.2.1ENEMY_EVENT&#xff1a;自定义的敌机出场事件代号&#xf…...

编程日记 2024/3/7 12:48:10

独立站营销新纪元：AI与大数据塑造个性化体验的未来

随着全球互联网的深入发展和数字化转型的不断推进&#xff0c;作为品牌建设和市场营销的重要载体&#xff0c;独立站将迎来新的发展机遇。新技术的涌现&#xff0c;特别是人工智能和大数据等技术的广泛应用&#xff0c;为独立站带来了前所未有的机遇与挑战。本文Nox聚星将和大家…...

编程日记 2024/3/7 12:47:09

C语言项目实战——贪吃蛇

C语言实现贪吃蛇 前言一、 游戏背景二、游戏效果演示三、课程目标四、项目定位五、技术要点六、Win32 API介绍6.1 Win32 API6.2 控制台程序6.3 控制台屏幕上的坐标COORD6.4 GetStdHandle6.5 GetConsoleCursorInfo6.5.1 CONSOLE_CURSOR_INFO 6.6 SetConsoleCursorInfo6.7 SetCon…...

编程日记 2024/3/7 12:46:08

ArmSoM规划开发基于RK3576的开发套件

ArmSoM正计划推出一款新的产品&#xff0c;这款产品将采用强大的RK3576芯片。 本文将为您介绍我们的新产品搭载的RK3576性能参数&#xff0c;以及它如何为您提供卓越的性能和功能。 RK3576处理器 RK3576处理器是一款强大的处理器&#xff0c;具备出色的性能和多样化的功能&a…...

编程日记 2024/3/7 12:44:05

视频剪辑如何提取伴奏？短视频剪辑有妙方

在多媒体处理中&#xff0c;音频的编辑和处理是不可或缺的一部分。很多时候&#xff0c;我们可能想要从一段视频或音频中提取伴奏&#xff0c;或者实现人声的分离&#xff0c;以便于进一步制作或混音。以下&#xff0c;将为您介绍一种简单而有效的方法来实现这一目标。 一、提取…...

编程日记 2024/3/7 12:43:05

【Web】浅浅地聊SnakeYaml反序列化两条常见利用链

目录 关于Yaml 关于SnakeYaml SnakeYaml反序列化利用 JdbcRowSetImpl链 ScriptEngineManager链 复现 基本原理 继续深入 关于Yaml 学过SpringBoot开发的师傅都知道&#xff0c;YAML和 Properties 文件都是常见的配置文件格式&#xff0c;用于存储键值对数据。 这里举…...

编程日记 2024/3/7 12:42:03

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/21 4:41:44

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/9/3 18:59:01

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/8/21 7:56:36

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/9/13 17:37:48

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/7/26 23:29:41

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/9/7 15:02:04

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/7/7 1:01:12

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/7/7 0:35:57

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2025/9/3 21:29:46