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>
完结
1911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
