JS入门教程-CSDN博客

文章目录

一、JS是什么？
二、书写JS
三、JS的注释
四、JS的输出
五、JS的变量
- 1.定义和声明的区别
- 2.注意
六、JS的变量命名规则和规范
- 1.命名规则
- 2.命名规范
七、JS的基本数据类型

一、JS是什么？

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。
网页三层架构：
（1）结构层：html技术
（2）样式层：css技术（css2）
（3）行为层：js技术（核心）
MDN 中文文档： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
JS由三部分组成：
（1）ECMAScript ECMAScript是一个标准（规定了各种各样的语法）
（2）BOM 浏览器对象模型
（3）DOM 文档对象模型

二、书写JS

有三种写法：
1）行内写法不推荐
2）内部写法偶尔使用不推荐
3）外部写法真实项目中都使用外部写法推荐

1.行内写法

把JS代码写在标签内部。如：

<div onclick="alert('你好，世界~')">点我</div>

对于a标签来说，比较特殊，因为a标签默认就可以点击跳转。也可以给a标签上弄一个点击事件，如果说，不想让a标签进行跳转，可以这样写：

<!-- href="javascript: ;" 阻止a标签的默认点击事件 -->
<a href="javascript: ;" onclick="alert('你好，世界~')">我是a标签</a>

2.内部写法

（1）在页面上写一个script标签，理论上可以把标签放在页面上任何地方，建议放在body最后面，一个页面上可以有N个script标签
（2）js代码就写在script标签中，JS代码从上到下依次执行。
代码如下（示例）：

 <script>
         alert("我是内部的JS~")
    </script>
    <script>
        alert("我是内部JS 2~")
    </script>

3.外部写法

（1）创建一个JS文件，后缀是.js
（2）在JS文件中写入JS代码
（3）在html文件中，通过script标签引入外部的js文件
注意：使用script标签引入了外部的js，在script标签中就不能写JS代码了，写了也不会执行

    <!-- 引入外部的JS文件，引入时，把代码放在body的最后面 -->
    <!-- 建议引入时，放在body最后面 -->
	<script src="./out.js"></script>

三、JS的注释

JS中的注释：注释是给程序员看的，不是给浏览器看的。
仅仅是对代码进行解释说明。
1）单行注释快捷键是 ctrl+/
2）多行注释快捷键是 shift+alt+a
上面是使用vsCode，不同的编辑器，快捷键是不一样的

四、JS的输出

JS中常用的输出语句：
1）alert()
表示在浏览器中弹出一个提示框
()中写你要提示的内容如果内容是字符串，需要使用引号包起来
如果是纯数字，不需要包

2）console.log() 在控制台进行输出按log后，直接按回车键
进入控制台：F12键
()中写你要在控制台中输出的内容
如果内容是字符串，需要使用引号包起来
如果是纯数字，不需要包
在真实开发中，用的还是非常多，可以进行代码调试

3）document.write() 已经淘汰了
document是文档的意思 wirte是写的意思
在文档上写一些内容

五、JS的变量

任何一门编程语言中都有变量的概念。
变量指的就是一片内存空间，变量就是用来保存数据的。
变量由变量名（内存空间的别名）变量值（存储在内存空间中的真实数据）和其它特性组成。
声明变量使用var关键字，除了var还有其它的，其它的后面说。
一个变量只有保存一个值，如果想再放第2个值，就再声明一个变量。
如果给同一个变量又赋了一个新值，新值就会把旧值覆盖掉。
var可以不写，不要不写，强烈不建议不写。
先定义变量，再去使用变量。
可以同时声明多个变量。
可以同时定义多个变量。

1.定义和声明的区别

var是用来声明变量的：var a; var b;
赋值： 就是给声明好的变量赋值：
var q; // 声明一个变量q
q = 123; // 给变量q所对应的内存空间中放数据
定义： 声明+赋值; var m = 110; // 声明一个变量m 在m所对应的内存空间中放入110这个数据，整体叫定义。

2.注意

 <script>
        //  var表示JS中的关键字，用来声明一个变量
        // num1表示一块内存空间的别名 
        // 1表示内存空间中的值
        // 语法：var 变量名 = 变量值
        // 后面的分号可有可无
        // = 在数学中等号 但是在计算机叫赋值运算符
        // 赋值运算符要从后向前后：把1这个值放在num1所对应的内存空间。
         var num1 = 1;
         var str = "hello"
         num1 = 666; // 把666放到num1所对应的内存空间中
         console.log(num1);

        //  在声明变量时，可以不加var，强烈不建议你这么搞
         name = "wc";
         console.log(name);

        //  console.log(age); // age变量并没有定义出来  报错： age is not defined

        // 声明了变量，但是变量中没有放任何东西，它的值就是Undefined
        var m, n, q;  // 声明3个变量  m n q
        console.log(m);  // undefined
        console.log(n); // undefined
        console.log(q); // undefined

        var o = 1, p = 2, s = 3; // 同时定义多个变量
        console.log(o, p, s);
     </script>

