JavaScript学习笔记01

最新推荐文章于 2024-10-06 04:03:15 发布

Amy_cx

最新推荐文章于 2024-10-06 04:03:15 发布

阅读量119

点赞数 1

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/amy_cx/article/details/126351434

版权

一、JavaScript发展历史

1.JavaScript是1995年网景公司雇佣布兰登开发的全新语言。

2.JavaScript最初是为了实现浏览器客户端交互。

3.1997年7月，ECMA组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

4.ECMAScript和JavaScript的关系：前者是后者的标准/规格，后者是前者的一种实现。在一般场合，这两个词可以互换。

二、JavaScript的用途

1.浏览器客户端开发（前端开发）

2.服务端开发（nodejs）

3.桌面应用开发

三、JavaScript的组成

1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型

2.BOM（Browser Object Model）：浏览器对象模型

有一套成熟的，可以操作浏览器的API，通过BOM可以操作浏览器。比如：浏览器跳转、弹出框、获取分辨率等。

3.DOM（Document Object Model）：文档对象模型

有一套成熟的，可以操作页面元素的API，通过DOM可以操作页面的元素。比如：增加div，减少div，给div换位置等。

总的来说就是通过固定的语法去操作浏览器和标签结构来实现网页上的各种效果。

四、书写方式

1.行内式（不推荐）

写在标签内的js代码需要依靠事件（行为）来触发

<body>
    <a href="javascript:alert('a弹出层');">点击试试</a>
    <div onclick="alert('弹出层')">点击试试</div>
    <!--注：onclick是一个点击事件，当点击元素的时候执行后面的js代码-->
</body>

2.内嵌式

写在<script></script>标签里面

<body>
    <div>关闭弹出层才显示的内容</div>
    <!--
        内嵌式的js代码会在页面打开的时候直接触发
        script标签可以写在head里面，也可以放在body里面，但最好写在body结束前
    -->
    <script type="text/javascript">
        alert('我是一个弹出层')
    </script>
</body>

3.外链式（推荐）

外链式js代码只要引入了html页面，就会在页面打开时直接触发

新建一个.js为后缀的js文件，在文件里写js代码，把js代码引入html页面

js代码：

alert('我是一个弹出层')

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入js文件 -->
    <script src="外链式.js"></script>
</head>
<body>
    
</body>
</html>

五、变量（重点）

1.本质上是内存中的一个存储单元，理解为在程序中保存数据的一个容器。语法：

var 变量名=值

重复定义或赋值的话值会被覆盖

2.命名规则和规范

规则：必须遵守的，不遵守就会错

（1）由字母、数字、下划线、$美元符号组成

（2）不能数字开头

（3）不能是关键字（有特定意义的单词，如var）

（4）不能是保留字（将来有特殊用途的单词）

（5）严格区分大小写

（6）命名不要出现空格

规范：建议遵守的（开发者默认），不遵守不会报错

（1）语义化

（2）驼峰命名

（3）不要使用中文

3.访问变量值

console.log('输出内容') //控制台显示输出内容

console.log(变量名) //控制台显示变量名值

4.变量内存结构图

六、数据类型（重点）

是指我们存储在内存单元中值的类型

通常分为基本数据类型和复杂数据类型

1.基本数据类型

1)数值类型（number）

一切数字都是数值类型（包括二进制、十进制、十六进制等）

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

2)字符串类型（string）

被引号包裹的所有内容。可能是单引号' '、双引号" "，还有可能是反引号· ·

3)布尔类型（boolean）

两种值：

（1）true 成立/真

（2）false 不成立/假

4)空类型（object）

一个值：null

5)未定义类型（undefined）

一个值：undefined

未赋值的意思

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--五种基本数据类型-->
    <script>
        var num=100
        var name="Amy"
        var isGirl = true
        var isBlank=null
        var age
        console.log(num,typeof num)
        console.log(name,typeof name)
        console.log(isGirl,typeof isGirl)
        console.log(isBlank,typeof isBlank)
        console.log(age,typeof age)
    </script>
</body>
</html>

控制台结果：

