前端基础学习2 | JavaScript

标签：对象前端 JavaScript JS 学习 HTML var alert

1、什么是 JavaScript

Java Script （简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，它使得网页可交互。

关于JavaScript有必要知道的事:
1) JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，但是基础语法类似。
2) JavaScript 在 1995 年由 Netscape公司的Brendan Eich 发明，并于 1997 年成为ECMA标准。
3) ECMAScript6 （简称：ES6）是最常用的 JavaScript 版本（发布于 2015年）。

ECMA ：ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而 JavaScript 是遵守 ECMAScript。

2、 JavaScript 引入方式

JavaScript 引入方式一般有两种：内部引入和外部引入。

内部脚本引入：将 JS代码定义在 HTML 页面中。
- JavaScript代码必须位于<script></script> 标签之间。
- 在 HTML 文档中，可以在任意地方，放置任意数量的<script>。
- 一般把脚本置于 <body> 元素的底部，加载速度更快。
外部脚本引入：将 JS代码定义在外部 JS 文件中，然后引入到 HTML 页面中。
- 外部文件中，只包含 JS 代码，无需使用 HTML 的 <script> 标签。
- <script> 标签不能自闭合，不支持<script/> 这种操作。

3、JS 基础语法

3.1 书写语法

区分大小写，与 Java 一样，变量名、函数名等都是区分大小写的。
每行结尾的分号 ; 可有可无。
注释：
- 单行注释： // 注释内容
- 多行注释：/* 注释内容 */

大括号表示代码块

// 判断
if(count == 3) { alert(count); }

常用输出语句

/* 方式1. 警告框 */
window.alert("Hello, JavaScript!");
/* 方式2. 显示在HTML */
document.write("Hello, JavaScript!");
/* 方式3. 浏览器控制台 */
console.log("Hello, JavaScript!");

3.2 变量

JavaScript 中用 var 关键字（variable 的缩写）来声明全局变量

JavaScript 是一门弱类型语言，变量可以存放不同类型的值。

变量名需要遵守如下规则：

组成字符可以是任务字母、数字、下划线_ 或美元符号$
变量第一个字符不能是数字
建议使用驼峰命名，例如：var userAge = 10

ECMAScript 6 新增了两个关键字表示不同类型的变量，分别是：

let ，类似于var，范围更小，只在 let 关键字所在的代码块内有效，且不允许重复声明。
const，声明一个只读的常量，一旦声明，常量的值就不能改变。

3.3 数据类型

相关链接：JavaScript 数据类型 (w3school.com.cn)

JS 中分为 原始类型 和 引用类型。

注: 使用 typeof 运算符可以获取数据类型。

原始类型包括：

number：数字（整数、小数、NaN(Not a Number)）。
string：字符串，单双引号都可以。
boolean：布尔。true, false。
null：对象为空。
undefined：当声明的变量未初始化时，该变量的默认值是 undefined。

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

3.4 运算符

JS支持的运算符有以下五种：

算术运算符：+，-，*，/，%，++，--
赋值运算符：=, +=, -=, *=, /=, %=
比较运算符：>，<，>=，<=，!=，==，===
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value

注意 == 与 === 的区别：

== 会进行类型转换，=== 不会进行类型转换，例如：

var age1 = 20;
var age2 = "20";
var age3 = 20;
alert(age1 == age2); // 结果 true
alert(age1 === age2); // 结果 false
alert(age1 === age3); // 结果 true

3.5 类型转换

字符串转为数字：parseInt函数，注：若字面值不是数字，则转为 NaN。

alert(parseInt("12"));    // 12
alert(parseInt("12A15")); // 12
alert(parseInt("A15"));   // NaN (Not a Number)

其他类型转为布尔类型：if函数
- Number：0 和 NaN 为 false，其他均转为 true。
- String：空字符串为 false，其他均转为 true。
- Null 和 undefined 均转为 false。

4、JS 函数

函数（方法）是被设计为执行特定任务的代码块。

定义：JavaScript 函数通过 function 关键字进行定义，语法为：

