JS基础——基础语法（1）
|
120
|
前端
|

1645 字
|
11 分钟

简介

JS是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

常见用处：

  • 网页特效（监听用户的行为，让网页作出反应）
  • 表单验证（判断表单合法性）
  • 数据交互（获取后台数据渲染到前端）
  • 服务端变成（node.js）

由ECMAScript和Web APIS组成

ECMAScript

规定了js的基础语法，比如变量，分支语句，循环语句，对象等

Web APIS：

DOM：操作文档，对页面元素进行移动、大小、添加删除等操作

BOM：操作浏览器，比如网页弹窗，检测窗口宽度，村塾数据到浏览器等等

参考网站：MDN Web Docs

书写位置

分为行内的，内部的和外部的，和css一样

1.内部JS

写在</body>的上方，放在底部，因为浏览器是顺序加载HTML的。

2.外部JS

创建一个js文件

在HTML中引用

 <script src="./js/example/js"></script>

这种中间写了内容也会被忽略。

3.内联js

此处作为了解，后面vue框架会用到这种模式

输入输出语法

输入语法

语法一:

 document.write('example')

作用：向body输出内容

注意：如果输出的内容是标签，会被解析成网页元素。

 <body>
     <script>
         document.write("hello world");
         document.write("<h1>hello world</h1>");
     </script>
 </body>
image-20250205202706202

语法二：

 alert('example')

作用：弹出警示对话框

 alert("hello world");
image-20250205202853468

语法三：

 console.log('控制台打印')

作用：控制台输出语法，程序员调试使用

 <body>
     <script>
         document.write("hello world");
         document.write("<h1>hello world</h1>");
         console.log("hello world");
     </script>
 </body>
image-20250205203249147

输入语法

语法：

 prompt('请输入')

作用：显示一个对话框，对话框包含一个文字信息，用来提斯用户输入文字

         prompt('请输入你的年龄：')
image-20250205203513820

运行顺序

正常是顺序执行，但是alert()和prompt()会跳过页面渲染先被执行

变量

是什么

就是计算机存储数据的容器，注意变量不是数据本人，它就是一个容器。

基本使用

语法：

 let 变量名
 变量名 = 字面量
 let 变量名 = 字面量
 let 变量名 = 字面量, 变量名 = 字面量
 /*多个声明，逗号隔开，有点像css种的并集选择器，但是不推荐，可读性一般*/

举个例子

 <body>
     <script>
         let num = 10
         let uname = '张三'
         console.log(num)
         console.log(uname)
     </script>
 </body>
image-20250205204940659

再看个例子

 <body>
     <script>
         /* prompt("请输入您的姓名："),有点多余*/
         let uname = prompt("请输入您的姓名：")
         document.write(uname)
     </script>
 </body>
image-20250205205949385
image-20250205210000283

更新变量

 let age = 18
 age = 19

这个语法很像JAVA欸，这里就不说废话了。（注意：let不能多次声明哦）

我们来看一个例子

需求：交换变量的值

 <body>
     <script>
         let temp
         let num1 = 10
         let num2 = 20
         temp = num1
         num1 = num2
         num2 = temp
         console.log(num1, num2)
     </script>
 </body>
image-20250205210335495

命名规则与规范

规则：

  1. 不能用关键字
  2. 只能用下划线，字母，数字，$且不能数字开头
  3. 字母区分大小写

规范：

  1. 起名要有意义
  2. 遵守小驼峰命名法第一个单词首字母小写，后面一个单词首字母大写，例如：userName

let和var的区别

在比较旧的JS种，关键字var用来声明变量，但是现在开发种一般不咋使用，因为var存在一些问题：

  • 可以先使用后声明（不合理）
  • var声明过的变量可以重复声明（也不合理）
  • 变量提升，全局变量，没有块级作用域

结论：var已经过时了，和DW一样，被淹没在历史的尘埃里，用let挺好

数组变量

将一组数据存储在单个变量名下

 let 数组名 = [数据1，数据2，...]

我们直接看例子吧

我们建立一个数组，并打印第三个值，并输出数组总长度

 <body>
     <script>
         let arr = ['原神','崩铁','绝区零','崩坏三']
         console.log(arr[2])
         console.log(arr.length)
     </script>
 </body>
image-20250205212447107

常量

概念：用const声明的变量是常量

场景：变量的值永远不会改变，用const来声明

注意：常量不允许重新赋值，声明的时候必须初始化。

数据类型

