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

自学前端——JavaScript篇

news 文章来源：https://blog.csdn.net/weixin_72534943/article/details/139843050 2024/10/23 4:39:43

JavaScript

什么是JavsScript

JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。

作为一种客户端语言，JavaScript可以直接嵌入HTML，并在浏览器中执行。

与HTML和CSS不同，JavaScript使得网页不再是静态的，而是可以根据用户的操作动态变化的。

JavaScript的作用

JavaScript在前端开发中扮演着重要角色，其应用领域包括但不限于以下三种：

'客户端脚本'：用于在用户浏览器中执行，实现动态效果和用户交互。

'网页开发'：与HTML和CSS协同工作，使得网页具有更强的交互性和动态性。

'后端开发'：使用Node、JavaScript也可以在服务器端运行，实现服务器端应用的开发。

JS导入方式：

第一种是内联式，在html文件中直接嵌入JS代码，JS代码放在script标签内，script标签可以在head，也可以在body标签内

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS导入方式</title><script>console.log('Hello, Head 标签的内联样式')</script><!-- 外部引入,导入外联样式 --><script src="./js/myscript.js"></script>
</head><body><h1>JavaScript 的导入方式</h1>    <script>// console.log表示在控制台打印一些日志内容console.log('Hellp, body标签的内联样式')alert("你好，内联样式弹窗");</script>
</body>

JS基本语法

  <script>// 变量，var生成的变量是具有函数作用域var x;// 变量，let生成的变量具有块级作用域，let更安全更灵活，它避免了var可以引发的一些问题，特别是关于变量提升和块级作用域的方面let y = 5;// 常量const pI=3.14// 打印出x,y,pI，打印结构 undefined、5、3.14。undefined的意识就是一个空值，未定义的状态，它是JS中的一种数据类型表示变量声明但没有初始化。console.log(x , y , pI);// 创建一个字符串let name='小刘';console.log(name);// 创建一个空值// null与undefined的区别，虽然他们两个都是表示缺失值的特殊值，但是他们在含义上还是有区别的，// undefined表示一个变量已被声明但尚未被赋值或者一个对象属性不存在,当函数没有返回值的时候,默认返回的也是undefined// null表示一个变量被明确赋值为空或者不存在,它是一个被赋予的值,表示一个空对象引用或者没有对象值// undefined表示变量可能在将来被赋值,或者表示某个值还没有被计算出来.而null,明确表示没有对象值// 在实际开发中根据语境选择哪个值let empty_value = null;console.log(empty_value);</script>

JS控制语句

JS控制语句：包括条件语句和循环语句

条件语句

条件语句都会使用，if、else if、和else三个关键字。

'if'语句：用于执行一个代码块，当指定的条件为真(true)时执行。语法如下：

if(condition){//如果条件为真，执行这里的代码
}

'else'语句：用于在上一个If和所有的else if都为假时执行的代码块。语法如下：

if (condition){//如果条为真，执行这里的代码
}else{//如果条件为假，执行这里的代码
}

'else if'语句：用于在上一个if语句条件为假时，检查另一个条件。可以有多个else if语句。语法如下：

if (condition1){//如果条件1为真，执行这里的代码
}else if (condition2){//如果条件2为真，执行这里的代码
}else{//如果以上条件都为假，执行这里的代码
}

代码示例：

 let age = 18;//大于等于十八则输出你已经成年了,否则输出未成年if (age >= 18) {console.log('你已经成年了');}else{console.log('未成年');}let time = 22;if (time < 12) {alert('上午好');} else if (time <18) {alert('下午好');} else {alert('晚上好');}

循环语句

循环语句用于重复执行一段代码，直到指定的条件不再满足为止。

for

'for'循环：是一种常见的循环语句，用于按照指定的条件重复执行代码块。语法如下：

for(初始化表达式；循环条件；迭代器){//循环体，执行这里的代码
}

代码示例：

 console.log('for 循环');// i=0初始化我们这个循环变量为i,并且初始值为0;循环条件,当i<10时,我们就执行这个for循环,每执行完一次 就执行一次i++// i++就是i=i+1的简写,也可以为i+=1for (let i = 1; i<11;i++){console.log(i);}

while

'while'循环会在指定的条件为真的执行代码块。语法如下：

whileO(循环条件){//循环体，执行这里的代码
}

代码示例：

// while死循环console.log('while 循环');let count = 1;while (count <= 10){console.log(count);// 迭代条件count++}

break与continue

循环关键字

'break'用于跳出循环，结束循环进行。

'continue'用于跳过当前循环中的剩余代码，继续下一次循环。