function 函数名(参数1, 参数2...){
    // 函数要执行的代码  
    return 返回值
}

JS函数的特点：

函数接收的参数称为形参，不需要指定类型，因为JS是弱类型语言。
返回值也不需要定义类型，直接 return 返回值即可。

调用方式：函数名(实际参数)

4.1 函数定义

JS中函数定义有两种方式（默认在ES6规范下）

第一种：声明函数

function add(a, b) { return a + b; }

alert(add(1, 2));  // 结果3

第二种：将匿名函数赋值给变量

const add = function(a, b){ return a + b; }

5、 JS对象

相关链接：JavaScript 对象 (w3school.com.cn)

JS中最常用的五大对象有：Array、String、JSON、BOM、DOM

5.1 Array 数组

JS数组的特点：长度可变，类型可变

定义与使用

// 定义数组
// 方式1: var 变量名 = new Array(元素列表)
var arr = new Array(1,2,3);
// 方式2: var 变量名 = [元素列表]
var arr = [1,2,3];

// 访问数组元素: arr[索引] = 值
arr[2] = 4;

for(let i = 0; i < arr.length; i++){
    console.log(arr[i] + " ");
}// 结果1 2 4

// 长度可变, 类型可变
arr[4] = "hello";  // 此时arr数组元素为 1 2 4 undefined hello
arr[5] = true;	   // 此时arr数组元素为 1 2 4 undefined hello true

常用属性和方法

属性：length：返回数组中元素的个数

方法：

/*
	forEach()  -- 遍历数组中的每个有值的元素，并调用一次传入的函数
	push()     -- 将新元素添加到数组的末尾，并返回新的长度
	splice()   -- 从数组中删除元素
*/
var arr = [1,2,3];

arr.forEach(function(e){
    console.log(e);
})

// ES6特性, 箭头函数(常用)
arr.forEach((e) => {
    console.log(e);
})

5.2 String 字符串

相关链接：JavaScript 字符串 (w3school.com.cn)

定义与使用

// 定义字符串
// 方式1: var 变量名 = new String("...")
var str = new String("hello");
// 方式2: var 变量名 = "..."
var str = "hello";

常用属性和方法

属性：length, 字符串的长度

方法：

/*
	charAt()    -- 返回在指定位置的字符
	indexOf()   -- 检索字符串
	trim()      -- 去除字符串两边的空格
	substring(i, j) -- 提取字符串中两个指定的索引号之间的字符 (含头不含尾)
*/

var str = "Hello";

console.log(str.length);  // 10
console.log(str.charAt(4)); // o
console.log(str.indexOf("lo")); // 3
console.log(str.substring(1, 3)); // el

5.3 JS自定义对象 JSON

相关链接：JavaScript 对象 (w3school.com.cn)

JSON（JavaScript Object Notation），即 JavaScript 对象标记法。

JSON是通过 JavaScript 对象标记法书写的文本。

JSON 特点：

语法简单，层次清晰
多用于数据载体，用于前后端交互，在网络中进行数据传输。

定义与使用

/*
	var 变量名 = {"key1": value1, "key2": value2};
	    value的数组类型有
	      - 数字 (整数或浮点数)
	      - 字符串 (在双引号中)
	      - 逻辑值 (true 或 false)
	      - 数组 (在方括号[]中)
	      - 对象 (在花括号{}中)
	      - null
*/

var user = {
    name : "张三",
    age: 10,
    gender: "male",
    eat: function(){
        alert("该吃饭了");
    }
}

console.log(user.name); // 张三
console.log(user.gender); // male

5.4 BOM 对象

BOM（Browser Object Model）浏览器对象模型，允许 JavaScript 与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

BOM组成：

window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

window 对象

window对象，是 JS中BOM对象里的 window对象，即浏览器窗口对象。

window对象常用属性：

history：对 History对象的只读引用。
location：用于窗口或框架的 Location 对象。
navigator：对 Navigator 对象的只读引用。

window对象常用方法：