基本数据类型

  • number 数字型(整数，小数，整数，负数都可以，JAVA、C语言我哭死)如果数字型计算错误，会出现一个NaN。对NaN进行任何操作都会返回NaN。
  • string 字符串型
    • 用单引号，双引号，以及反引号包裹的都是字符串，单引号双引号区别不大，一般用单引号。
    • 单引号双引号可以互相嵌套，但是不能自己嵌套自己
    • 必要时候可以用/转义字符，来输出引号
    • 模板字符串
  • boolean 布尔型
    • 只有两个值true和false
  • undefined 未定义型
    • 只声明变量不赋值
  • null 空类型
    • 表示赋值了但是内容为空，官方解释把null作为尚未创建的对象

引用数据类型

  • object 对象

模板字符串

       document.write('我的年龄是'+age+'岁');

像这种代码，生硬的拼在一起看着好麻烦，有没有简单的方法，有的有的兄弟们，模板字符串来啦

使用场景：

用于拼接字符串和变量

语法

  • ``用反引号
  • 内容拼接变量的时候用${}包裹住变量
 <body>
     <script>
       let uname = prompt("请输入您的姓名：");
       let age = prompt("请输入您的年龄：");
       document.write(`大家好，我叫 ${uname}，今年 ${age} 岁。`)
     </script>
 </body>

检测数据类型

通过typeof关键字来检测数据类型

  1. 作为运算符：typeof x(常用写法)
  2. 函数形式：typeof(x)

类型转换

 <body>
     <script>
       let salary = prompt("请输入你的工资");
       let bonus = prompt("请输入你的奖金");
       let total = salary + bonus;
       alert("你的工资是" + total);
     </script>
 </body>

我们来输入两个1000。

image-20250205221149121

使用表单，prompt获取过来的数据默认是字符串类型的，这里就不能进行数学运算，我们就需要进行类型转换

隐式转换

规则：

1.加号两边只要有一个是字符串，就会把零一个转化为字符串

 <body>
     <script>
       console.log('ttdr'+1);
     </script>
 </body>
 ​
image-20250205220332430

2.除了+之外的算术运算符，都会把数据转化为数字型

 <body>
     <script>
       console.log('2'-1);
     </script>
 </body>
image-20250205220530122
缺点

类型转换不明确，要靠经验

小技巧
  • 加号作为正号解析可以转化为数字型
  • 任何字符串相加的结果是字符串
 <body>
     <script>
       console.log(+'20' + 20);
     </script>
 </body>
image-20250205220737149

显式转换

语法格式：

 Number(数据)
 /*转化为数字*/
 parseInt(数据)
 /*保留整数*/
 parseFloat(数据)
 /*保留小数*/

例子：

 <body>
     <script>
       let salary = prompt("请输入你的工资");
       let bonus = Number（prompt("请输入你的奖金")）;
       let total = Number(salary) + bonus;
       alert("你的工资是" + total);
     </script>
 </body>
image-20250205221232103

正常了喵。

我们可以再简单一点

 let salary = +prompt("请输入你的工资");

综合案例

需求：用户输入商品价格，数量以及收货地址，自动打印订单信息。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>综合案例</title>
   <style>
     h2{
       text-align: center;
     }
     table,tr,th,td{
       border: 1px solid black;
     }
     table{
       border-collapse: collapse;
       /* 合并相邻边框 */
       height: 80px;
       margin: 0 auto;
       text-align: center;
     }
     th{
       padding: 5px 30px;
     }
   </style>
 </head>
 <body>
   <h2>订单确认</h2>
 ​
   <script>
     /*用户输入三个变量*/
     let price = +prompt('请输入商品价格')
     let num = +prompt('请输入商品数量')
     let address = prompt('请输入收货地址')
     /*计算价格*/
     let total = price * num
     /*页面打印*/
     document.write(`
     <table>
       <tr>
         <th>商品名称</th>
         <th>商品价格</th>
         <th>商品数量</th>
         <th>总价</th>
         <th>收货地址</th>
       </tr>
       <tr>
         <td>RTX5090</td>
        <td>${price}刀乐</td>
        <td>${num}</td>
        <td>${total}刀乐</td>
        <td>${address}</td>
       </tr>
   </table>
   `)
 ​
   </script>
 </body>
 </html>
image-20250205224351504
JavaScriptJAVA全栈前端
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
API之事件入门

							
							

							
API之入门第一课

							
							

							
JS之对象

							
							

							
JS之浅谈函数

							
							

							
JS基础之数组

							
							

							
CSS之盒子模型（1）

							
							

							
CSS之其他常见元素

							
							

							
CSS常见属性之字体属性和文本属性

							
							

							
css的三大特性以及像素和颜色

							
							

							
CSS之伪元素选择器及选择器的优先级