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

【web前端初级课程】第四章 什么是JavaScript

news 文章来源：https://blog.csdn.net/m0_70464577/article/details/129700202 2025/5/14 21:05:42

目录

一、JavaScript在前端的三种写法

二、常见的弹框

三、变量

四、常量

五、数据类型

六、运算符

七、循环及函数

八、相关练习

 

前言

JavaScript是一个面向对象的，弱数据类型的，解释型的，动态脚本语言。

  • 面向对象更符合我们对事物认识的视角，通过将代码中的角色进行归类，使得代码得到了梳理，具有更强的可读性以及可扩展性。

  • 从代码可执行角度上去分类，编程语言分为编译型和解释型，从数据类型的角度去分类，分为静态类型和动态类型：

    • 编译型：将整个代码编译成可执行程序，通过运行这个可执行程序达到执行代码的目的。

    • 解释型：阅读到一行代码就执行改代码，不生成可执行文件。

    • 静态类型：数据类型必须在创建变量的时候就进行指定。

    • 动态类型：无需指定变量的数据类型，变量只有赋值的那一刻才有具体数据类型。

 

一、JavaScript在前端的三种写法

（一）行内样式：在标签中加属性

 <button onclick="alert('你点我干嘛?')"> </button>>

（二）页面样式

<script type="text/javascript">alert('hello world!')
</script>

（三）外联样式

PS:注意进行引用的script标签不能自结束，也不能在内容部分中写代码，要写代码另起一个script标签。

 

二、常见的弹框

（一）alert警告框

格式：alert("自定义内容")

（二）confirm确认框

他有两个按钮，一个是取消一个是确定，点击取消confirm将会返回false，点击确定返回True。

 <script>flag = confirm("自定义内容")if (flag){alert("自定义内容")}else{alert("自定义内容")}
</script>

（三）prompt输入框

str = prompt("自定义问题","自定义默认答案")

 

三、变量

（一）创建变量（主用let）

  • 使用let关键字进行对变量的声明

  • 使用var关键字进行对变量的声明

  • 不进行声明直接通过变量名复制的方式进行创建

PS:如果无声明创建变量，变量作用域是全局

      如果使用var创建变量，那么变量是函数级作用域
      如果使用let创建变量，那么变量是块级作用

（二）变量的命名规范

  • 首先只能使用有效字符进行命名，有效字符范围：大小写字母、数字、_、$

  • 首字母不能使数字

  • 不能使用关键字或者保留字来创建变量

  • 变量名最好有意义 name = “lyh” age = 18

  • 使用小驼峰法或者下划线法进行命名，具体选择跟官方推荐

 

四、常量

常量：值不会发生变化的量。

方法：使用const 关键字创建常量。

<script>const version = "3.7.3"//此行代码会错，因为常量在初始化之后就不能在修改。version = "3.7.0"
</script>

 

五、数据类型

（一）基本数据类型

  • 数值类型Number：整型int和浮点型float

  • 字符串类型String：被单引号，双引号或反引号引起来的内容就是字符串

  • 布尔型Boolean：他只有两个值一个是True一个是False

  • 表示空类型null

  • 表示这不是一个数字：NaN（not a number）

  • 表示未定义：undefined

（二）引用数据类型

  • 数组Array：关于多个数据的容器
  • 对象Object

（三）数据类型转换

  • 自动类型转换

  • 强制类型转换：使用parseInt、parseFloat进行类型强制转换

 

六、运算符

（一）算术运算符：+    -   *    /  **

（二）逻辑运算符：&&    ||      ！    &      |

（三）比较运算符：>、<、>=、<=、 ==、===、!=

在JS中双等只判断值是否相等不判断类型

三等会考虑变量的数据类型，如果数据类型不同，即使值一样也是返回false

（四）赋值运算符：=、+=、-=、*=、\=、**=、 %=

（五）自增自减运算符：a++、++a、a--、--a

 

七、循环及函数

（一）循环结构

包括 for、while、do while、break 、continue

（二）函数

函数就是具有特定功能的代码片段。

