JavaScript 基础知识
- 1.1 介绍
- 1.2 引入方式
- 1.3 基础语法
- 1.3.1 书写语法
- 1.3.2 变量
- 1.3.3 数据类型和运算符
- 1.4 函数
- 1.4.1 第一种定义格式
- 1.4.2 第二种定义格式
1.1 介绍
html完成了架子,css做了美化,但是网页是死的,我们需要给他注入灵魂,所以我们需要学习JavaScript,这门语言会让我们的页面能够和用户进行交互。
1.2 引入方式
同样,js代码也是书写在html中的,那么html中如何引入js代码呢?主要通过下面的2种引入方式:
第一种方式:内部脚本,将JS代码定义在HTML页面中。
- JavaScript代码必须位于标签之间。
- 在HTML文档中,可以在任意地方,放置任意数量的
- 一般会把脚本置于元素的底部,可改善显示速度。
例子:
<script>alert("Hello JavaScript")</script>
第二种方式:外部脚本,将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中。
- 外部JS文件中,只包含JS代码,不包含标签。
- 引入外部js的标签,必须是双标签。
例子:
<script src="js/demo.js"></script>
注意:demo.js中只有js代码,没有标签。
第一步:在VS Code中创建名为 10.JS-引入方式.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>
第三步:浏览器打开效果如图所示:
第四步:接下来演示外部脚本,注释掉内部脚本,然后在css目录同级创建js目录,然后创建一个名为demo.js的文件:
第五步:在demo.js中编写如下js内容:
alert('Hello JS2');
第六步:注释掉之前的内部脚本代码,添加标签来引入外部demo.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><!-- alert('Hello JS'); --><script src="js/demo.js"></script></head><body></body></html>
第七步:浏览器刷新效果如图:
1.3 基础语法
1.3.1 书写语法
掌握了js的引入方式,那么接下来我们需要学习js的书写了,首先需要掌握的是js的书写语法,语法规则如下:
区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
大括号表示代码块
注释:
单行注释:// 注释内容
多行注释:/* 注释内容 */
我们需要借助js中3钟输出语句,来演示书写语法
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");</script></html>
浏览器打开如图所示效果:
我们注释掉上述代码,添加代码 document.write(“hello 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></head><body></body><script>/* alert("JS"); *///方式一: 弹出警告框// window.alert("hello js");//方式二: 写入html页面中document.write("hello js");</script></html>
刷新浏览器,效果如图所示:
最后我们使用console.log(“hello 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></head><body></body><script>/* alert("JS"); *///方式一: 弹出警告框// window.alert("hello js");// //方式二: 写入html页面中// document.write("hello js");//方式三: 控制台输出console.log("hello js");</script></html>
浏览器f12抓包,去控制台页面,如图所示:
1.3.2 变量
书写语法会了,变量是一门编程语言比不可少的,所以接下来我们需要学习js中变量的声明,在js中,变量的声明和java中还是不同的。首先js中主要通过如下3个关键字来声明变量的:
关键字 | 解释 |
---|---|
var | 早期ECMAScript5中用于变量声明的关键字 |
let | ECMAScript6中新增的用于变量声明的关键字,相比较var,let只在代码块内生效 |
const | 声明常量的,常量一旦声明,不能修改 |
在js中声明变量还需要注意如下几点:
- 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>
可以看到浏览器弹出张三
在js中,我们var声明的变量可以接受任何数据类型的值。并且var声明的变量的作用于是全局的,注释掉之前的代码,添加如下代码:
<script>//var定义变量// var a = 10;// a = "张三";// alert(a);//特点1 : 作用域比较大, 全局变量{var x = 1;}alert(x);</script>
浏览器照样成功弹出:
而且var关键字声明的变量可以重复定义,修改代码如下:
{ var x = 1; var x = "A";}alert(x);
浏览器弹出内容是A
所以在ECMAScript 6 新增了 let关键字来定义变量,它的用法类似于 var,但是所声明的变量,只在 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>
浏览器打开,f12抓包,来到控制台页面,发现报错,变量没有定义,说明let声明的变量在代码块外不生效
接着我们使用let重复定义变量,代码修改如下:发现idea直接帮我们报错了,说明let声明的变量不能重复定义
在ECMAScript6中,还新增了const关键字用来声明常量,但是一旦声明,常量的值是无法更改的。注释之前的内容,添加如下代码:
const pi = 3.14;pi = 3.15;alert(pi);
浏览器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>//var定义变量// var a = 10;// a = "张三";// alert(a);//特点1 : 作用域比较大, 全局变量//特点2 : 可以重复定义的// {// var x = 1;// var x = "A";// }// alert(x);//let : 局部变量 ; 不能重复定义 // {// let x = 1;// alert(x);// }//const: 常量 , 不能给改变的.const pi = 3.14;pi = 3.15;alert(pi);</script></html>
1.3.3 数据类型和运算符
虽然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); //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中的运算法,js中的运算规则绝大多数还是和java中一致的,具体运算符如下:
运算规则 | 运算符 |
---|---|
算术运算符 | + , – , * , / , % , ++ , – |
赋值运算符 | = , += , -= , *= , /= , %= |
比较运算符 | > , = , <= , != , == , === 注意 == 会进行类型转换,=== 不会进行类型转换 |
逻辑运算符 | && , || , ! |
三元运算符 | 条件表达式 ” /><!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> 在js中,虽然不区分数据类型,但是有时候涉及到数值计算,还是需要进行类型转换的,js中可以通过parseInt()函数来进行将其他类型转换成数值类型。注释之前的代码,添加代码如下:
除此之外,在js中,还有非常重要的一点是:0,null,undefined,“”,NaN理解成false,反之理解成true。注释掉之前的代码,添加如下代码:
浏览器刷新页面,发现没有任何弹框,因为0理解成false,所以条件不成立。注释掉上述代码,添加如下代码:
浏览器刷新,因为1理解成true,条件成立,所以浏览器效果如下; 其他情况可以一一演示,完整演示代码如下:
流程控制语句if,switch,for等和java保持一致,此处不再演示 需要注意的是:在js中,0,null,undefined,“”,NaN理解成false,反之理解成true 1.4 函数在java中我们为了提高代码的复用性,可以使用方法。同样,在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块,通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法 1.4.1 第一种定义格式第一种定义格式如下:
因为JavaScript是弱数据类型的语言,所以有如下几点需要注意:
如下示例:
代码演示:
但是上述只是定义函数,函数需要被调用才能执行!所以接下来我们需要调用函数
查看浏览器运行结果:浏览器弹框内容如下图所示: 1.4.2 第二种定义格式第二种可以通过var去定义函数的名字,具体格式如下:
接下来我们按照上述的格式,修改代码如下:只需要将第一种定义方式注释掉,替换成第二种定义方式即可,函数的调用不变
浏览器弹框效果和上述一致 我们在调用add函数时,再添加2个参数,修改代码如下:
浏览器打开,发现没有错误,并且依然弹出30,这是为什么呢? 因为在JavaScript中,函数的调用只需要名称正确即可,参数列表不管的。如上述案例,10传递给了变量a,20传递给了变量b,而30和40没有变量接受,但是不影响函数的正常调用。 后记 |