js的引入方式

js的基础语法

基本语法

变量

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

细节1

细节2

let变量

const关键字

数据类型和运算符

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()	写入浏览器控制台

代码演示：

注意：

console.log()是写入到浏览器的控制台中的，需要按键盘的F12打开浏览器的控制台，来进行查看

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

举例

代码演示：

在我们的script标签中的代码我们可以看到，我们先声明了一个变量var 存放了一个10 ，但是后面我们又把一个字符串赋给给了a这在，Java中是一定报错的，但是因为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

代码演示：

注意：

1.typeof可以显示出，我们的数据类型是什么，比如3就是number

2.我们定义了一个变量a 但是没有给其赋值，那么显示的类型就是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); //numberalert(typeof 3.14); //numberalert(typeof "A"); //stringalert(typeof 'Hello');//stringalert(typeof true); //booleanalert(typeof false);//booleanalert(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>