2、复杂数据类型

1）对象类型（object）

2）函数类型（function）

……

七、判断数据类型

1.使用typeof关键字进行判断

//第一种方式
var n1=100
console.log(typeof n1)
//第二种方式
var s1='abcdefg'
console.log(typeof(s1))

2.isNaN(x)

函数用于检查其参数x是否是非数字值,是非数字值返回true，否则返回false。即不是数字返回true，是数字返回false。

八、数据类型转换

1.字符串转为其他类型

(1) Number()
            var msg = '100'
            Number(msg) --> 100
            Number('Jack') --> NaN
            Number(false) --> 0
            Number(undefined) --> NaN
            Number('') --> 0

(2) parseInt()
            parseInt('100') --> 100
            parseInt('1a00') --> 1
            parseInt(100.9) --> 100

特点：

        1.从左向右转换
        2.遇到数值字符串转为数值，遇到非数值结束转换，如果第一个为非数值，结束输出NaN
        3.取整

(3) parseFloat()
parseFloat(10.98) --> 10.98

特点：
       1.从左向右转换
       2.遇到数值字符串转为数值，遇到非数值结束转换，如果第一个为非数值，结束输出NaN
       3.认识一次小数点

2.其他类型转字符串
（1）变量.toString()
undefined和null不能用toString方法，用了会报错

（2）String(变量)

所有数据类型都可以

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var msg='100'
        console.log(msg,typeof msg)
        console.log( Number(msg), typeof msg)
        console.log( Number(msg), typeof Number(msg))
        console.log('jack', typeof Number('jack'))
        console.log( 'null', typeof Number(''))
        var a
        console.log( 'a',  Number(a))
        console.log( 'true', typeof Number(true))

        // 其他类型转字符串类型
        var b=100
        console.log(b.toString(), typeof b.toString())
        console.log( String(100),  typeof String(100))
        console.log( String(undefined),  typeof String(undefined))
        console.log( String(null),  typeof String(null))
        console.log( String(true),  typeof String(true))
    </script>
</body>
</html>

控制台结果：

（3）使用加法运算

+ ：JavaScript中有两层意义

连接符。只要加号任意一边是字符串，表示连接符
算术运算中的加法运算符

3.其他数据类型转为布尔类型

''， 0， NaN， undefined， null，这五种转Boolean类型是false，其它都是true

九、运算符（重点）

1.算术运算 + - * / %
除了+后面加字符串会进行拼接，其它都会进行隐式类型转换，将字符串转为数字

2.赋值运算符 += -= *=
        a+=10 -> a=a+10
        a-=10 -> a=a-10
        a*=10 -> a=a*10

3.比较运算符 > >= < <= == === != !==
        比较运算结果 Boolean值
        == 和 === 区别：
            100 == '100' -> true
            100 === '100' -> false
            两个等号只比较值是否相同
            三个等号比较值和数据类型，也叫恒等于

4.逻辑运算符 && || ！
        逻辑与 && （且运算）
            同为真，则为真，一方为假则为假
        逻辑或 ||
            同为假，才为假，一方为真则为真
        逻辑非！
            非真则假，非假则真
            !true -> false
            !false -> true
        注意：短运算
            false && true -> false
            逻辑与运算时，如果左边为false，右边不参与运算
            8>10 && 2<3

5.自增自减运算符（一元运算符）
        自身值加一 a++ a=a+1
        自身值减一 a-- a=a-1
        加加或减减可以放到变量前面或后面，如果是单独运算没有区别，都是自身加一或减一
        a++/a--    ++a/--a
        参与其它运算时:
            ++a 先加一，再赋值

a++ 先赋值，再加一
减法同理

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var p = 10
        var q = p
        console.log(++p, q = p) //11 11

        m=-1
        console.log(m++) //-1
        console.log(++m) //1
        console.log(m++ + ++m) //4
        console.log('m',m)     //m 3
        
    </script>
</body>
</html>

6.运算符优先级

下表按从最高到最低的优先级列出JavaScript运算符，具有相同优先级的运算符按从左至右的顺序求值