六、JS的变量命名规则和规范

1.命名规则

变量名只能由数字(0~9)，字母（a-zA-Z），美元符（$），下划线（_）组成。
变量名不能由数字打头 var 0name = “wc” 不OK。
区域大小写 num NUM Num nUm NUm 表示四个不同的变量。
不能出现JS中的关键字或保留字（在发明JS时，这个名字就被占用了，如：var） var var = 110 不OK。

关键字：现在已经使用了名字。保留字: JS未来可能使用的名字地址：https://www.runoob.com/js/js-reserved.html

2.命名规范

建议遵循的，因为大家都这么做。
5. 不要用中文件命名。
6. 变量名尽量见名知意，起的名字要有语义化，在学习时，起的名字可能没有意思。
7. 驼峰命名：在起名字时，可以使用驼峰命名，用的最多的是小驼峰命名。（1）大驼峰命名: UserName.（2）小驼峰命名: userName.
8. 下划线命名：user_name

七、JS的基本数据类型

在JS中，数据类型分两类：
1）基本数据类型（简单数据类型）
A-Number 数值型
B-String 字符串
C-Boolean 布尔
D-Undefiend 空
E-Null 空
2）引用数据类型（复杂数据类型或地址数据类型）
A-Array 特殊的引用数据类型
B-Function 特殊的引用数据类型
C-Object
先介绍一下基本数据类型：

1.基本数据类型之数值类型

Number：

number数据类型就是数字，不分整数和小数，不分正数和负数。
数字有不同的进制。（1）十进制：默认情况下，写的都是10进制 0~9 10。（2）二进制：（3）八进制：（4）十六进制：0x打头表示16进制 0xff 0x123。
科学计数：2e5 2*10的5次方。
NaN Not a Number 不是一个数字
有时候，几个数运算，得到的结果就是非数字
------------------------------------------------
number数据类型所对应的值有无数个？
答：对

<script>
        //  十六进制：0x打头表示16进制  0~9a~f
        var n1 = 0xff;  // ff(16进制) ==> 255(10进制)
        console.log(n1);

        // 八进制：0打头  0~7  
        var n2 = 077;  // 63  不会  去看小学数字 
        console.log(n2);

        // 二进制：01 
        var n3 = 0b0001; // 0b0001
        console.log(n3);

        // 十进制
        var n4 = 110; 
        console.log(n4);

        var n5 = 2e5;
        console.log(n5); // 200000

        var n6 = 100*"hello";
        console.log(n6); // NaN

        var n7 = NaN; // 表示n7所对应的内存空间中存储的是NaN
        console.log(n7);
     </script>

2.基本数据类型之字符串类型

字符串数据类型：
常见的字符串：“wangcai” “biejing” “电脑” 字符串数据类型在项目是使用的是最多的。

规定： 如果是字符串，需要使用单引号，或双引号，或反引号，只把使用这三种引号包起来的文本，就是字符串。

                => 'hello js'
                => "hello js2"
                => `hello js3`
				如果把数字包起来，也是字符串：
                123  number
                "123"  stirng

string数据类型所对应的值有无数个？
答：对

3.基本数据类型之布尔类型

布尔数据类型所对应的值就两个：
true 表示真
false 表示假

4.基本数据类型之空类型

undefiend undefined这种数据类型所对应的值就一个，是undefiend。
null 也表示空 null是一个数据类型。

 <script>
        //  当声明了一个变量，但是没有给变量赋值，此时变量的值是Undefined
        var a;
        console.log(a);  // 打印的值
        console.log(typeof a);  // undefiend的数据类型也是undefined

        var b = null;  // 直接把空赋值给b所对应的内容空间
        console.log(b);  // 值是null
        console.log(typeof b);  // 通过typeof打印出来的是object(不准确)
     </script>

5.检测一个数据的数据类型

关键字：typeof
两种用法：
1）typeof 变量名检测当前变量的数据类型
返回当前变量的数据类型
2）typeof（变量名）
两种写法的区别：
typeof 变量名只能检测后面紧挨着的变量的数据类型
typeof（运算）先运算()中的结果，然后再使用typeof去检测数据类型

typof的返回值：
注意：typeof的返回值是一个字符串
只能准确的检测出基本数据类型，不能使用Typeof去检测引用数据类型：
=> number 数值型
=> stirng 字符串
=> boolean 布尔类型
=> undefiend undefined
=> null object

  <script>
         var n1 = 110;
        //  typeof n1;  测试n1的数据类型
        // = 从后向前看 没出n1的数据类型，然后，赋值给res
        var res = typeof n1;
        console.log(res); // number
        console.log(typeof n1);

        console.log("-----------------");
        var n2 = "666";
        console.log(typeof n2);
        console.log(typeof(n2));

        console.log("-----------------");
        var n3 = 888;
        var n4 = 666;
        console.log(typeof(n3<n4)); // boolean
     </script>