目录
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代码,不包含<script>标签
-
引入外部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>