🌱博客主页：大寄一场.
🌱系列专栏：前端

🌱往期回顾：HTML+CSS+JS 学习笔记（一）———HTML(上)

HTML+CSS+JS 学习笔记（一）———HTML(中)

HTML+CSS+JS 学习笔记（一）———HTML(下)

HTML+CSS+JS 学习笔记（二）———CSS

😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注

前言

HTML中使用javascript

JS注释

单行注释

多行注释

JS代码的语法规则

三个常用的输出语句

变量

如何使用变量

变量的命名规则和规范

基础语法

1- if语句

2- 循环

3.contiinue语句

4.break语句

5. try···catch···fnally 语句

Error 对象

使用 throw 语抛出异常

前言

为什么要学习Javascript?

经过之前的学习以后,我们已经能够知道,如果要建立一个网站,我们可以通过

HTML实现整个网站的结构,CSS实现整个网站的样式,完成一个非常漂亮的静态页面,但是这样的页面仅仅是静

态页面,如果我们想让这个网站的功能更加丰富,我们必须给这个网站添加行为也就是我们javascript,那么这个

行为到底是什么意思呢?我们先来看一个例子: 百度图片搜索动态的加载更多的数据,不使用JS是做不到的

JavaScript是什么?

官方概念:这是一个跨平台的脚本语言

平台:就是运行环境,这里一般指操作系统

JavaScript和HTML、CSS的区别

HTML：提供网页的结构，提供网页中的内容
CSS: 用来美化网页
JavaScript: 可以用来控制网页内容，给网页增加动态的效果

JavaScript的组成

ECMAScript JavaScript的核心

ECMA 欧洲计算机制造联合会

网景：JavaScript

微软：JScript

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标

准，定义了一种语言的标准与具体实现无关

BOM

浏览器对象模型一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率

等

DOM

文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操

作

HTML中使用javascript

在html页面中使用<script> 标签包含页面需要执行的 javascript代码

引入外部的js文件到本html页面中生效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<!-- 在本页面的 script 标签中书写JS脚本语法 -->
<script>
document.write("<p style='background-color:lightgray;'>大家好</p>");
</script>
<!-- 引入外部的JS文件 -->
<script src="./js/main.js"></script>
</html>

JS注释

单行注释

用来注释单条代码 , 也可以用来描述下面一行或多行代码的作用

// 这是一个变量
var age = 18;

说明: subline编辑器下单行注释快键键 ctrl+/

多行注释

用来注释多条代码

/
var age = 18;
var username = 'zhangsan';
console.log(username, age);
/

说明: subline编辑器下多行注释快键键 ctrl+shift+/

JS代码的语法规则

JavaScript严格区分大小写
JavaScript脚本程序须嵌入在HTML文件中
JavaScript脚本程序可以独立保存为一个外部文件这个文件是不能自己运行的它必须要依赖于HTML文件
JavaScript脚本程序中不能包含HTML标记代码
每条语句末尾如果加分号一定是英文下的分号(;)，最好加分号,不要省略
一行写了多条JS语句这个时候每一条语句就必须要加分号

三个常用的输出语句

document.write("要输出的内容")

作用：

它主要是用来向body标签中输出write()小括号里面的内容document它表示是当前的HTML文档对象
write在英文中是“写”的意思
对象是由属性与方法组成的对象.属性与对象.方法从视觉上面来区分属性与方法属性不带小括号方法
带有小括号
write它是一个输出的方法如果输出的内容是HTML标签,浏览器会帮我们解析

window.alert("要输出的内容")

作用:

alert在英文是“警告”的意思
window它表示的是当前的浏览器窗口对象 window对象是js中最顶级的对象可以省略不写
它主要是用来向当前的浏览器窗口中弹出一个警告提示框
实际开发不太常用用户体验不好经常用来检测结果

window 对象与 document 对象之间的区别 :

window对象它代表着当前的浏览器窗口对象
document对象它代表着当前的HTML文档对象
window对象包含document对象
站在window的角度来说document对象是window对象的一个属性

console.log(" 要输出的内容 ")

作用:

向浏览器的调试工具中的“console” 选项卡里面输出内容
console的英文意思是“控制台”
log是日志的意思
经常内部测试用的程序猿看的

另外: console.log还可以同时输出多个值

1 console.log(值1,值2,值3,值4...)

2 或者

3 console.log(变量名1,变量名2,变量名3,变量名4...)

变量

什么是变量

变量是一种可以变化的量，变量主要是用于存储数据的。我们命令JavaScript去干活的时候，往往需要产生一

些数据，需要临时性存放起来，方便取用。我们也可以理解为，变量就像一个购物袋，我们可以用来装苹

