01_JavaScript - 技术栈

[一、js介绍、能做什么 --了解](#一、js介绍、能做什么 --了解)

二、JavaScript的组成-重点

三、JavaScript代码的书写位置

行内JS

[内嵌 JS](#内嵌 JS)

[外链 JS](#外链 JS)

[四、JS 中的注释](#四、JS 中的注释)

一、js介绍、能做什么 --了解

能做什么

二、JavaScript的组成-重点

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

三、JavaScript代码的书写位置

和 css 一样，我们的 js 也可以有三种方式书写在页面上让其生效
js 也有多种方式书写，分为 行内式 ， 内嵌式 ，外链式

需求：点击div时____出现弹窗alert("弹出的内容")

点击onclick

行内JS

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

javascript 复制代码

 示列：
   <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
  <!--行内式-->
  <div onclick='alert("你点击对了div")'></div>
  <!--a标签本身具有点击事件，所以写点击事件跟div不同-->
  <!--div加onclick，a加javascript-->
  <a href="javascript:alert('你点击对了a标签')">点击！</a>
</body>


<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>

<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>

<!-- 注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码 -->

内嵌 JS

内嵌式的 js 代码会在页面打开的时候直接触发
因为代码从上到下执行，先执行到js标签
内嵌独立嵌在页面

javascript 复制代码

示列：
    <script>
        alert("333")//先执行
    </script>
</head>

<body>
    <script>
        alert("1111")
    </script>
    <script>
        alert("2222")
    </script>
</body>


笔记：
<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script> alert('我是一个弹出层') </script>

<!-- 注：js标签可以放在 head 里面也可以放在 body 里面
body里一般放在所有标签最后！！-先读标签，再js操作标签
一个页面中 可以写多个js标签-多次弹窗！！！-->

外链 JS

外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发
新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面
可以放到head也可以放在body

html 复制代码

 示列：   
    <!--css <link rel="stylesheet" href="XXX.css"> --> 
</head>
<body>
    <script src="./外链式.js">
    //   XXXX  有外部引入就不要写东西了
    alert("111111")//不生效
    </script>

    <script>
          alert("哈哈哈哈哈")
    </script>
    <script src="./外链式2.js"></script>
    <script src="./外链式3.js"></script>
</body>


笔记：
// 我是 index.js 文件
alert('我是一个弹出层')

<!-- 我是一个 html 文件 -->

<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js">
    
</script>

<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

四、JS 中的注释

学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的
写好一个注释，有利于我们以后阅读代码

单行

一般就是用来描述下面一行代码的作用
// ，也可以按 ctrl + /

javascript 复制代码

// 我是一个单行注释

// 下面代码表示在浏览器里面出现一个弹出层

javascript 复制代码

/*
	我是一个多行注释
*/

多行

一般用来写一大段话，或者注释一段代码
可以直接写 /* */ 然后在两个星号中间写注释，也可以按 shift + alt + a

五、变量（重点）

变量指的是在程序中保存数据的一个容器
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他
语法： var 变量名 = 值

定义变量及赋值

注意：
1. 一个变量名只能存储一个值
2. 当再次给一个变量赋值的时候，前面一次的值就没有了
3. 变量名称区分大小写（JS 严格区分大小写）

javascript 复制代码

示列:

<body>

    <script>
    // var定义变量; 
    var num;
    // 赋值
    num = 100; 
    num = 200; //被改了

    // 定义同时赋值
    var num2 = 666;
    console.log(num)  //打印  在控制台里输出
    </script>

</body>

变量的命名规则和命名规范

规则：必须遵守的，不遵守就是错
1. 一个变量名称可以由数字、字母、英文下划线（_） 、美元符号（$） 组成
2. 严格区分大小写
3. 不能由数字开头，不要使用中文汉字命名
4. 不能用保留字 或者 关键字
5. 不要出现空格
规范：建议遵守的（开发者默认），不遵守不会报错
1. 变量名尽量有意义（语义化）
2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写（小驼峰）

javascript 复制代码

    var abc123$_ = 999;
    var _ = 888;
    var studentAge = 20;
    var userName = "张三"
    var studentName = "zhangsan";  // 小驼峰 推荐小驼峰
    var StudentName = "zhangsan"; //  大驼峰

六、数据类型（重点）

指我们存储在内存中的数据的类型
我们通常分为两大类基本数据类型和复杂数据类型

基本类型（原始数据类型）

javascript 复制代码

1. 数值类型 number
       - 一切数字都是数值类型（包括二进制，十进制，十六进制等）
       - `NaN`（not a number），表示不是一个数字

       //检测变量的类型 typeof   
       var a =1;
       var b = "hhhhhh";
       var c = a+b;
       console.log(c);//拼接1hhhhhh
       console.log(typeof c);

2. 字符串类型（string）


3. 布尔类型（boolean）


4. null类型（null）

   
5. undefined类型（undefined）

复杂类型object（暂时不讲）

对象类型（object）（对象，引用类型，复合类型）