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

js基础语法

news 来源：原创 2025/5/19 18:29:29

语言

强类型语言：任何的变量，常量都需要归属于某一种数据类型，而且是先定义类型，后使用。C,Java,C++,Objective-C

弱类型语言：数据有类型，但是变量没有类型。即存什么数据就是什么类型。JavaScript,php,python,swift

解释型语言：一行一行的执行，代码从上到下

程序

what：计算机程序是一组计算机能识别和执行的指令，运行于电子计算机上，满足人们某种需求的信息化工具。

任何程序都是先有需求，然后根据需求写代码

做题步骤：

先搞清楚需求
根据需求理清思路
写出解题步骤，即注释
根据步骤做填空题

编程语言发展史

人工绳结
纸带穿孔：0没有孔，1有孔
机器语言：第一代计算机语言，0/1代码，计算机只能识别0和1。
汇编语言：将一串很枯燥无味的机器语言转化成一个英语单词

缺点：可移植性贼差。编程的难度贼大

优点：速度快
高级编程语言：可移植性强，易于学习。JDK 、Jre 运行环境，速度相对的变慢。

JavaScript

JavaScript跟Java没有关系

what

一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格。也被应用到很多非浏览器环境中，如(Node.js)。

js：是运行于浏览器中客户端脚本编程语言，浏览器中js引擎。可以对我们的js代码进行解析,进而在浏览器中展示出我们想要的效果。

js引擎：js代码解析器

why

因为早期的网页只能看，非常不方便，数据验证、网页特效这些都没有，用户体验不好。

而JavaScript可以做到：

客户端数据计算
客户端表单合法性验证
浏览器事件的触发
浏览器对象的调用
网页特殊显示效果制作

JavaScript的组成

ECMA的基本语法
DOM(document object model 文档对象模型) 编程
BOM(brower object model 浏览器对象模型) 编程

JavaScript基本语法

引入(script)

页内脚本

可以将“ script ”标签写在页面内的任意处，且可写任意个。但推荐写在 “ body ” 闭合标签的上方。

因为JS是解释型语言，自上而下编译,所有代码的执行顺序也是自上而下的，如果js代码中有操作html标签的代码，此时把js写在head中，当js执行时，html标签还没有被加载到，此时会出现问题

<!DOUTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
        
        </script>
    </head>
    <body>
        <script>
        
        </script>
    </body>
</html>

外部脚本

引入外部的js文件，引入外部js文件后，将路径写入script标签中，而标签内就不能写js代码了

<script src="url"></script>

注释

单行注释：//
多行注释：/* */

变量

what：是计算机语言中能储存计算结果或能表示值的抽象概念

变量可以通过变量名访问

定义和使用

var a=5;

var : 定义变量的关键字，只要浏览器中的js引擎读取到 var 这个关键字，浏览器引擎就知道要定义变量。
a ：变量的名字 
	变量的命名规范：
		硬性规范：1.必须以 字母 _  $ 开头
				2.组成变量的字符之间不能有空格
				3. 不能以 关键字/保留字 作为变量的名字
				4.不能出现同名变量
		软性规范：1.英文有意义（语义化）
				 2.遵循小驼峰命名法

小驼峰方法命名：第一个单词首字母小写，以后每一个单词首字母大写

变量名，方法名

大驼峰方法命名：每个单词首字母均大写

类名，工程名

作用：代表数据，见名知意

输入输出语句

document.write(内容) ：向文档中写入
prompt(‘提示文本’，默认值)：带有输入框的弹出框，会把用户输入的值返回。输入的都是字符串类型
console.log(内容) ：控制台输出
alert(内容) ：弹框输出
confirm(‘提示文本’)：带有确定和取消按钮的弹出框

数据类型

why：为了更好的模拟各种场景

基本(原始)数据类型

number：数字类型
string：字符串类型，只要是使用单引号或者双引号包括的内容均是字符串类型
boolean：布尔值
null：空

typeof null == object
undefined：未定义的

null和undefined区别：null表示此处不应该有值，undefined表示此处应该有值，但是没给

typeof 操作符：检测数据类型

引用(对象)数据类型

function
array
math

运算符

算数运算符

用于执行变量或值之间的算数运算

’+‘ 加
‘-’ 减
‘*’ 乘
/ 除
% 求余取模
++ 累加
– 递减

赋值运算符

用于给js变量赋值

比较运算符

在逻辑语句中使用，以测定变量或值是否相等

== 等于，比较的是值，不比较数据类型
=== 全等，既比较值有比较数据类型
！= 不等于
！== 不全等于
‘>’ 大于
< 小于
‘>=’ 大于等于
<= 小于等于

逻辑运算符

用于测定变量或值之间的逻辑

&& and ,全真为真，一假为假
|| or，一真为真，全假为假
！ not 取反

三目运算符

一目：++ – 只需要一个数据就可以运算一目运算符

二目： ±*/% += -=。。。需要二个数据就可以运算二目运算符

三目：需要三个数据就可以运算三目运算符

格式：表达式1？表达式2：表达式3

首先判断表达式1是否成立
如果成立，结果就是表达式2
如果不成立，结果就是表达式3

**注：**三目运算符中任何一个地方都可以嵌套三目运算符，进行嵌套计算。

<script type="text/javascript">
			//三目 三元(表达式/数据)  需要三个表达式才可以运行
			let a = 10;
			let b = 50;
			let c = a < b ? (a == b ? a + b : a - b) : a / b;
			console.log(c)
		</script>

字符串参与拼接时的注意事项

‘+’ 运算符

正常使用，就是做数学运算
做拼接运算。(从左至右依次运算)

只要参与运算的两个数据，有一个是字符串类型，那么此时进行拼接运算
做数据类型转换

‘+’ 变量可以把字符串类型的数字转换成 number 类型

var a = 10 + "10" + 10 + 10;//10101010
			var b = 10 + 10 + '10' + 10;//201010
			var c = "10" + 10 + 10 + 10;//10101010
			console.log(a, b, c);

模板字符串( 反单引号 )

模板字符串：用反单引号包裹起来

模板字符串中可以写变量，不需要 ’ + ’ 拼接

${表达式} 大括号中可以直接写表达式，进行一些数学运算。

var d = 5;
console.log('我有'+d+'包烟');
console.log(`我有 ${d + 5} 包烟`);

数据类型转换

字符串转数

Number() 转纯数字类型

Number(‘5’) : 可以把字符串类型的5 转变成数字

Number(‘5dhiaof’) ：结果为——NaN : not a number

Number(true) ===1

Number(false) ===0

Number(null) ===0

Number(undefined) ===NaN
parseInt() 可以把一个字符串中开头的数字部分提取出来——取整

parseInt(‘5hfancoi’) ====5

parseInt(true/false/null/undefined) ==NaN
parseFloat()取小数部分
’ + ’