js的引入方式

js的基础语法

html用来做网页，css用来美化我们的网页，但是这样还不够，还要我们js来控制网页的交互，知道了js是用来干嘛的，那么我们接下来看看js的引入方式

js的引入方式

同样，js代码也是书写在html中的，主要通过下面的2种引入方式：

第一种方式：内部脚本，将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

<script>
    alert("Hello JavaScript")
</script>

第二种方式：外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含&ltscript>标签
引入外部js的<script>标签，必须是双标签

这里要注意的是：demo.js文件中只有js代码，是没有<script>标签

<script src="js/demo.js"></script>

使用内部脚本的方式

演示在HTML中使用内部脚本的方式来引入js

<!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>JS-引入方式</title>
    <!-- 内部脚本 -->
    <script>
        alert('Hello JS');
    </script>
</head>
<body>
</body>
</html>

使用外部脚本的方式

使用外部脚本的方式引入js，但是要注意的是，使用外部脚本的方式去引入js需要新建一个目录，把我们编写号的js文件引入进来，并指定script的src属性，指定我们js的路径

<!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>JS-引入方式</title>
    <!-- 内部脚本 -->
    <!-- <script>
        alert('Hello JS');
    </script> -->

    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</head>
<body>

</body>
</html>

js的基础语法

基本语法

在上面我们知道了js的引入方式，接下来我们来了解一些js的基础语法

1.区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
2.和Java中不同每行结尾的分号可有可无
3.大括号表示代码块
注释：
单行注释：// 注释内容
多行注释：/* 注释内容 */

接下来看看js中的三个输出语句

api	描述
window.alert()	警告框
document.write()	在HTML 输出内容
console.log()	写入浏览器控制台

<!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>JS-基本语法</title>
</head>
<body>
    
</body>
<script>
    /* alert("JS"); */

    //方式一: 弹出警告框
    // window.alert("hello js");

    // //方式二: 写入html页面中
    // document.write("hello js");

    //方式三: 控制台输出
    console.log("hello js");
</script>
</html>

变量

在了解了一些js的基础语法之后，我们再来看，js的变量把

js的变量有三种

关键字	解释
var	可以立即成全部变量
let	let只在代码块内生效，可以立即局部变量
const	声明常量的，常量一旦声明，不能修改，和c语言的const差不多

变量的注意事项和使用细节

JavaScript 是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名

举例

<!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>JS-变量的细节</title>
</head>
<body>
    
</body>
<script>

    //var定义变量
    var a = 10;
    a = "张三";
    alert(a);

</script>
</html>

细节1

var变量的作用域比较大，因为是全局变量，即使把变量定义在代码块中，在外部还是可以访问到内部的代码中内部定义的属性

<script>
    //var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);

    //特点1 : 作用域比较大, 全局变量
    {
        var x = 1;
    }
    alert(x);
</script>

细节2

var关键字声明的变量可以重复定义，但是会覆盖，所以在浏览器中输出的是A

{
     var x = 1;
     var x = "A";
}
alert(x);

let变量

let关键字来定义变量，它的用法类似于 var，但是所声明的变量，只在 let关键字所在的代码块内有效，且不允许重复声明。

注意let变量可以理解成局部变量，我们把变量声明在代码快中，但是在外部去访问就会报错，因为let声明的变量是局部变量吗，因此我们输出不会看到任何效果，但是当我们打开浏览器的控制台的时候就已经报错了

<script>

    //var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);

    //特点1 : 作用域比较大, 全局变量
    //特点2 : 可以重复定义的
    // {
    //     var x = 1;
    //     var x = "A";
    // }
    // alert(x);
    
    //let : 局部变量 ; 不能重复定义 
    {
        let x = 1;
    }
    alert(x);

</script>

const关键字

const关键字用来声明常量，但是一旦声明，常量的值是无法更改的。

被const修饰的属性就不能在被更改了，否则会报错的

    const pi = 3.14;
    pi = 3.15;
    alert(pi);

数据类型和运算符

虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为：原始类型和引用类型

数据类型	描述
number	数字（整数、小数、NaN(Not a Number)）
string	字符串，单双引皆可
boolean	布尔。true，false
null	对象为空
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

<!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>演示js的数据类型</title>
</head>
<body>

</body>
<script>

    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14); //number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true); //boolean
    alert(typeof false);//boolean

    alert(typeof null); //object 

    var a ;
    alert(typeof a); //undefined
    
</script>
</html>

js的运算符

js中的运算规则绝大多数还是和java中一致的

运算规则	运算符
算术运算符	+ , - , * , / , % , ++ , --
赋值运算符	= , += , -= , *= , /= , %=
比较运算符	> , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符	&& , \|\| , !
三元运算符	条件表达式 ? true_value: false_value

运算符的注意事项和使用细节

在js中，绝大多数的运算规则和java中是保持一致的，但是js中的\==和===是有区别的。

==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较
===：不光比较值，还要比较类型，如果类型不一致，直接返回false

分析：

age == _age 因为==是只比较两个值是否相同，因为age是number类型 _age是字符串类型，不区分数据类型所以是true

age === _age 因为===会区分数据类型即使题目的值相同，因为类型不同所以是false

age === $age 因为age是number类型的 $age也是number类型的，并且他们的值也是相同的，所以是true

<!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>JS-运算符</title>
</head>
<body>
    
</body>
<script>
     var age = 20;
     var _age = "20";
     var $age = 20;
    
     alert(age == _age);//true ，只比较值
     alert(age === _age);//false ，类型不一样
     alert(age === $age);//true ，类型一样，值一样

</script>
</html>