提高代码的复用性、可读性、以及可扩展性。降低代码的耦合性（提示代码的内聚性）

语法结构
function 函数名([参数列表]){//函数相关的代码[return 返回值]
}

（三）函数的分类

  • 有参函数/无参函数

  • 有返回值/无返回值

  • 定义者：自定函数/系统函数

（四）值传递和引用传递

  • 值传递：是将自身的值赋给参数，而不是将本身传递给参数。所以值传递参与运算不影响参与传值的变量。所有的基本数据类型都是值传递。

  • 引用传递：是将自身传参到函数中，参与函数的运算。

（五）arguments对象

因为js对参数列表的管理非常的宽容，所以实参可以跟形参不一致，这样不会报错，所有参数都会存在函数内部的arguments中，我们可以通过遍历的方式访问每一个参数。

这样做的好处是，当我需要给扩展该函数，无需修改参数列表，只需判断当前参数的个数，根据个数的不同执行，不同的代码。增强代码的可扩展性。

（六）匿名函数

匿名函数就是没有名字的函数，一般这种函数使用的场景是，只需要调用这么一次，为了这一次的使用没必要起名字，于是匿名函数得到了可用武之地。

function show(fn){fn()
}
how(function(){alert("1111")
})

（七）lambda表达式（箭头表示）

lambda表示可以进一步简化匿名函数的结构,

当lambda表达式只有一个参数的时候，参数的小括号可以省略。

当lambda表达式只有一行代码的时候，大括号可以省略。

//单参单行
let fun = x => x + 5
//多参单行
fun = (x, y) => x + y
//多参多行
fun = (x, y) => {let result = x * yreturn result
}

（八）递归

递归：常用于分治思想编程，有两个必备的特点：1.自己调用自己 2.又递归结束的条件。

 

八、相关练习

练习一：菱形代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菱形</title></head><body><script>cengshu=parseInt(prompt("请输入层数"))up_cengshu=Math.ceil(cengshu/2)for(let i=1;i<=up_cengshu;i++){str1=""for(let j=1;j<=up_cengshu-i;j++){str1+=" "}for(let j=1;j<=i*2-1;j++){str1+="*"}console.log(str1)}under_cengshu=cengshu-up_cengshuz=under_cengshuif(cengshu%2==0){for(let i=1;i<=under_cengshu;i++){str2=""for(let j=2;j<=i;j++){str2+=" "}for(let j=1;j<=z*2-1;j++){str2+="*"}console.log(str2)z-=1}}else{for(let i=1;i<=under_cengshu;i++){str2=""for(let j=1;j<=i;j++){str2+=" "}for(let j=1;j<=z*2-1;j++){str2+="*"}console.log(str2)z-=1}}</script></body>
</html>

练习二：求三位水仙花数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>for(i=100;i<=999;i++){let baiwei=Math.floor(i/100)let shiwei=Math.floor(i%100/10)let gewei=i%10if(Math.pow(baiwei,3)+Math.pow(shiwei,3)+Math.pow(gewei,3)==i){console.log(i)}}</script></body>
</html>

练习三：求10！

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>let sum=1for(i=2;i<=10;i++){sum=sum*i}console.log(sum)</script></body>
</html>

练习四：求10！+9！+8！……1！

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>let zonghe=0for(i=1;i<=10;i++){let sum=1for(j=2;j<=i;j++){sum=sum*j}zonghe=zonghe+sum}console.log(zonghe)</script></body>
</html>

都看到这里了，创作不易，大家点个赞再走呗！！- ̗̀(๑ᵔ⌔ᵔ๑)

相关文章：

【web前端初级课程】第四章 什么是JavaScript

目录 一、JavaScript在前端的三种写法 二、常见的弹框 三、变量 四、常量 五、数据类型 六、运算符 七、循环及函数 八、相关练习 前言 JavaScript是一个面向对象的&#xff0c;弱数据类型的&#xff0c;解释型的&#xff0c;动态脚本语言。 面向对象更符合我们对事物…...