alert()，警告框
confirm()，确认框，有确认和取消按钮
setInterval(函数, 毫秒数)，执行器，在指定的周期（单位毫秒）里调用函数或计算表达式。
setTimeout(函数, 毫秒数), 定时器，在指定的毫秒数后调用函数或计算表达式。

JS中调用window对象里的方法：

window.alert("hello");
// 简写
alert("hello");

注: JS调用window对象里的方法，通常可以省略window，直接调用。

setInterval执行器用法：

案例：实现3秒倒计时

var i = 3;
var taskId = setInterval(() => {
    if(i <= 0) {
        clearInterval(taskId);	// 退出执行
    	console.log("时间到");
        return true;
    }
    console.log(i--);
}, 1000)

JS的windows对象中的 Location 对象用法：

Location 对象包括属性：href，设置或返回完整的 URL。

通常可用来实现跳转网站。

location.href = "https://www.baidu.com";

5.5 DOM 对象

DOM（Document Object Model），文档对象模型，位于window对象中。

当网页被加载时，浏览器会创建页面的文档对象模型DOM。

HTML DOM 模型可以被结构化为对象树：

将标记语言的各个组成部分封装为对应的对象：

Document ：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

<html>
    <head>
        <title>DOM</title>
    </head>
    <body>
        <h1>DOM 对象标题</h1>
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>

JS 可以通过DOM对象对 HTML标签 元素进行操作，比如：

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM 是 W3C（万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准，分为3个不同的部分：

Core DOM - 所有文档类型的标准模型
- Document：整个文档对象
- Element：元素对象
- Atrribute：属性对象
- Text：文本对象
- Comment：注释对象
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

Image ：<img>
Button：<input type="button">

JS 操作 HTML元素，需要通过 Element 对象。

而HTML 中的 Element 对象是通过 window 对象中的 Document 对象获取的。

Document 对象中提供了一下获取 Element 元素对象的函数：

// 1. 根据 id 属性值获取, 返回单个 Element 对象
var h1 = document.getElementById("h1");
// 2. 根据标签名称获取, 返回 Element 对象数组
var divs = document.getElementsByTagName("div");
// 3. 根据 name 属性值获取, 返回 Element 对象数组
var hobbys = document.getElementsByName("hooby");
// 4. 根据 class 属性值获取, 返回 Element 对象数组
var cls = document.getElemntsByClassName("cls");

获取到 Element 对象后，该对象中所含的属性值与 HTML标签对应的属性值相对于，参考链接：JavaScript HTML DOM (w3school.com.cn)

6、JS 事件监听

这里的事件是指 HTML事件，即发生在 HTML 元素上的事情，比如：

按钮被单击
鼠标移动到元素上
按下键盘按键

事件监听： JavaScript 可以在事件被侦测到时 执行代码。

6.1 事件绑定

JS 监听事件前需要进行绑定，JS中有两种方式可实现事件绑定。

方式1：通过 HTML 标签中的事件属性进行绑定。

<input type="button" onclick="on()" value="按钮1">

<script>
	function on(){
        alert("按钮被点击了");
    }
</script>

方式2：通过 DOM 元素属性进行绑定。

<input type="button" id="btn" value="按钮2">

<script>
	document.getElementById('btn').onclick = function(){
        alert("我被点击了");
    }
</script>

标签：对象,前端,JavaScript,JS,学习,HTML,var,alert
From： https://www.cnblogs.com/uni1024/p/18054732

前端基础学习2 | JavaScript

1、什么是 JavaScript

2、 JavaScript 引入方式

3、JS 基础语法

3.1 书写语法

3.2 变量

3.3 数据类型

3.4 运算符

3.5 类型转换

4、JS 函数

4.1 函数定义

5、 JS对象

5.1 Array 数组

定义与使用

常用属性和方法

5.2 String 字符串

定义与使用

常用属性和方法

5.3 JS自定义对象 JSON

定义与使用

5.4 BOM 对象

window 对象

5.5 DOM 对象

6、JS 事件监听

6.1 事件绑定

相关文章

赞助商

阅读排行