JavaScript学习
1. JS引入方式
- 内部脚本:将JS带代码定义在HTML页面中
- JS代码必须位于<script></script>标签之间
- 在HTML文档中,可以在任意地方放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部,可改善显示速度
<script> alert("Hello JavaScript") </script>
- 外部脚本:将JS代码定义在外部 .js 文件中,然后引入
- 外部 js 文件中,只包含JS代码,不包含<script>标签
- <script>标签不能自闭和
alert("Hello JavaScript")
<script src="js/demo.js"><script>
2. JS基础语法
2.1 语法规则
语法规则:
- 区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无(建议写)
- 注释:
- 单行注释:// 注释内容
- 多行注释:/* 注释内容 */
- 大括号表示代码块
//判断 if(count == 3){ alert(count) }
2.2 输出语句
输出语句:
- window.alert() 写入警告框
- document.write() 写入HTML输出
- console.log() 写入浏览器控制台
<script>
/* alert("JS"); */
//方式一: 弹出警告框
window.alert("hello js1");
//方式二: 写入html页面中
document.write("hello js2");
//方式三: 控制台输出
console.log("hello js3");
</script>
2.3 变量
变量:
JS中主要通过如下3个关键字来声明变量:
关键字 | 解释 |
---|---|
var | 早期ECMAScript5中用于变量声明的关键字,作用于全局 |
let | ECMAScript6中新增的用于变量声明的关键字,相比于var,let只在代码块内生效,且不能重复定义 |
const | 声明常量的,常量一旦声明,不能修改 |
在JS中声明变量还需要注意如下几点:
- JavaScript 是一门弱类型语言,变量可以存放不同类型的值 。
- 变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
2.4 数据类型和运算符
数据类型和运算符:
JS中的数据类型分为 :原始类型 和 引用类型
原始数据类型 | 描述 |
---|---|
number | 数字(整数、小数、NaN(Not a Number)) |
string | 字符串,单双引皆可 |
boolean | 布尔。true,false |
null | 对象为空 |
undefined | 当声明的变量未初始化时,该变量的默认值是 undefined |
使用 typeof 函数可以返回变量的数据类型:
<script>
//原始数据类型
alert(typeof 3); //number
alert(typeof 3.14); //number
alert(typeof "A"); //string
alert(typeof 'Hello');//string
alert(typeof true); //boolean
alert(typeof false); //boolean
alert(typeof null); //object
var a ;
alert(typeof a); //undefined
</script>
JS中的运算符和运算规则绝大多数是和java中一致的:
运算规则 | 运算符 |
---|---|
算术运算符 | + , - , * , / , % , ++ , – |
赋值运算符 | = , += , -= , *= , /= , %= |
比较运算符 | > , < , >= , <= , != , == , === 注意 == 会自动转换类型进行比较,=== 不会进行类型转换 |
逻辑运算符 | && , || , ! |
三元运算符 | 条件表达式 ? true_value: false_value |
js中的==和===是有区别的:
- ==:只比较值是否相等,不区分数据类型,哪怕类型不一致,==也会自动转换类型进行值得比较
- ===:不光比较值,还要比较类型,如果类型不一致,直接返回false
<script>
var age = 20;
var _age = "20";
var $age = 20;
alert(age == _age);//true ,只比较值
alert(age === _age);//false ,类型不一样
alert(age === $age);//true ,类型一样,值一样
</script>
另外,注意:
- 涉及到数值计算,JS可通过parseInt()函数将其他类型转换成数值类型
// 类型转换 - 其他类型转为数字 alert(parseInt("12")); //12 alert(parseInt("12A45")); //12 alert(parseInt("A45"));//NaN (not a number)
- 在JS中,0,null,undefined,“”(空字符串),NaN理解成false,反之理解成true
流程控制语句if,switch,for等和java保持一致,此处不再演示。
3. JS函数
JavaScript中的函数被设计为执行特定任务的代码块,通过关键字function来定义。
形式参数不需要声明类型,返回值也不用声明类型,直接 return 即可。
- 第一种定义格式:
function 函数名(参数1,参数2..){ 要执行的代码 }
- 第二种定义格式:
var 函数名 = function (参数1,参数2..){ //要执行的代码 }
演示:
<script>
//函数定义-1
function add(a,b){
return a + b;
}
//函数定义-2
var add = function(a,b){
return a + b;
}
//调用
let result = add(10, 20);
alert(result)
</script>
另外,在调用add函数时,修改代码如下:
var result = add(10,20,30,40);
发现浏览器运行依然没有错误,这是因为在JavaScript中,函数的调用只需要名称正确即可。上述案例,10,20传递给了变量a,b,而30和40没有变量接收,但是不影响函数的正常调用。
4. JS对象
JavaScript中的对象有很多,主要可以分为如下3大类(可查看W3school在线学习文档)
第一类:基本对象,主要学习Array和JSON和String
第二类:BOM对象,主要是和浏览器相关的几个对象
第三类:DOM对象,JavaScript中将html的每一个标签都封装成一个对象
4.1 基本对象
4.4.1 Array 对象
Array对象是用来定义数组的。
- 1)定义
var 数组名 = new Array(元素1, 元素2, ……); //方式一 var 数组名 = [ 元素1, 元素2, …… ]; //方式二
- 2)访问
数组名[索引] = 值
- 3)特点
JavaScript中数组的长度是可以变化的,而且数组中可以存储任意数据类型的值。
输出结果://特点: 长度可变 类型可变 var arr = [1,2,3,4]; arr[10] = 50; console.log(arr[10]); console.log(arr[9]); console.log(arr[8]);
- 4)Array 对象常用的属性和方法
属性:- length属性:length属性可以用来获取数组的长度。
var arr = [1,2,3,4]; arr[10] = 50; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
- forEach():遍历数组中的每个有值的元素,并调用一次传入的函数。
//e是形参,接受的是数组遍历时的值 arr.forEach(function(e){ console.log(e); })
- push():用于向数组的末尾添加元素,并返回新的长度。
//push: 添加元素到数组末尾 arr.push(7,8,9); console.log(arr);
- splice():从数组中删除元素。
参数1:表示从哪个索引位置删除
参数2:表示删除元素的个数//splice: 删除元素 arr.splice(2,2); console.log(arr); ~~
- length属性:length属性可以用来获取数组的长度。
4.4.2 String 对象
- 1)定义:
var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二
-
2)String对象常用属性和方法
属性 描述 length 字符串的长度。 方法 描述 charAt() 返回指定索引位置的字符。 indexOf() 索引指定字符串的位置。 trim() 去除字符串两边的空格。 substring() 提取字符串中两个指定索引位置间的字符。
4.4.3 JSON 对象
JavaScript自定义对象:
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};
我们可以通过如下语法调用属性:
对象名.属性名
通过如下语法调用函数:
对象名.函数名()
json对象:
{
"key":value,
"key":value,
"key":value
}
其中,key必须使用引号并且是双引号标记,value可以是任意数据类型。
案例:
定义一个json字符串:
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);
浏览器输出结果如下:
json字符串转json对象:
var obj = JSON.parse(jsonstr);
alert(obj.name);
我们也可以通过如下函数将json对象再次转换成json字符串:
alert(JSON.stringify(obj));
4.2 BOM 对象
BOM的全称是Browser Object Model(浏览器对象模型)。
就是说JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能,可以通过操作BOM对象的相关属性或者函数来完成。
BOM中提供了如下5个对象:
对象名称 | 描述 |
---|---|
Window | 浏览器窗口对象 |
Navigator | 浏览器对象 |
Screen | 屏幕对象 |
History | 历史记录对象 |
Location | d地址栏对象 |
我们重点学习下Window对象、Location对象。
4.2.1 Window 对象
-
介绍:浏览器窗口对象
-
获取:直接使用 window,其中 window. 可以省略。如
window.alert("Hello Window1"); alert("Hello Window2");
-
属性
属性 描述 history 用于获取history对象 location 用于获取location对象 Navigator 用于获取Navigator对象 Screen 用于获取Screen对象 也就是说我们要使用location对象,只需要通过代码
window.location
或者简写location
即可使用。 -
方法
函数 描述 alert() 显示带有一段消息和一个确认按钮的警告框。 comfirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 示例
- confirm(文本)
confirm("您确认删除该记录吗?");
当用户点击确认时,该方法返回true,点击取消时,返回false。- setInterval(fn, 毫秒值)
//定时器 - setInterval -- 周期性的执行某一个函数 var i = 0; setInterval(function(){ i++; console.log("定时器执行了"+i+"次"); },2000);
用于周期性的执行某个功能,并且是循环执行。- setTimeout(fn, 毫秒值)
//定时器 - setTimeout -- 延迟指定时间执行一次 setTimeout(function(){ alert("JS"); },3000);
浏览器打开,3s后弹框,关闭弹框,发现再也不会弹框了。
4.2.2 Location 对象
location是指代浏览器的地址栏对象,对于这个对象,我们常用的是href属性,用于获取或者设置浏览器的地址信息.
//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.baidu.com";
上述代码首先会弹框展示当前浏览器地址栏信息,点击确定后会跳转到百度首页。
4.3 DOM 对象
DOM:Document Object Model(文档对象模型)。就是说 JavaScript 将 HTML 文档的各个组成部分封装为对象。
封装的对象分为
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
JavaScript 通过DOM,就能够对HTML进行操作:
1)改变 HTML 元素的内容
2)改变 HTML 元素的样式(CSS)
3)对 HTML DOM 事件作出反应
4)添加和删除 HTML 元素
HTML中的 Element 对象可以通过Document 对象获取,而 Document 对象是通过window 对象获取的。
document 对象中提供了以下获取 Element 元素对象的方法:
函数 | 描述 |
---|---|
document.getElementById() | 根据id属性值获取,返回单个Element对象 |
document.getElementsByTagName() | 根据标签名称获取,返回Element对象数组 |
document.getElementsByName() | 根据name属性值获取,返回Element对象数组 |
document.getElementsByClassName() | 根据class属性值获取,返回Element对象数组 |
操作属性
获取到标签了,我们如何操作标签的属性呢?——查询文档
4.4 案例
<!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-对象-DOM-案例</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls" >灯泡</div> <br>
<div class="cls">开关</div> <br>
<input type="checkbox" name="hobby"> 模式1
<input type="checkbox" name="hobby"> 模式2
<input type="checkbox" name="hobby"> 模式3
</body>
</html>
浏览器打开如图:
需求:
- 点亮灯泡
- 所有的div标签的标签体内容后面加上:very good ,且为红色字体
- 使所有的复选框呈现被选中的状态
代码实现:
<script>
//1. 点亮灯泡 : src 属性值
var img = document.getElementById('h1');
img.src = "img/on.gif";
//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
const div = divs[i];
div.innerHTML += "<font color='red'>very good</font>";
}
// //3. 使所有的复选框呈现选中状态
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
const check = ins[i];
check.checked = true;//选中
}
</script>
完结