编程日记 2023/4/18 15:55:14

数字中国建设进行时：吉林大学党委常务副书记冯正玉一行调研实在智能

两会前夕&#xff0c;中共中央、国务院印发了《数字中国建设整体布局规划》&#xff0c;明确了加快数字中国建设的重点任务。《规划》强调&#xff0c;要加强整体谋划、统筹推进&#xff0c;把各项任务落到实处。在强化人才支撑的第四要点上&#xff0c;指出统筹布局一批数字领…...

编程日记 2023/4/13 17:51:59

面试官灵魂拷问[二]:SQL 语句中 where 条件后写上 1=1 是什么意思？

面试官灵魂拷问系列又来更新啦! “SQL 语句中 where 条件后写上 11 是什么意思&#xff1f;” 这玩意就跟很多新语言支持尾部逗号的原理一样的。 比如 Kotlin 支持数组写成 [1, 2, 3, 4, ] &#xff0c;注意4后边那个逗号&#xff0c;为什么呢&#xff1f;因为当你增加一个项…...

编程日记 2023/4/18 15:57:33

进程与线程的关系

一、 进程 进程&#xff08;Process&#xff09;是程序的一次动态执行过程&#xff0c;它对应了从代码加载、执行至执行完毕的一个完成过程&#xff0c;这个过程也是进程本身从产生、发展至消亡的过程。 操作系统同时管理一个计算机系统中的多个进程&#xff0c;让计算机…...

编程日记 2023/4/16 6:17:34

自定义异常

自定义异常 使用Java内置的异常类可以描述在编程时出现的大部分异常情况。除此之外&#xff0c;用户还可以自定义异常。用户自定义异常类&#xff0c;只需继承Exception类即可。在程序中使用自定义异常类&#xff0c;大体可分为以下几个步骤&#xff1a; 创建自定义异常类。在…...

编程日记 2023/4/12 2:56:03

基于springboot物资管理系统（程序+数据库）

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…...

编程日记 2023/4/18 15:57:31

蓝桥杯Web组备赛笔记6

目录 一、ElementUI 1、安装 2、简单使用 3、例子 4、其他内容的学习 二、echarts 1、简介 2、考点 3、安装 4、配置项&#xff1a;使用echarts的三步走 5、13届蓝桥真题&#xff08;3&#xff09;布局切换 6、数据格式处理&#xff1a;14届蓝桥模拟赛 1 期&#x…...

编程日记 2023/3/31 6:41:50

python控制语句

&#x1f34b;在本次的博客当中&#xff0c;我们来认识一下python语言的新的部分——python语言的控制语句。在我们的python语言当中控制语句大致分为三类&#xff1a;1.选择语句&#xff0c;2.循环语句&#xff0c;3.跳转语句。当我们在编写代码的时候可以根据代码的逻辑的需求…...

编程日记 2023/3/31 6:36:48

华为OD机试题【最小叶子节点】用 Java 解 | 含解题说明

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典本篇题目：最小叶子节点 题目 二叉树也可…...

编程日记 2023/4/18 15:59:06

【linux】多线程控制详述

文章目录一、进程控制1.1 POSIX线程库1.2 创建线程pthread_create1.2.1 创建一批线程1.3 终止线程pthread_exit1.4 线程等待pthread_jion1.4.1 线程的返回值&#xff08;退出码&#xff09;1.5 取消线程pthread_cancel1.6 C多线程1.7 分离线程pthread_detach二、线程ID值三、线…...

编程日记 2023/4/18 16:00:42

SpringCloud学习-实用篇01

以下内容的代码可见&#xff1a;SpringCloud_learn/day01 1.认识微服务 单体架构和分布式架构 体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署 优点&#xff1a;架构简单&#xff0c;部署成本低缺点&#xff1a;耦合度高 分布式架构&#…...

编程日记 2023/4/18 16:02:45

如何使用python删除一个文件？好用到上头.....

