前端学习第二阶段day01

wuyuling111

已于 2022-08-16 11:22:51 修改

阅读量111

点赞数

分类专栏：二阶段学习笔记文章标签：前端学习 javascript

于 2022-08-15 17:19:10 首次发布

本文链接：https://blog.csdn.net/qq_58114686/article/details/126350889

版权

二阶段学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.基础常识

JS的发展历史：

    JavaScript是1995年网景公司雇佣Brenda eich开发的全新语言
    JavaScript最初是为了实现浏览器客户端交互
    ECMAScript和JavaScript的关系，前者是后者的规范，后者是前者的表现。这两个词在日常场合是等价的

JS的三种书写位置：

行内式

<!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>行内式</title>
</head>
<body>
   <a href='javascript:alert("helloworld")'></a>
    <div onclick='alert("my name is qiaqia")'>点点我</div>
</body>
</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>内嵌式</title>
</head>
<body>

    <script>
        var a=10
        console.log(a)
    </script>
</body>
</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>外链式</title>
</head>

<body>
     <!--要在外面建一个index.js文件-->
    <script src="index.js"> </script>
</body>

</html>

写在body结束标签之前

JS中的注释：

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

JS的组成：

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

2.BOM：浏览器对象模型

3.DOM：文档对象模型

2.变量：

    1.值变化的量
    2.本质上是内存中存储单元，理解为一个容器
    3.变量定义

        语法：var(关键字) 、$
        var 变量名称 //
        var name //使用var关键字定义一个名为name的变量（相当于创建一个容器）

4.变量的赋值

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

5.访问变量

console.log(变量)

6.变量名的命名

        规则（强制）
            1.必须是由字母(a-z A-Z)、数字(0-9)、下划线(_)组成
            2.不能数字开头
            3.不能是关键字（有特定意义的单词）比如：var
            4.不能是保留字（将来有特殊用处的单词）
        规范
            1.语义化
            2.驼峰命名
                当变量有两个或两个以上的单词组成时，第二个单词首字母大写
                var userName
            3.不要使用中文

7.内存结构：

1.栈区域和堆区域
2.变量本质上是内存中存储单元

3.数据类型

1.定义：变量值的类型
2.数据类型分类：

        1.基本数据类型
            1.数值类型：number
                 所有的数字整型小数
                 特殊的数字类型 NaN not a number 非数字值
            2.字符串：string
                用引号引起来 'helloworld'【单引号双引号反引号】
                var userName = 'wuYuling' //创建一个名为userName的字符串1类型的变量，值是
            3.布尔类型：boolean
                true 成立(真)   false 不成立(假)
                var isDelete=true
            4.空类型：null 类型名object
                null
            5.未定义类型：undefined
                var age

<!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>
    <h2>五种基本数据类型</h2>
    <script>
        var num=100.3
        var userName='wuYuling'
        var isInsert=true
        var isObject=null
        var age

        console.log("num的数据类型是：",typeof(num),"num的值是:",num)
        console.log("userName的数据类型是：",typeof(userName),"userName的值是:",userName)
        console.log("isInsert的数据类型是：",typeof(isInsert),"isInsert的值是:",isInsert)
        console.log("isObject的数据类型是：",typeof(isObject),"num的值是:",isObject)
        console.log("age的数据类型是：",typeof(age),"age的值是:",age)
        
    </script>
</body>
</html>

2.复杂数据类型

3.程序判断数据类型

1.typeof 变量 | typeof(变量)
2.isNaN(变量) 判断是否是非数字值 String类型特殊【如果为'100'会先转为100】

<!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>isNaN非数字类型</title>
</head>
<body>
    <script>
        var str='100'
        // isNaN(str)
        var str1='wuyuling'
        console.log(isNaN(str))//-->false
        console.log(isNaN(str1))//-->true
    </script>
</body>
</html>

4.console.log(变量1)

打印多值加, console.log(变量1,变量2,变量3)
console.log('字符串')

4.数据类型的转换

1.字符串->数值型

       1.Number()
            var message='100'
            Number(message) ->100

var userName='jack'
number(userName) ->NaN 数值型

var a=''//空字符串
Number('')-->0

        2.parseInt()
             parseInt(message) ->100
             特点：
                1.从左向右转换
                2.遇到数值字符串转换为数值,遇到非数值结束转换,如果第一个数值为非数值，结束输出NaN
                parseInt("10aaaa0")-->10
                3.小数->取整
                parseInt("10.98")-->10
        3.parseFloat()
            特点：
                1.从左向右转换
                2.遇到数值字符串转换为数值,遇到非数值结束转换,如果第一个数值为非数值，结束输出NaN
                parseFloat("10aaaa0")-->10
                3.小数->浮点数
                parseFloat("10.98")-->10.98

2.其它类型转number

        Number(true)->1
        Number(false)->0
        Number(null)->0
        Number(undefined)->NaN

3.其他类型转字符串

        1.String
            String(100)->'100'
            String(undefined)->'undefined'
            String(null)->'null'
            String(true)->'true'
        2.变量.toString[null和undefined会报错]
            var b=true
            b.toString()
        3.连接符 + 【隐式类型转换】
           在 JavaScript中有两层意义
            1.连接符【只要+号任意一边是字符串，表示连接符】
                【隐式类型转换】 10 + ''='10'
            2.算术运算加法运算

4.其它类型转成布尔

Boolean
只有'' 0 null undefined NaN 是FALSE 其它全是TRUE

5.运算符

1.算术【数学】运算符：参与算术运算 + - * / %[取余]

【除+外其它运算符会自动转为数值型【都是隐式类型转换】】

2.赋值运算符

        =
        a+=10   a=a+10
        a-=10   a=a-10

3.比较运算符【结果为Boolean值】

> >= < <= == === != [!==]
8>3 比较运算结果 Boolean值

        == 和 ===区别
        ==比较值是否相同
        ===比较值和数据类型
        100 == '100' ==>true
        100 ==='100' =>false 【恒等于】

4.逻辑运算符

        逻辑与&&【同为真则为真】
        逻辑或||【同为假则为假】
        逻辑非！【非真则假，非假则真】
    注意：短目运算
        逻辑与运算时，若果左边为FALSE，左边不参与运算
        false&& true ->false

5.自增自减运算符[一元运算符]

     1.自增++
            自身的值加一 a++

        2.自减--
            自身值减一 a--

        前置和后置【如果是单独运算没有区别都是自身+1或-1 如果参与其它运算就有区别】
            前置
            ++a 先加一再参与其它运算
            后置
            a++ 先参与其它运算再加一

1.基础内容