Javascript day01

最新推荐文章于 2024-08-09 21:30:00 发布

m0_72924741

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量143

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_72924741/article/details/126355774

版权

1.JavaScript的用途

JavaScript用来制作web页面交互效果，提升用户体验,通过固定的语法去操作浏览器和标签结构来实现网页上的各种效果

2.JavaScript 与html、css之间的关系

html: 是用来制作网页，简单来说就是编写网页结构
css：用来修饰网页
Javascript: 实现网页与客户之间互动的桥梁，让网页具有丰富的生命力

3. JavaScript历史

javascript是1995年网景公司雇佣布兰登开发的全新语言

4.JavaScript的组成

1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2. BOM (Browser Object Model): 浏览器对象模型
- 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如：弹出框、浏览器跳转、获取分辨率等
3. DOM (Document Object Model): 文档对象模型
- 操作标签加行为---可以img动起来给div加width

5.变量

1. 值变化的量叫变量

2. 本质上是内存中存储单元, 理解为一个容器

3. 变量定义语法:

var 变量名称

var name //使用var关键字定义一个名为name的变量

var score //使用var关键字定义一个名为score的变量

4. 变量的赋值

score = 100 // 将100赋值给score变量

注意点：

a.一个变量只能存储一个值

b.具有可覆盖性，后面写的覆盖前面的

5. 访问变量

console.log(score)

6. 变量名命名

规则

1. 必须是字母(a-z A-Z)、数字(0-9)、下划线(_) $美元组成

2. 不能数字开头，或中文汉字

3. 不能是关键字(特定意义的单词) 比如: var

4. 不能是保留字(将来有特殊用处的单词)

5.变量名称区分大小写

6.不能出现空格

规范:

1. 语义化

2. 驼峰命名

var userName 变量第二个单词首字母大写

var passWord

3. 不要使用中文

7. 内存结构

6.数据类型

1. 数据类型:是指我们存储在内存中的数据的类型

  变量值的类型

var score = 100

2. 数据类型分类:

         两大类: 基本数据类型和复杂数据类型

          基本数据类型: 5种

a.数值类型: number

                        所有的数字 1 ,2 , 3 10.9

                          特殊的数字 NaN （ not a number 非数字值）

b.字符串：string

                          引号包裹起来的所有内容 'hellworld' "rose" `jack`

                          var userName = 'jack' // 创建一个名为userName的字符串类型的变量,值是'jack'

c.布尔类型: boolean

                         true 成立(真) false 不成立(假)

                        var isDelete = false

d.空类型 : object

                        null

                        var isNull = null

e.未定义类型: undefind

                        var age

3. 程序判断数据类型

typeof 变量 typof(变量)

=> 数据类型

4. console.log(变量)

console.log(变量1,变量2,...)

console.log('字符串')

5.可以使用 isNaN 这个方法来判断一个变量是不是数字

                var n1 = 100;
                console.log(isNaN(n1)); //=> false

7.数据类型转换

其他数据类型转数值

Number(变量)

可以把一个变量强制转换成数值类型

可以转换小数，会保留小数

可以转换布尔值

遇到不可转换的都会返回 NaN

parseInt(变量)

从左向右，是数字就转换，遇到非数值结束转换

开头就不是数字，那么直接返回 NaN

取整数

parseFloat(变量)

从左向右，是数字就转换，遇到非数值结束转换

开头就不是数字，那么直接返回 NaN

认识一次小数点

除了加法以外的数学运算

运算符两边都是可运算数字才行

如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN

加法不可以用

其他数据类型转字符串

变量.toString()

有一些数据类型不能使用 toString() 方法，比如 undefined 和 null

String(变量)

所有数据类型都可以

使用加法运算

在 JS 里面，+ 由两个含义

字符串拼接：只要 + 任意一边是字符串，就会进行字符串拼接

加法运算：只有 + 两边都是数字的时候，才会进行数学运算

其他数据类型转布尔

Boolean(变量)

在 js 中，只有 ''、0、null、undefined、NaN，这些是 false，其余都是 true

8.数字运算符

+

只有符号两边都是数字的时候才会进行加法运算

只要符号任意一边是字符串类型，就会进行字符串拼接

可进行隐式类型转换(除了加法外都转数字)
10——>'10'

-

会执行减法运算

会自动把两边都转换成数字进行运算

*

会执行乘法运算

会自动把两边都转换成数字进行运算

/

会执行除法运算

会自动把两边都转换成数字进行运算

%

会执行取余运算

会自动把两边都转换成数字进行运算

9.赋值运算符

=

就是把 = 右边的赋值给等号左边的变量名

var num = 100

就是把 100 赋值给 num 变量

那么 num 变量的值就是 100
+=
var a = 10;
a += 10;
console.log(a); //=> 20
a += 10 等价于 a = a + 10
-=
var a = 10;
a -= 10;
console.log(a); //=> 0
a -= 10 等价于 a = a - 10
*=
var a = 10;
a *= 10;
console.log(a); //=> 100
a *= 10 等价于 a = a * 10
/+
var a = 10;
a /= 10;
console.log(a); //=> 1
a /= 10 等价于 a = a / 10
%=
var a = 10;
a %= 10;
console.log(a); //=> 0
a %= 10 等价于 a = a % 10

10. 比较运算符

==

比较符号两边的值是否相等，不管数据类型

1 == '1'

两个的值是一样的，所以得到 true

===

比较符号两边的值和数据类型是否都相等

1 === '1'

两个值虽然一样，但是因为数据类型不一样，所以得到 false

!=

比较符号两边的值是否不等

1 != '1'

因为两边的值是相等的，所以比较他们不等的时候得到 false

!==

比较符号两边的数据类型和值是否不等

1 !== '1'

因为两边的数据类型确实不一样，所以得到 true

>=

比较左边的值是否大于或等于右边的值

1 >= 1 true

1 >= 0 true

1 >= 2 false

<=

比较左边的值是否小于或等于右边的值

1 <= 2 true

1 <= 1 true

1 <= 0 false

>

比较左边的值是否大于右边的值

1 > 0 true

1 > 1 false

1 > 2 false

<

比较左边的值是否小于右边的值

1 < 2 true

1 < 1 false

1 < 0 false

11.逻辑运算符

&&

进行且的运算

符号左边必须为 true 并且右边也是 true，才会返回 true

只要有一边不是 true，那么就会返回 false

true && true true

true && false false

false && true false

false && false false

||

进行或的运算

符号的左边为 true 或者右边为 true，都会返回 true

只有两边都是 false 的时候才会返回 false

true || true true

true || false true

false || true true

false || false false

!

进行取反运算

本身是 true 的，会变成 false

本身是 false 的，会变成 true

!true false

!false true

12.自增自减运算符（一元运算符）

++
进行自增运算

分成两种，前置++ 和 后置++
前置++，会先把值自动 +1，在返回
var m = 10
// var n = ++m  // m=m+1,  n=m 
var n = m++ // n = m,  m=m+1
console.log('m :', m, ' n :', n)
后置++，会先把值返回，在自动+1
var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11
--

进行自减运算

分成两种，前置-- 和 后置--

和 ++ 运算符道理一样