目录
前言
为什么要学习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); }
使用 throw 语抛出异常
有些 JavaScript 代码并没有语法上的错误，但存在逻辑上的错误。对于这种错误，JavaScript 是不会抛出异常的。这时，就需要创建一个Error 对象的实例，并使用 throw 语句抛出异常。在程序中使用 throw 语句可以有目的地抛出异常。
throw 语句的语法格式如下:
throw new Error("somestatements");
