JavaScript入门必备

---

参考视频：https://ke.qq.com/course/320021

一、JavaScript介绍

JavaScript（简称JS）：是一种轻量级客户端脚本语言，通常被直接嵌入HTML 页面，在浏览器上执行。

JavaScript作用：改变页面中的HTML元素、属性、样式、事件。

二、JavaScript基本使用

2.1.内部方式（内嵌样式），在body标签中使用

<script type="text/javascript">
	<!--
	javaScript语言
	-->
</script>

2.2.外部导入方式（推荐），在head标签中使用

<script type="text/javascript" src="my.js"></script>

2.3.示例：

<script type="text/javascript">
	var name = "hello"; // 定义变量
	alert(name); // 警告框方法，浏览器提示消息
	/* alert(“你好”) */ // 单行与多行注释
</script>

三、事件

事件：指的是当HTML中发生某些事件时所调用的方法（处理程序）。

例如点击按钮，点击后做相应操作，例如弹出一句话

四、选择器

想操作元素，必须先找到元素，主要通过以下三种方法：
• 通过id（常用）
• 通过类名
• 通过标签名

4.1.通过id查找元素

<button type="button" id="btn">点我</button>
<script>
	var x = document.getElementById(“btn”); //获取id为btn的元素
	x.onclick = function () { //绑定点击事件
		alert('亲，有什么可以帮助你的？')
	}
</script>

4.2.通过标签名

<div id="main">
    <p>第一段话</p>
    <p>第二段话</p>
</div>
<script type="text/javascript">
    var x = document.getElementById("main");
    var y = x.getElementsByTagName("p");     /*获取P标签的值，返回一个列表*/
    alert(y[0].innerHTML)       //打印第一段话
    document.write("div中的第二段文本是：" + y[1].innerHTML)      //将获取到的内容写入到当前文档
</script>

五、JS操作HTML

5.1.插入内容：

document.write(“<p>这是JS写入的段落</p>”); //向文档写入HTML内容
x = document.getElementById(‘demo’); //获取id为demo的元素
x.innerHTML=“Hello” //向元素插入HTML内容

5.2.改变标签属性：

document.getElementById(“image”).src=“b.jpg“ //修改img标签src属性值

5.3.改变标签样式：

x = document.getElementById(“p”) //获取id为p的元素
x.style.color=“blue” //字体颜色

5.4.获取输入的值：

请输入：<input type="text" id="input">
<button type="submit" onclick="myFunc()">查看输入内容</button>	//点击按钮，调用myFunc()函数
<p id="demo"></p>
<script type="text/javascript">
	function myFunc() {
        var x = document.getElementById("input");
        var y = document.getElementById("demo");
        y.innerHTML = x.value
    }
</script>

5.5.添加元素：

var p = document.createElement("p"); //创建p标签
var t = document.createTextNode("这是第三个段落。"); //创建添加的文本
p.appendChild(t); //向创建的p标签追加文本
var e = document.getElementById("main"); //获取添加的标签父元素
e.appendChild(p) //向父元素添加新创建的p标签

5.6.删除元素：

var p = document.getElementById(“main”)
p.remove(); //删除元素

六、数据类型

6.1.字符串

在JS中，数据类型有：字符串、数字、布尔、数组、对象、Null、Undefined

<script type="text/javascript">
    var s = "hello world";
    console.log(s.length);      //字符串长度
    console.log(s[0]);
    console.log(s.replace("w", "W"));   //替换
    console.log(s.split(" "));          //分割
    console.log(s.match("w"));
    console.log("hello" + " " + "world");
</script>

在浏览器按F12打开控制台查看结果

6.2.数组

是一个序列的数据结构
定义：

var computer = new Array(); 
或
var computer = ["主机","显示器","键盘","鼠标"]

向数组添加元素：

computer[0]="主机";
computer[1]="显示器";
computer[2]="键盘"; 或
array.push("鼠标")

通过索引获取元素：

computer[2]

6.3.对象

对象：是一个具有映射关系的数据结构。用于存储有一定关系的元素。

格式：d = {‘key1’:value1, ‘key2’:value2, ‘key3’:value3}

注意：对象通过key来访问value，因此字典中的key不允许重复。

定义：

var user = {
	name:"阿良",
	sex: "男",
	age:"30"
};

通过键查询值：

n = user.name;
或
sex = user['sex'];

增加或修改：

user.height = "180cm"
user['height'] = "180cm"

七、操作符、流程控制

操作符：一个特定的符号，用它与其他数据类型连接起来组成一个表达式。常用于条件判断，根据表达式返回True/False采取动作。

7.1.条件判断

if条件判断：判定给定的条件是否满足（True或False），根据判断的结果决定执行的语句。

if (表达式) {
	<代码块> 
} else if (表达式) {
 	<代码块>
} else {
	<代码块>
}

示例：根据用户点击做不同操作

<img id="myimage" src="img/off.jpg" alt="">
<button type="button" onclick="changeImage('on')">开灯</button>
<button type="button" onclick="changeImage('off')">关灯</button>
<script type="text/javascript">
	function changeImage(status) {
		x = document.getElementById('myimage');
		if (status == 'on') {
			x.src = "img/on.jpg";
		} else if (status == 'off') {
		x.src = "img/off.jpg";
		} 
	}
</script>

7.2.循环

for循环：一般用于遍历数据类型的元素进行处理，例如字符串、数组、对象
语法：

for (<变量> in <序列>) {
	<代码块> 
}

7.2.1.示例：遍历数组

var computer = ["主机","显示器","键盘","鼠标"];
//方式1：
for(i in computer) {
	console.log(computer[i]) // 使用索引获取值
}
//方式2：
computer.forEach(function (e) {
	console.log(e)
})

7.2.2.示例：遍历对象

var user = {name:"阿良",sex:"男",age:"30"};
//方式1：
for(let k in user) {
	console.log(k + ":" + user[k])
}
//方式2：
Object.keys(user).forEach(function (k) {
	console.log(k + ":" + user[k])
})

7.2.3.continue与break语句

• continue 当满足条件时，跳出本次循环

• break 当满足条件时，跳出所有循环

八、函数

8.1.定义与调用

语法：

function 函数名称(参数1, 参数2, ...) {
	<代码块>
	return <表达式>
}

示例：

<button type="button" id="btn" onclick="hello()">你好</button>
function hello() {
	alert("hello world")
}

8.2.接收参数

示例：

<button type="button" onclick="myFunc('阿良', '30')">点我</button>
<script type="text/javascript">
	function myFunc(name, age) {
		alert("欢迎" + name + ", 今年" + age);
	}
</script>

九、Window对象

Window 对象表示浏览器中打开的窗口

9.1.属性

示例：刷新按钮

<button type="button" onclick="location.reload()">刷新当前页面</button>
<button type="button" onclick="location.href=location.href">重新请求当前页面</button>
<button type="button" onclick="location.href='http://www.baidu.com'">请求别的页面</button>

9.2.方法

示例：定时刷新页面数据

<p style="color: red" id="dt"></p>
<button type="button" onclick="startRefresh()">开始刷新</button>
<button type="button" onclick="stopRefresh()">停止刷新</button>

<script type="text/javascript">
    function refresh(){
      x = document.getElementById("dt");
      x.innerHTML = new Date();
    }
    function startRefresh() {
        internal = setInterval("refresh()", 1000);
    }
    function stopRefresh() {
        clearInterval(internal)
    }
</script>