果、榴莲（当然也可以用来装玫瑰），变量是存放在内存中，内存是临时存储数据的。

硬盘：持久性存储

内存：临时性存储

总结:

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
为什么要用变量：有些数据我们需要保存起来，方便后面来使用我们就可以用变量来做
变量是用来保存数据的变量的本质就是一个盒子类似我们前面学的html 标签
变量就是用来保存数据的容器变量是保存到内存里面的。

如何使用变量

var 声明变量

定义变量需要有一个关键字var 英文单词variable变量的意思

声明变量 , 不赋值

var 变量名

声明变量,并且赋值

var 变量名 = 值

var age;

age = 18;

var username = "zhangsan";

变量的赋值

将等于号右边的值赋值给等于号左边的变量名！

第一种方式:先声明变量然后再来赋值

var age;

age = 18;

第二种方式:声明变量的同时直接给变量赋值

var age = 18;

可以同时声明多个变量

方式一:

var age, username, sex;

age = 10;

username = 'zhangsan';

sex = '男'

方式二:

var age = 10,username = "zhangsan",sex="男";

修改变量的值,变量总是喜新厌旧的,变量里面只能存放最后给的值类似css层叠性

声明一个变量已经给其赋了值然后再来修改这个变量的值！

格式:

变量名 = "新值" //给变量名重新赋一个值

var age = 16;

age = 18;

//这个时候，age的值为18，而不是16，18.

变量的命名规则和规范

规则必须遵守的，不遵守会报错

由字母(A-Za-z)、数字(0-9)、下划线(_)、$符号组成，不能以数字开头
不能是JS中关键字和保留字，例如：for、while等(其中变量名为name需要注意,不会错,但是不推荐使
用,因为name是window对象下的一个属性,设置的属性值会被加上双引号,成为字符串类型)
区分大小写

规范建议遵守的，不遵守不会报错

变量名需要有意义,希望大家在声明变量的时候变量名要做到"见名知意"
变量名可以由多个英文单词组成建议使用下划线连接法或者是驼峰法

1. 下划线连接法每一个单词之间使用下划线进行连接比如:get_user_name

2. 驼峰法第一个英文单词的首字母小写其它的英文单词首字母大写比如:getUserName

基础语法

1- if语句

<script>
//定义变量
var score = 90;
if(score < 60){
document.write("得分：" + score + ", 等级：差");
}else if(score < 75){
document.write("得分：" + score + ", 等级：中");
}else if(score < 85){
document.write("得分：" + score + ", 等级：良");
}else if(score < 95){
document.write("得分：" + score + ", 等级：优秀");
}else{
document.write("得分：" + score + ", 等级：很秀");
}
</script>

2- 循环

<script>
//定义累加和
var sum = 0;
//数值循环
for(var i=1; i<=100; i++){
sum += i;
}
document.write("sum= " + sum +"<br>");
//定义变量
var sum = 0;
var i = 1;
//条件循环
while(i<=10){
sum += i;
i++;
}
document.write(sum);
</script>

3.contiinue语句

for(i=1;i<=10;i++)
{if(i==5) continue;
document.write(i+"\n");}

结果：1 2 3 4 5 6 7 8 9 10

在使用continue语句跳转本次循环后，如果循环条件的结果为法拉瑟，则退出循环，否则继续下一次循环

4.break语句

for(i=1;i<=10;i++)
{if(i==5) break;
document.write(i+"\n");}

结果：1 2 3 4

5. try···catch···fnally 语句

JavaScript 从 Java 中引入了 ty.catch...fnally 语，具体语法格式如下:

try{somestatements;
}
catch(exception)
{
somestatements;
}
finally
{
somestatements;
}

该语法中的参数说明如下

(1) try:尝试执行代码的关键字

(2) catch: 捕捉异常的关键字。
(3)fnally:最终一定会被处理的区块的关键字，该关键字和后面大括号中的语句可以省略。

Error 对象

try...catch...fnally 语句中的 catch 通常捕提到的对象是 Error 对象，当运行JavaScrip代码时，如果产生了错误或异常，JavaScript 就会生成一个 Error 对象的实例来描述错误或异常，该实例中包含一些特定的错误或异常信息。
Error 对象有以下两个属性。
(1) name:表示异常类型的字符串
(2) message:实际的异常信息。

例如，将异常提示信息放置在弹出的提示对话框中，其中包括实际的异常信息和异常类型的字符串。程序代码如下:

var str = "I like JavaScript";// 定义字符串变量try(
document.write(str.charat (5));//应用错误的方法名charat
}
catch(exception){//弹出实际的异常信息和异常类型的字符串
alert("实际的异常信息为:"+exception.message+"\n异常类型的字符串为:"+exception.name);
}