代码示例：

  console.log('循环关键字');for (var i = 0;i<5;i++){// i=2跳过这个代码if ( i == 2){continue;}// i=4终止这段代码if (i == 4){break;}console.log(i);}

函数

'函数'是一段可重复使用的代码块，它可接受输入(参数)、执行特定任务，并返回输出。

function function_name(参数1，参数2，参数3，...){//参数可以不写，表示不传参//函数体，执行这里的代码return 返回值;//可选，返回值
}

代码示例如下：

<SCript>function hello(){console.log('hello world!');}
//调用这个函数hello()function hello_with_return(){return 'hello world! - 返回值'}// 用a这个变量接收这个返回值let a = hello_with_return();// 添加返回值console.log(a);console.log(hello_with_return());//传参 function hello_with_params(name){console.log('hello,' + name);}// 调用 hello_with_paramshello_with_params('如花');hello_with_params('Alice');// 作用域let global_var = '全局变量';function local_var_function(){// 局部作用域let local_var = '局部变量';console.log('函数内打印全局变量：' + global_var);console.log('函数内打印局部变量：' + local_var);}// 调用local_var_function();console.log('全局打印全局变量：' + global_var);// 因为local_var在局部作用域里面，在外部访问不到console.log('全局打印局部变量：' + local_var);</SCript>

事件

事件是文档或者浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等。常见的时间如下：

事件描述
onClick点击事件
onMouseOver鼠标经过
onMouseOut鼠标移出
onChange文本内容改变事件
onSelect文本框选中
onFocus光标聚集
onBlur移开光标

事件的绑定

JS绑定事件的方法有三种：

1、'HTNL'属性

2、'DOM'属性

3、'addEventListener'方法

代码示例：

<body><button onclick="click_event()">这是一个点击事件按钮</button><input type="text" onfocus="focus_event()" onblur="blur_event()"><script>// 点击事件function click_event() {alert('点击事件触发了');}// 聚焦事件function focus_event(){console.log('获取焦点');}// 失去焦点function blur_event(){console.log('失去焦点');}</script>
</body>

注：刚开始接触前端，希望有大佬提出建议，本人虚心学习。

相关文章：

自学前端——JavaScript篇

JavaScript 什么是JavsScript JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果&#xff0c;增加用户与网页的交互性。 作为一种客户端语言&#xff0c;JavaScript可以直接嵌入HTML&#xff0c;并在浏览器中执行。 与HTML和CSS不…...

编程日记 2024/6/21 3:53:48

高考毕业季--浅谈自己感想

随着2024年高考落幕&#xff0c;数百万高三学生又将面临人生中的重要抉择&#xff1a;选择大学专业。在这个关键节点&#xff0c;计算机相关专业是否仍是“万金油”的选择&#xff1f;在过去很长一段时间里&#xff0c;计算机科学与技术、人工智能、网络安全、软件工程等专业一…...

编程日记 2024/6/21 3:50:43

遥感图像地物覆盖分类，数据集制作-分类模型对比-分类保姆级教程

遥感图像地物覆盖分类，数据集制作-分类模型对比-分类保姆级教程 在遥感影像上人工制作分类数据集采用python+gdal库制作数据集挑选分类模型(RF、KNN、SVM、逻辑回归)选择随机森林模型建模分类遥感图像预测在遥感影像上人工制作分类数据集 1.新建shp文件 地理坐标系保持和影像…...

编程日记 2024/6/21 3:49:41

【Android面试八股文】Kotlin内置标准函数let的原理是什么？

确实，let 函数在 Kotlin 中被广泛使用，特别是在处理可空类型或者需要在对象上执行一系列操作后返回结果的场景中非常有用。 let 函数的源代码 /*** Calls the specified function [block] with `this` value as its argument and returns its result.** For detailed usage i…...

编程日记 2024/6/21 3:47:39

网工面试总结1

网工还是要基本会ACL、ISIS、OSPF、MPLS、QOS、GVRP、VRRP、FW、BGP、STP、IV4\6、WLAN、路由策略、策略路由、LACP等都或多或少要知道&#xff0c;常见的哪怕没有实战&#xff0c;要在ensp、cisco中练过&#xff01; OSPF邻居故障&#xff0c;你认为是哪些原因&#xff1f;或者…...

编程日记 2024/6/21 3:46:37

[stm32]密码锁

[stm32]密码锁 需要资料的请在文章末尾获取~ ​​ 01描述 使用原件&#xff1a;stm32f103c8t6最小系统板x1&#xff0c;0.96寸OLED显示屏四角x1&#xff0c;4x4矩阵按键x1; 键位对应图&#xff1a; 1&#xff0c; 2&#xff0c; 3&#xff0c; 4------------- 1 2 3 4 5&am…...

编程日记 2024/6/21 3:45:36

优化yarn在任务执行时核数把控不准确的问题

核数不准这个事情是个概率问题&#xff0c;如果你碰见了&#xff0c;只能说你有点非欧&#xff0c;本质上是因为集群配置问题&#xff0c;默认时yarn不会去精准把控任务的核数&#xff0c;因为默认的资源计算方式是用实际内存去估算核数&#xff0c;这就导致如果大家配置任务时…...

编程日记 2024/6/21 3:43:33

2024年，收付通申请开通流程

大家好&#xff0c;今天咱们来聊聊关于APP场景中开通微信收付通的一些实用小窍门。在如今的移动互联网时代&#xff0c;很多商家都选择通过APP来提供服务和产品&#xff0c;因此如何在APP中顺利集成微信收付通功能&#xff0c;让用户能够轻松完成支付&#xff0c;就显得尤为重要…...

编程日记 2024/6/21 3:42:32

Django使用django-apscheduler实现定时任务

定时任务可以在后台定时执行指定的代码&#xff0c;避免了很多人为操作。下面是在Django项目中如何使用定时任务的具体操作流程。 我在这里使用的 django-apscheduler库来实现定时任务。 一、安装 django-apscheduler pip install django-apscheduler二、在项目的setting.py…...

编程日记 2024/6/21 3:41:29

python数据分析：修改数据

在 Python 中进行数据分析时&#xff0c;通常使用 pandas 库来处理和修改数据。以下是一个完整的示例&#xff0c;展示如何使用 pandas 库读取数据、修改数据并保存结果。 1. 安装并导入必要的库 首先&#xff0c;确保你已经安装了 pandas 库。如果没有安装&#xff0c;可以使…...

编程日记 2024/6/21 3:38:21

【免费API推荐】：解锁无限创意，让您的应用更具竞争力（8）

热门高效的免费实用类API是当今开发者们追逐的宝藏。这些API提供了各种热门功能和服务&#xff0c;能够帮助开发者轻松地为应用程序增添实用性和吸引力。无论是人脸识别、自然语言处理、机器学习还是图像处理&#xff0c;这些热门高效的免费API提供了强大的功能和高效的性能&am…...

编程日记 2024/6/21 3:37:20

日语 11 12

11. 若者の意識　わかもの　　いしき 新作　新作　新作　新作　新作　しんさく 公開　公開　公開　公開　公開　こうかい 映像　映像　映像　映像　映像　えいぞう 人気　人気　人気　人気　人気　にんき 来週　来週　来週　来週　来週　らいしゅう 外国　外国　外国　外国　外…...

编程日记 2024/6/21 3:35:17

STM32程序启动过程

&#xff08;1&#xff09;首先对栈和堆的大小进行定义&#xff0c;并在代码区的起始处建立中断向量表&#xff0c;其第一个表项是栈顶地址&#xff08;32位&#xff09;&#xff0c;第二个表项是复位中断服务入口地址&#xff1b; &#xff08;2&#xff09;然后执行复位中断&…...

编程日记 2024/6/21 3:34:16

天才简史——Diederik P. Kingma与他的Adam优化器

一、了解Diederik P. Kingma 发生日期&#xff1a;2024年6月18日 前几日&#xff0c;与实验室同门一同前往七食堂吃饭。饭间&#xff0c;一位做随机优化的同门说他看过一篇被引18w的文章。随后&#xff0c;我表示不信&#xff0c;说你不会数错了吧&#xff0c;能有1.8w次被引都…...

编程日记 2024/6/21 3:29:08

两个src案例分享

案例一 文前废话:某天正在刷着**社区的帖子,欣赏着漂亮的小姐姐,突然间评论区的一条评论引起了我的注意,类似于下面这样 这种评论在html标签中代码格式是<a>这是文字</a>这样的 同时评论区XSS漏洞的高发区,想着可能会有操作点 一、发布一个标题有js语句的贴子 二…...

编程日记 2024/6/21 3:26:05

宕机了， redis如何保证数据不丢？

前言 如果有人问你&#xff1a;"你会把 Redis 用在什么业务场景下&#xff1f;" 我想你大概率会说&#xff1a;"我会把它当作缓存使用&#xff0c;因为它把后端数据库中的数据存储在内存中&#xff0c;然后直接从内存中读取数据&#xff0c;响应速度会非常快。…...

编程日记 2024/6/21 3:25:03

太速科技-基于XCVU9P+ C6678的100G光纤的加速卡

基于XCVU9P C6678的100G光纤的加速卡 一、板卡概述 二、技术指标 • 板卡为自定义结构&#xff0c;板卡大小332mmx260mm; • FPGA采用Xilinx Virtex UltralSCALE 系列芯片 XCVU9P; • FPGA挂载4组FMC HPC 连接器; • 板载4路QSPF&#xff0c;每路数据速…...

编程日记 2024/6/21 3:24:02

Maven：一个下载jar依赖失败的问题解决方案

内部的一个jar包已经上传到了私服上&#xff0c;在私服管理端也能看到该jar包的完整信息&#xff0c;但是springboot项目引入该jar包发现死活下载不下来&#xff0c;报错如图&#xff1a; 从该错误信息中可以看到&#xff0c;找不到服务名是xxl-job这个的&#xff0c;我们要找的…...

编程日记 2024/6/21 3:23:01

Java 枚举的基本使用

一、枚举的概述 java 枚举&#xff08;Enum&#xff09;是一种特殊的数据类型&#xff0c;它允许你定义一组命名的常量。在 Java 中&#xff0c;枚举被实现为类&#xff0c;并且继承自 java.lang.Enum 类。枚举的使用可以提供类型安全、可读性强、易于理解的代码。 (1) 枚举的…...

编程日记 2024/6/21 3:22:00

Semaphroe + CountDown

Semaphore 基本使用 synchronized 可以起到锁的作用&#xff0c;但某个时间段内&#xff0c;只能有一个线程允许执行 Semaphore&#xff08;信号量&#xff09;用来限制能同时访问共享资源的线程上限&#xff08;不是资源数&#xff09;&#xff0c;非重入锁 不像之前的reen…...

编程日记 2024/6/21 3:19:56

解读代理 IP差异：ISP 代理与住宅代理

独立IP作为跨境必备工具&#xff0c;代理类型五花八门&#xff0c;今天IPFoxy全球代理将为搭建科普&#xff1a;ISP代理与住宅代理在理论上与使用上的区别。代理充当用户和互联网之间的中介&#xff0c;提供各种功能以增强安全性、隐私性和可访问性。在众多代理类型中&#xff…...

编程日记 2024/6/21 3:17:51

maven-jar-plugin maven打包插件笔记

文章目录 配置示例 其他官网文档问题maven打包插件是如何和打包动作关联在一起的?配置文件中 goal是必须的吗? maven自定义插件内容很多&#xff0c;也不易理解&#xff0c;这里把maven打包插件单拿出来&#xff0c;作为入口试着理解下。 配置示例 <plugin><groupI…...

编程日记 2024/6/21 3:16:49

云服务器部署Neo4j

文章目录 导读安装Neo4j先去官网看看下载安装包如果真的下载了rpm安装包 插件 导读 大模型&#xff0c;他终于来了。 不过呢&#xff0c;大模型相关&#xff0c;现在也就跟着热点去尝试一下multi-agent的RAG方向&#xff0c;看看能做到什么地步。总之我们先从安装neo4j开始。…...

编程日记 2024/6/21 3:15:47

day64 图论 图论理论基础 深搜 广搜 98. 所有可达路径

图论理论基础 图的种类 整体上一般分为 有向图 和 无向图。 度 无向图中有几条边连接该节点&#xff0c;该节点就有几度。 在有向图中&#xff0c;每个节点有出度和入度。 出度&#xff1a;从该节点出发的边的个数。 入度&#xff1a;指向该节点边的个数。 连通性 在图…...

编程日记 2024/6/21 3:14:46

从0进入微服务需要了解的基础知识

文章目录 系统架构演化过程为什么要了解系统架构的演化过程技术发展认知技术选型与创新 演变过程单体架构分层-分布式集群微服务 分布式\集群\微服务 微服务中的核心要素-拆分原则项目拆分与复杂度微服务的拆分维度有哪些小结 微服务中的核心要素服务化进行拆分后一定是微服务&…...

编程日记 2024/6/21 3:13:44

MySQL之复制(七)

复制 定制的复制方案 分离功能 许多应用都混合了在线事务处理(OLTP)和在线数据分析(OLAP)的查询。OLTP查询比较短并且是事务型的。OLAP查询则通常很大&#xff0c;也很慢&#xff0c;并且不要求绝对最新的数据。这两种查询给服务器带来的负担完全不同&#xff0c;因此它们需…...

编程日记 2024/6/21 3:11:41

Redis分片集群搭建

主从模式可以解决高可用、高并发读的问题。但依然有两个问题没有解决&#xff1a; 海量数据存储高并发写 要解决这两个问题就需要用到分片集群了。分片的意思&#xff0c;就是把数据拆分存储到不同节点&#xff0c;这样整个集群的存储数据量就更大了。 Redis分片集群的结构如…...

编程日记 2024/6/21 3:10:39

请解释Java中的策略模式，并举例说明其应用场景和实现方式。请解释Java中的模板方法模式，并讨论其在实际项目中的应用。

请解释Java中的策略模式&#xff0c;并举例说明其应用场景和实现方式。 策略模式&#xff08;Strategy Pattern&#xff09; 策略模式是一种行为设计模式&#xff0c;它使你能够定义一系列算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以互相替换。策略模式使…...

编程日记 2024/6/21 3:09:37

Vim基础操作：常用命令、安装插件、在VS Code中使用Vim及解决Vim编辑键盘错乱

Vim模式 普通模式&#xff08;Normal Mode&#xff09;&#xff1a; 这是 Vim 的默认模式&#xff0c;用于执行文本编辑命令&#xff0c;如复制、粘贴、删除等。在此模式下&#xff0c;你可以使用各种 Vim 命令来操作文本。插入模式&#xff08;Insert Mode&#xff09;&#…...

编程日记 2024/6/21 3:06:32

基于Windows API DialogBox的对话框

在C中&#xff0c;DialogBox函数是Windows API的一部分&#xff0c;它用于在Win32应用程序中创建并显示一个模态对话框。DialogBox函数是USER32.DLL中的一个导出函数&#xff0c;因此你需要在你的C Win32应用程序中链接到这个库。 #include "framework.h" #include …...

编程日记 2024/6/21 3:05:31

淮北做网站/8大营销工具指的是哪些

Linux CPU性能监测平均负载和 CPU 使用率压测命令 stress模拟负载场景监测工具topmpstatpidstat补充&#xff1a;自愿上下文切换和非自愿上下文切换平均负载和 CPU 使用率 平均负载是指单位时间内的活跃进程数&#xff0c;也就是处于可运行状态和不可中断状态(D)的进程数。不仅…...

编程日记 2024/10/23 3:21:53

网站建设需求指引/今日新闻头条最新消息

CISCO ADSL 配置详细过程!vpdn enable 　　no vpdn logging 由于ADSL的PPPoE应用是通过虚拟拨号来实现的所以在路由器中需要使用VPDN的功能 　　! 　　vpdn-group pppoe 为PPPoE启动了VPDN的进程 　　request-dialin 　　protocol pppoe 设置拨号协议为PPPoE 　　! 　　int…...

编程日记 2024/10/23 3:20:50

如何利用视频网站做推广/百度一下首页官网下载

1 导语 PHY芯片的初始化配置有硬件配置和软件配置两种途径&#xff0c;当系统上电之后默认采用硬件配置的模式&#xff0c;如需要更改配置&#xff0c;可以通过软件写寄存器的方式来更改模式。此处主要说明硬件配置的方法&#xff0c;除PHY芯片地址之外&#xff0c;其…...

编程日记 2024/10/23 3:16:46

怎样建设网站后台/网站优化设计公司

网上有很多奇奇怪怪的复杂的方案&#xff0c;其实误导了&#xff0c;方法很简单&#xff1a; 打开项目属性 修改Bundle Identifiler 随便生成了四个App,如下所示&#xff1a; 转载于:https://www.cnblogs.com/JimmyBright/p/4646734.html...

编程日记 2024/10/23 0:14:53

wordpress 首页图没了/石家庄最新消息

Java Web 知识点总结(一)(2012-03-10 18:57:59)转载▼标签&#xff1a; 服务器端sql语言客户端浏览器mysql数据库it 分类&#xff1a; java1、JavaEE的四层体系结构是什么&#xff1f;客户端层 web层(表现层) 业务逻辑层 数据层web层 请求、响应 ---- Servlet/JSP Struts业务层…...

编程日记 2024/10/22 23:47:35

网站 移动化/体验营销是什么

由于wildfly是jboss 8.x以上的版本&#xff0c;并且默认jdk配置要求是1.8以上&#xff0c;故在启动add-user.bat文件时&#xff0c;如果jdk版本过低&#xff0c;cmd会报异常&#xff0c;其中原因就有可能是jdk版本低造成。此时需要检查环境变量里JAVA_HOME的配置是否为jdk1.8的…...

编程日记 2024/10/22 21:03:41