前端基础（七）---------JavaScript介绍与使用

最新推荐文章于 2024-05-20 22:14:20 发布

零度℃192

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量86

点赞数

文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/qq_70761095/article/details/128501475

版权

1.JavaScript介绍

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。

JS组成

核心语法-ECMAScript：规范了JS的基本语法
文档对象模型-DOM：Document Object Model ，提供了一系列操作的文档的方法
浏览器对象模型-BOM：Browser Object Model，提供了一系列操作浏览器的方法

2.JavaScript的书写位置

内部JavaScript：直接写在html文件里，用script标签包住。

注意：<script></script>标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JS代码。所以我们将script标签写在</body>上面。

外部JavaScript：JavaScript代码写在以.js结尾的文件里通过script标签，引入到html页面中。

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
  <!-- 外部JavaScript：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

3.变量

定义: 用于存储程序运行过程中可修改的数据
语法 : 使用关键词let声明,自定义变量名
命名规范 : 变量名可以由数字,字母,下划线,$组成,禁止以数字开头
禁止与关键字冲突
变量名严格区分大小写
变量名尽量见名知意,多个单词组成采用小驼峰,例如："userName"

let a  // 声明变量
a = 100 // 变量赋值
let b = 200;  // 声明的同时赋值
let m, n, k  // 同时声明多个变量
m = 10
k = 20

使用注意 :

变量使用let关键字声明但未赋值,变量初始值为undefined
变量如果省略let关键字,并且未赋值,直接访问会报错
变量省略let关键字声明,直接赋值,可正常使用.影响变量作用域
使用let关键词重复声明一个变量会报错

4.数据类型

数值类型-number：JavaScript不区分整数、浮点数等，统一都叫Number。

特殊值：NaN是一个特殊的值，它的类型是number

字符串类型-string

通过单引号（ ''）、双引号（ ""）或反引号( ` )包裹的数据都叫字符串

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号
模板字符串：

let age = 81
console.log(`我今年${age}岁了`)

布尔类型-boolean

表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。
未定义类型-undefined

未定义是比较特殊的类型，只有一个值 undefined。只声明变量，不赋值的情况下，变量的默认值为undefined 含义是未被赋值
空类型-null：null表示值为空

5.类型转换

在某些情况下，我们需要将值转换为我们期望的类型，去进行操作。

隐式类型转换
- 当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算。转换规则：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串
- 除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型
强制类型转换
- 编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
- 转换为数字型
- Number(数据)
  - 转成数字类型
  - 如果字符串内容里有非数字，转换失败时结果为NaN
  - NaN也是number类型的数据，代表非数字
- parseInt(数据)
  - 只保留整数
- parseFloat(数据)
  - 可以保留小数
- 转换为字符型:
- String(数据)
- 变量.toString(进制)

6.JavaScript运算符

赋值运算符

= 将右边的值赋给左边变量

算数运算符
- 加法 +,
- 减法 -,
- 乘法 *,
- 除法 /,
- 取余 %,
- 求幂 **
复合运算符

+= -= *= /= %=

自增或自减运算符

++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作

注意：

自增或自减运算符在单独与变量结合时，放前和放后没有区别
如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，先自加再使用，如果做后缀，先使用再自加

比较运算符

> <
>= <=
==(相等) !=(不相等)
===(全等) !==(不全等)

字符串与字符串之间的比较，依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果
其他情况一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false
相等与全等
- 相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
- 全等 : 要求数据类型一致并且值相等才判断全等

逻辑运算符

&& 逻辑与条件1&&条件2 (and) 表达式同时成立,最终结果才为true
|| 逻辑或条件1||条件2 (or) 表达式中只要有一个成立,最终结果即为true
! 逻辑非 !条件 (not) 对已有表达式的结果取反

零度℃192

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端基础（七）---------JavaScript介绍与使用

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。JS组成核心语法-ECMAScript：规范了JS的基本语法文档对象模型-DOM：Document Object Model ，提供了一系列操作的文档的方法浏览器对象模型-BOM：Browser Object Model，提供了一系列操作浏览器的方法。
复制链接

扫一扫