前端——JavaScript（JS）代码基础
浏览器：Edge
编辑器：VScode
JavaScript简介
JavaScript是一种动态的编程语言，广泛应用于网页开发中，主要用于增强网页的交互性和动态性。作为Web开发的核心技术之一，它与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处理样式和布局，而JavaScript则控制网页的行为和交互。用户可以利用JavaScript进行事件处理、表单验证、动画创建等多种功能。此外，JavaScript的应用已经扩展到服务器端（如Node.js）、移动应用开发和游戏开发等领域，成为现代编程环境中不可或缺的一部分。其跨平台和高适应性的特点，使得JavaScript成为全球最受欢迎和广泛使用的脚本语言之一。
定义
JavaScript 是一种高级的、解释执行的编程语言，主要用于构建网页和应用的交互界面。它允许开发者实现网页的动态效果和响应用户行为，同时也被用于服务器端编程、移动应用开发等多种平台。
JS特点
1.交互性（信息的动态交互）
2.安全性（不可以直接访问本地磁盘）
3.跨平台性（浏览器就可以解析JS）
JS由三大部分组成
1.核心（ecmascript）:语法部分
2.文档对象模型DOM
3.浏览器对象模型ROM
ECMAScript(核心)作为核心，它规定了语言的组成部分:语法、类型、语句、关键字、保留字、操作符、对象DOM 把整个页面映射为一个多层节点结果，开发人员可借助DOM 提供的API，轻松地删除、添加、替换或修改任何节点。
支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。
为什么学习JavaScript？
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的内容，负责一个页面的结构
- CSS 描述了网页的布局，负责一个页面的样式
- JavaScript 控制了网页的行为，负责与用户进行交互
JS示例
alert:弹窗标签
用！指令得到一个完整的HTML框架后，在title或body中加入script标签，用alert可以得到弹窗，（）中可以填写弹窗内容
在你所编辑的网页中按F12快捷键使用开发者工具可以进入网页的开发状态，首先显示的就是该网页的元素
然后可以在这里找到控制台，在控制台中也可以编写script指令
用HTML执行JS
新建一个JS文件，以a.js为例
在a.js文件中输入console.log指令，并写入内容“123”
那么如何用上一个HTML文件去执行这个JS文件呢？
首先需要把这个JS文件a.js引入到这个HTML文件js.html中
操作：在js.html中使用script指令（也可以直接使用script arc标签），并给这个script赋予属性，如图：
src中填文件的相对路径
在保存的同时，你就会发现a.js中的内容就被js.html执行了
有的编辑器也支持直接将js文件直接拖拽入HTML文件，一松手就可以直接加进去
使用JavaScript
1.通过 html 提供的一个标签 <script></script> 来把 js 代码与 html 代码集合:
<script type="text/javascript">javascript 代码</script>2.通过标签的 src属性，引入的方式把外部文件引入到 html 中。格式:
<script type="text/javascript" src="xxx.js"></script>引入的方式使js 与 html 分离，方便扩展。可缓存使用
<script>标签可以放在 html 页面任意位置，一般情况下,多放在 <head></head>之内，但是如果
html 解析及调用 html中的标签，把 script 标签放在 html 标签的下面。
3.内联JavaScript
<button onclick="alert(666)">click me</button>JavaScript关键字
JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
JavaScript关键字表：
变量
JavaScript变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
- 变量必须以字母开头
- 变量也能以$和_符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y和Y是两个不同的变量）
声明（创建）变量
以a举例对其进行赋值：
用var给变量a赋值为1，然后用console.log把a表现出来
就会得到下图这样的结果，如果只用var给变量赋值而不用log展现，是得不到任何结果的。
- 我们使用var关键词来声明变量：
var name;- 变量声明之后，该变量是空的(它没有值)。如需向变量赋值，请使用等号：
name="Ltsec";- 也可以在声明变量时对其赋值：
var name='Ltsec";在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。
在 2015 后的JavaScript 版本 (ES6)允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。
数据类型
动态类型
JavaScript拥有动态类型。相同的变量可用作不同的类型：
字符串
字符串是存储字符 (比如“Bil Gates")的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号
举一个hello world的例子
数字
JavaScript只有一种数字类型。数字可以带小数点，也可以不带。
极大或极小的数字可以用科学（指数）记数法来书写：
布尔
布尔（逻辑）只能有两个值：true 或 false
也就是“真”和“假”
数组
可以理解为一个集合
或者
或者
可以直接var arr=【】来表示数组，然后用log表示出来
下面的01234是数组的下标
当你要单独取数组的某一个元素时，需要在表示的时候用console.log(【o或1或2或3或4】)
Undefined和null
Undefined 这个值表示变量不含有值，而null表示值是空
可以通过将变量的值设置为 null 来清空变量。
声明变量类型
使用关键词“new”来声明其类型
较为麻烦，暂不细讲
运算符
算数运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| + | 加法 | x=y+2 |
| - | 减法 | x=y-2 |
| * | 乘法 | x=y*2 |
| / | 除法 | x=y/2 |
| ** | 次方 | x=y**2 |
| % | 取模（余数） | x=y%2 |
| ++ | 自增 | x=++y |
| -- | 自减 | x=--y |
a++ = a + 1，a-- = a - 1
以加法为例举个简单的例子：
赋值运算符
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x=y | |
| += | x+=y | x=x+y |
| -= | x-=y | x=x-y |
| *= | x*=y | x=x*y |
| /= | x/=y | x=x/y |
| %= | x%=y | x=x%y |
字符串+运算符
+运算符用于把文本值或字符串变量连接起来
文本
文本和数值
控制结构
条件语句
在JavaScript中，我们可以使用以下条件语句：
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- if...else if...else 语句 - 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
代码块——{}
if语句
接下来举个例子
定义一个a=11,b=12,使用if...else...条件语句
如果a>b,则打印出来true
反之则打印出来false
再调整a，b的数值，使a<b,则会出现false的结果
接下来再举一个复杂一点的例子
定义一个数值s，使用if条件语句当s小于等于59且大于等于0时打印出来‘不及格’
再使用else if条件定义60-80区间的打印出来‘良’
最后else的肯定就是‘优’的内容了
switch语句
如果条件范围很广，条件数量众多时可以使用switch条件语句
定义一个a=1，使用switch条件语句跟一个括号包含a
case条件1，2，3，使a分别等于星期一，星期二，星期三
case后加break结束此次case条件（若不加的话会持续运行到最后一个case）
而当a的值不在case值的范围里时，可以补充一个default附加条件
使a =‘写错了’
当a的值超出case范围时就会打印出default中的内容
循环语句
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
例如：
for循环
语法：
语句1 代码开始前执行
语句2 定义运行循环（代码块）的条件
语句3 在循环（代码块）已被执行后执行
使用前面那个例子里的信息举一个例子：
cars =['兰博基尼','布加迪','法拉利','劳斯莱斯','保时捷','迈凯伦'];这是一个简单的数组
如果将它直接打印下来的话会像这样显示为一个连在一块的集合
但是我们想要的是一个一个分开各占一行的形式
如果数组中的内容多（成千上万）的话是不可能使用log一个一个打印出来的
这时候就可以使用for循环条件
1 .在for循环条件的语句1前置条件中定义 i 的初始值为0
2 .运行循环代码块的条件为 i<6，其中6是数组中内容的数量
3 .语句3中再使用 i++使得 i 可以递增
4 .之后在大括号中使用log把cars[ i ]打印出来
这样就得到了以下的结果
如果不知道数组的内容到底有多长，可以把6（例子中的）替换为 数组名.length
length可以代表长度的属性
也就是cars.length，如图所示：
while循环
语法：
while循环语句相比来说就比较简单了
还借用上一个例子
使用while循环语句加入条件使 i 小于数组的长度
之后用log直接把cars[ i ] 打印出来
再补充一个i++（如果不补充的话数组内容会被无限打印出来，电脑几率卡死）
break 和 continue 语句
break语句用于跳出循环
continue用于跳过循环中的一个迭代
break
示例：
另起一个例子，如下图
上面是一串生成10以内随机整数的代码（直接问百度js随机生成整数的代码）
下面加一个条件语句if（a==6）后跟break也就是当a恰好随机到6的时候循环停止
就会出现类似下图的结果，每次刷新页面出现的结果都不相同
continue
示例：
现在我们有一个for循环
在内容中我们可以加一个if条件语句
当i恰好等于4的时候执行continue
也就是跳过这次循环，而不是整轮循环
于是4这一行就被跳过了不会输出出来
总结
看完我这篇博客就基本学会了JS的50%了
剩下50%就是JS的函数和对象
不过够你用JS干活了
欢迎加入西安开发者社区！我们致力于为西安地区的开发者提供学习、合作和成长的机会。参与我们的活动，与专家分享最新技术趋势，解决挑战，探索创新。加入我们，共同打造技术社区！
更多推荐
37
0- 0
已为社区贡献1条内容
所有评论(0)