小司机入坑的第一堂js课程哈哈哈哈！

╰半夏微凉° 2022-11-14 10:27 178阅读 0赞

# JavaScript第一堂课： #

## web ##

B/S   C/S
    1.浏览器
    分为两个部分      外壳     内核
        IE             Trident
        FIRFOX          Gecko
        SAFARI          webkit
        CHROME          blink
        OPERA           blink

## 编程语言 ##

机器语言   0 1 0 1 0 1
    汇编语言
    高级语言  C  C++ C#  JS  JAVA
    
    
    LiveScript
    1.js是世界最流行语言之一，是一种运行在客户端上面的语言Script （脚本）
    2.脚本  不需要编译   运行过程中由JS解释器（js引擎）  逐行进行解释并执行
    3.单线程 解释性语言
    4.ECMA(欧洲计算机制造联合会)  ES   
    5.node.js
    
    
    JavaScript
        表单动态校验
        网页特效
        服务端开发  node
        app
        微信小程序
        游戏开发
    
    基础ECMAscript     BOM/DOM   js高级

## js引入方式 ##

1  .内部式  在html文件内 加上一个script标签  在这个标签写入JS代码**
    2.  外部式  在外部新建一个js文件  然后使用script标签的src属性进行引入
    3.  行内式
    4.  ES6的引入方式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]

## JS输出方式 ##

alert（）   确定弹框

## 变量的命名方式 ##

1.必须是以英文字符  $ _  开头
    2.可以包括  英文字符 $  _ 数字
    3.对大小写敏感
    4.不能使用关键字和保留字
    5.见名知意
    
    声明：
        var 变量名  = 变量值;

## 数据类型 基础数据类型 ##

字符串型 String 取值方式使用双引号（""）来包裹数据  
数字型 Number 取值方式 数字  
布尔型 boolean 真 true 假 false  
undefined 未定义表示没有赋值 取值方式只有一个undefined  
null 空 占位用 用空值来覆盖

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script> // 解读 /* 解释性语言 读取一行 执行一行 */ var num = 123456; var num1 = "abc"; var num2 = true; num3 = num2; console.log(num2); console.log(num3); console.log(num3); var str = " "; str = undefined; var num = true; var num = str; console.log(num); console.log(typeof(str)); </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]

## 如何获取变量的数据类型 ##

typeof(变量名);
        检测数据类型

## 数据类型之间的转换 ##

强制转换
        1.转换为字符串类型
            toString(要转换的值)
            String(要转换的值)
    
            null undefined 不参与强制转换的
        2.转换为数字类型
            Number(要转换的值)   ---自适应
            parseInt()     ---强制转换为整数
            parsefloat()   ---强制转换为小数
    
    
            isNan()     --  是不是  不是一个数字     是不是一个非数字 
        3.转换为布尔类型
            Boolean() 
    
            所有非0的数字 强制转换为boolean  都为true
            只有为0 的时候才为false
    
            所有的字符串都是 true
    
            null 和 undefined  都为false

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script> // 将字符串类型转换为数字类型(可以转换) var str1 ="123"; str1 = Number(str1); console.log(str1); console.log(typeof(str1)); // 将字符串类型转换为数字类型(NaN) var str1 ="abc"; str1 = Number(str1); console.log(str1); console.log(typeof(str1)); // 将字符串类型转换为数字类型(NaN) var str1 ="晴天"; str1 = Number(str1); console.log(str1); console.log(typeof(str1)); // 将字符串类型转换为布尔类型(可以转换 字符串都显示true) var str5 = "-1"; str5 = Boolean(str5); console.log(str5); console.log(typeof(str5)); // 将数字类型转换为布尔类型(可以转换 0和非0) var str = 0; str = Boolean(str); console.log(str); console.log(typeof(str)); // 将数字类型转换为字符串类型(可以转换) var str = 123; str = String(str); console.log(str); console.log(typeof(str)); // 将布尔类型转换为字符串类型(可以转换) var str8 = true; str8 = String(str8); console.log(str8); console.log(typeof(str8)); // 将布尔类型转换为数字类型 var str3 = false; str3 = Number(str3); console.log(str3); console.log(typeof(str3)); var str = 2; str = toString(str); console.log(str); console.log(typeof(str)); </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]

## 总结： ##

学好js基础，就要理解和记忆以上所提到的js的引入方式，输出方式，变量命名方式和数据类型的定义和转换，理解这些学起来就容易多了，小编第一天学的时候也有懵逼，后来自己练习老师的课堂案例现在也都明白了！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/5ee4dc4fbe054993a9b6171afcab6afe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/13f2a623a6744754b23a98e299165a6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/da4a38dc98c1418ebf6aaaa873031b93.png