人生苦短&#xff0c;我用python 若想利用python删除windows里的文件&#xff0c; 这里需要使用os模块 那接下来就看看利用os模块是如何删除文件的吧~ 具体实现方法如下&#xff01; 更多学习资料:点击此处跳转文末名片获取 os.remove(path) 删除文件 path. 如果path是一…...

编程日记 2023/4/12 13:48:01

java学习笔记——权限修饰符、内部类

2.1 概述 在java中提供了四种访问权限&#xff0c;使用不同的访问权限修饰符修饰时&#xff0c;被修饰的内容会有不同的访问权限&#xff0c; public&#xff1a;公共的 protected&#xff1a;受保护的 default&#xff1a;默认的 private&#xff1a;私有的 2.2 不同权限的…...

编程日记 2023/4/15 17:21:22

Java设计模式（十二）—— 状态模式

状态模式定义如下&#xff1a;允许一个对象在其内部状态改变时改变它的行为&#xff0c;使对象看起来似乎修改了它的类。 适合状态模式的情景如下&#xff1a; 对象的行为依赖于它的状态&#xff0c;并且它必须在运行时根据状态改变它的行为。需要编写大量的条件分支语句来决定…...

编程日记 2023/3/31 6:06:40

功能测试自动化成功的7个因素

随着软件开发的不断发展&#xff0c;对高效和有效测试的需求也在不断增加。最关键的测试类型之一是功能测试&#xff0c;它确保软件执行其设计的任务。功能测试对于软件开发过程至关重要&#xff0c;而自动化对于实现更快、更可靠的结果也很重要。 为什么功能测试很重要&#x…...

编程日记 2023/3/31 6:01:39

基于openssl 自行签发https 协议证书 ，同时支持nginx配置

1准备工作 准备一台有openssl环境的主机即可&#xff0c;openssl版本暂时无要求。本次环境采用centeros7.6自带openssl。另外&#xff0c;准备一个nginx。 2证书签发 目录 1准备工作 2证书签发 2.1生成根秘钥 2.2生成根证书 2.2.1根证书格式转换 2.3生成私钥key 2.4生…...

编程日记 2023/4/14 8:37:46

Window Terminal 安装 Oh My Posh 美化

Reference Oh-My-Posh 官方文档Windows Terminal 官方文档手把手 Windows Terminal 美化 安装 微软商店搜Windows Terminal安装即可。 Oh My Posh winget 找不到 winget : 无法将“winget”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 解决方法&#xff1a;添加…...

编程日记 2023/4/16 6:18:46

单片机 | 51单片机实践

【金善愚】 单片机应用实践——基础篇 笔记整理 课程视频 &#xff1a;https://space.bilibili.com/483942191/channel/collectiondetail?sid144001   仿真软件&#xff1a;Proteus 8.13 安装链接&#xff1a;https://pan.baidu.com/s/1-1fscykdvulV60xA4Hygaw?pwdxeob   代…...

编程日记 2023/4/12 2:56:25

根据时间戳获取总用时（天时分秒）

//获取总用时&#xff08;天时分秒&#xff09; export const getTotalTime (time) > { if (!time) { return ""; } let s time / 1000; let m s / 60; let h m / 60; let day h / 24; if (Math.floor(day)) { return Math.floor(day) "天" Mat…...

编程日记 2023/4/18 16:04:50

【独家】华为OD机试 - 符合条件的子串长度 or 连续字串 ABV（C 语言解题）

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理 已参加机试人员的实战技巧本期题目：符合条件的子串长度 or 连续字…...

编程日记 2023/4/18 16:05:37

达梦数据库 linux安装

检查 Linux(Unix)系统信息 如果用户的 DM 软件安装包是经过数字签名的&#xff0c;请按官网进行相关操作。此处忽略。 获取系统位数 getconf LONG_BIT 查询操作系统release信息 lsb_release -a 查询系统信息 cat /etc/issue 查询系统名称 uname -a 之所以要先检查系统信息&…...

编程日记 2023/4/19 5:27:32

数字孪生颠覆传统铝材挤压生产，全新生产方式即将到来！

随着市场经济的发展&#xff0c;各种新型的高科技建筑材料相继出现&#xff0c;所有的基础工程均需要大量的建筑&#xff0c;需要大量门窗和建筑材料&#xff0c;而铝及其铝合金在其中占有重要的地位。随着时代的进步&#xff0c;材料的应用也发生着变化。因铝合金型材具有强度…...

编程日记 2023/4/14 8:39:44

会声会影2023新版本功能详情讲解

会声会影2023Corel VideoStudio一款功能丰富的视频编辑软件。会声会影2023简单易用&#xff0c;具有史无前例的强大功能&#xff0c;拖放式标题、转场、覆叠和滤镜&#xff0c;色彩分级、动态分屏视频和新增强的遮罩创建器&#xff0c;超越基本编辑&#xff0c;实现影院级效果。…...

编程日记 2023/4/15 17:21:40

nodejs+vue文旅门户信息网站 elementui旅游项目推荐系统 景点门票预订网站vscode

在社会快速发展的影响下&#xff0c;服务行业继续发展&#xff0c;随着旅游的人数不断增加&#xff0c;使哈尔滨旅游项目推荐平台的管理和运营比过去十年更加信息化&#xff0c;依照这一现实为基础&#xff0c;设计一个快捷而又方便的网上哈尔滨旅游项目推荐平台是一项十分重要…...

编程日记 2023/4/18 16:08:54

学习HM微博项目第4天

步骤&#xff1a;OAuth授权01_加载登录界面 -> OAuth授权02_获得accessToken -> OAuth授权03_存储账号信息 -> OAuth授权04_封装账号存储 -> OAuth授权05_封装控制器的切换 OAuth授权01_加载登录界面 为了测试方便&#xff0c;暂时把window的根控制器固定设置为授…...

编程日记 2023/4/15 17:23:24

一次完整的OCR实践记录

一、任务介绍 这次的任务是对两百余张图片里面特定的编号进行识别&#xff0c;涉及保密的原因&#xff0c;这里就不能粘贴出具体的图片了&#xff0c;下面粘贴出一张类似需要识别的图片。 假如说我的数据源如上图所示&#xff0c;那么我需要做的工作就是将上面图片里面标红的数…...

编程日记 2023/4/14 8:41:30

Java中常见的密码学知识

现代密码学 散列函数 散列函数&#xff0c;也见杂凑函数、摘要函数或哈希函数&#xff0c;可将任意长度的消息经过运算&#xff0c;变成固定长度数值&#xff0c;常见的有MD5、SHA-1、SHA256&#xff0c;多应用在文件校验&#xff0c;数字签名中。 MD5 可以将任意长度的原文生…...

编程日记 2023/3/31 5:01:25

Leetcode.2171 拿出最少数目的魔法豆

题目链接 Leetcode.2171 拿出最少数目的魔法豆 Rating &#xff1a; 1748 题目描述 给你一个 正 整数数组 beans&#xff0c;其中每个整数表示一个袋子里装的魔法豆的数目。 请你从每个袋子中 拿出 一些豆子&#xff08;也可以 不拿出&#xff09;&#xff0c;使得剩下的 非空…...

编程日记 2023/4/13 17:55:04

day1 计算机组成与结构考点汇总

一、重点知识点 计算机硬件组成、运算器、控制器奇偶校验码、循环冗余校验码、海明码指令系统&#xff1a;指令操作数寻址方式、CISC和RISC、指令流水线的计算存储系统&#xff1a;分级存储、局部性原理、cache、主存编址计算、磁盘输入输出技术&#xff1a;程序查询方式、中断…...

编程日记 2023/4/15 17:24:35

Java虚拟机的类加载机制

Java虚拟机的类加载机制综述类的生命周期类加载器双亲委派模型---综述 我们编写的Java代码如何能在一个操作系统上运行呢&#xff1f;一般来说&#xff0c;我们使用javac命令将.java文件编译成.class文件&#xff0c;也就是Java字节码文件&#xff0c;然后由JVM将字节码文件加…...

编程日记 2023/4/11 6:38:42