JavaScript基础02

JavaScript基础02

JavaScript事件与对象

JavaScript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

语法

//函数就是包裹在花括号中的代码块，前面使用了关键字function:
function functionname()
{
	//执行代码
}

//调用函数时，您可以向其传递着，这些值被称为参数
function myFunction(var1,var2)
{
    //执行代码
}

返回值

我们希望函数将值返回调用它的地方，可以通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
	var x=5;
	return x;
}

示例：
求两个数之和：

//声明函数
function sum(a,b){
	s = a + b;
	return s;
}

JavaScript常用函数

字符串函数

indexOf()

描述：返回某个指定的字符串值在字符串中首次出现的位置。
原型：

stringObject.indexOf(searchvalue,fromindex)

参数	描述
searchvalue	必需。规定需检索的字符串值。
fromindex	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

说明：该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注释：indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。
用法：

<script type="text/javascript">
	var str = "Hello world!"
	console.log(str.indexOf("Hello"))
	console.log(str.indexOf("World"))
	console.log(str.indexOf("world"))
</script>

输出：

0
-1
6

lastIndexOf()

描述：返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
原型：

stringObject.lastIndexOf(searchvalue,fromindex)

参数	描述
searchvalue	必需。规定需检索的字符串值。
fromindex	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

返回值：如果在 stringObject 中的 fromindex 位置之前存在 searchvalue，则返回的是出现的最后一个searchvalue 的位置。

说明：该方法将从尾到头地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的结尾（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一个字符在 stringObject 中的位置。stringObject 中的字符位置是从 0 开始的。
用法：

<script type="text/javascript">
	var str = "Hello Hello!"
	console.log(str.lastIndexOf("Hello"))
</script>

输出：

6

replace()

描述：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
原型：

 stringObject.replace(regexp/substr,replacement)

参数	参数
regexp/substr	必需。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp对象。
replacement	必需。一个字符串值。规定了替换文本或生成替换文本的函数。

用法1 单次替换：

<script type="text/javascript">
	var str = "Hello World!"
	document.write(str.replace(/Hello/, "Hi"))
	document.write("<br>")
	str = "Hello Hello World!"
	document.write(str.replace(/Hello/, "Hi"))
</script>

输出1：

Hi World!
Hi Hello World!

用法2 全局替换：

<script type="text/javascript">
	var str = "Hello Hello World!"
	document.write(str.replace(/Hello/g, "Hi"))
</script>

输出2：

Hi Hi World!

substr()

描述：在字符串中抽取从 start 下标开始的指定数目的字符。
原型：

stringObject.substr(start,length)

参数	描述
start	必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length	可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

返回值：一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。
注释：substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。
重要事项：ECMAscript 没有对该方法进行标准化，因此反对使用它。
重要事项：在 IE 4 中，参数 start 的值无效。在这个 BUG 中，start 规定的是第 0 个字符的位置。在之后的版本中，此 BUG 已被修正。
用法：

<script type="text/javascript">
	var str = "Hello world!"
	console.log(str.substr(3))
	console.log(str.substr(3, 7))
</script>

输出：

lo world!
lo worl

toLowerCase()

描述：用于把字符串转换为小写。
原型： stringObject.toLowerCase()
用法：

<script type="text/javascript">
	var str = "Hello World!"
	console.log(str.toLowerCase())
</script>

输出：

hello world!

toUpperCase()

描述：用于把字符串转换为大写。
原型：

 stringObject.toUpperCase()

返回值：一个新的字符串，在其中 stringObject 的所有小写字符全部被转换为了大写字符。
用法：

<script type="text/javascript">
	var str = "Hello World!"
	console.log(str.toUpperCase())
</script>

输出：

HELLO WORLD!

数组函数

push()

描述：向数组的末尾添加一个或多个元素，并返回新的长度。
原型： arrayObject.push(newelement1,newelement2,…,newelementX)

参数	描述
newelement1	必需。要添加到数组的第一个元素。
newelement2	可选。要添加到数组的第二个元素。
newelementX	可选。可添加多个元素。

返回值：把指定的值添加到数组后的新长度。
说明：push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
注释：该方法会改变数组的长度。
提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法。
用法：

<script type="text/javascript">
	var arr = new Array(3)
	arr[0] = "George"
	arr[1] = "John"
	arr[2] = "Thomas"
	console.log(arr)
	console.log(arr.push("James"))
	console.log(arr)
</script>

输出：

["George", "John", "Thomas"]
4
["George", "John", "Thomas", "James"]

reverse()

描述：用于颠倒数组中元素的顺序。
原型：

 arrayObject.reverse()

注释：该方法会改变原来的数组，而不会创建新的数组。
用法：

<script type="text/javascript">
	var arr = new Array(3)
	arr[0] = "George"
	arr[1] = "John"
	arr[2] = "Thomas"
	console.log(arr)
	console.log(arr.reverse())
</script>

输出：

["George", "John", "Thomas"]
["Thomas", "John", "George"]

JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等。此外，JavaScript 允许自定义对象。

自定义对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号
分隔：

var person = {
	firstname: "John",
	lastname: "Doe",
	id: 5566
};
console.log(person);

person有三个属性：firstname、lastname 以及 id

var person = {
	firstname: "John",
	lastname: "Doe",
	id: 5566
};
console.log(person.lastname);
console.log(person["id"]);

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

HTML事件

HTML 事件是发生在 HTML 元素上的事件，当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

事件可以是浏览器行为，也可以是用户行为。

是 HTML 事件的实例：

• HTML 页面完成加载（事件）
• HTML input 字段改变时（事件）
• HTML 按钮被点击（事件）

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

onload

<body onload="alert('onload')">

onchange

<input type="text" onchange="alert('onchange')">

onmouseover onmouseout

<input type="text" onmouseover="alert('onmouseover')">
<input type="text" onmouseout="alert('onmouseout')">
<img src="https://www.secdriver.com/assets/ldy/logo.png" onmouseover="alert('鼠标
移上来了')" οnmοuseοut="alert('鼠标移出去了')">

onmousedown onmouseup

<input type="text" onmousedown="alert('onmousedown')">
<input type="text" onmouseup="alert('onmouseup')">

onclick

<head>
	<title>HTML事件</title>
	<script>
		function myevent() {
			alert('onclick');
		}
	</script>
</head>

<body>
	<button onclick="myevent()">点我</button>
</body>

onerror

<img src="xxxx" alt="出错了" onerror="alert('onerror')">

HTML DOM

DOM（Document Object Model，文档对象模型）。
HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通过 JavaScript操作 HTML 元素，首先需要找到该元素。

有三种方法来做这件事：

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

通过 id 查找 HTML 元素

<body>
	<h2 id="h2">这是一个标题</h2>
	<script>
		var h2 = document.getElementById("h2");
		console.log(h2);
    </script>
</body>

通过标签名找到 HTML 元素

查找元素中的所有

元素：

<body>
	<h2>这是一个标题</h2>
	<h2>这还是一个标题</h2>
	<script>
		var h2 =
document.getElementsByTagName('h2');
	console.log(h2);
    </script>
</body>

通过类名找到 HTML 元素

<body>
	<h2 class="h2">这是一个标题</h2>
	<script>
		var h2 = document.getElementsByClassName("h2");
		console.log(h2);
	</script>
</body>

改变HTML内容

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变内容

<body>
	<h2 id="h2">这是一个标题</h2>
	<script>
		var h2 = document.getElementById("h2");
		h2.innerHTML = "修改标题内容";
	</script>
</body>

改变属性

<body>
	<img id="img" src="xx">
	<script>
		var img = document.getElementById("img");
		img.src = "https://www.secdriver.com/assets/ldy/logo.png";
	</script>
</body>

改变事件

<body>
<img id="img" src="https://www.secdriver.com/assets/ldy/logo.png">
<script>
var img = document.getElementById("img");
img.onclick = function () {
alert('通过js改变事件');
};
</script>
</body>

添加监听

<body>
	<img id="img" src="https://www.secdriver.com/assets/ldy/logo.png">
	<script>
		var img = document.getElementById("img");
        img.addEventListener("click", function () {
			alert('添加监听');
		});
	</script>
</body>

添加元素

<body>
	<div id="div"> </div>
		<script>
			var div = document.getElementById("div");
			var p = document.createElement("p");
            p.innerText = "这是js创建的p标签";
			div.appendChild(p);
		</script>
</body>

移除元素

<body>
	<div id="div">
		<p id="p">这是一个p标签</p>
		<p>这是另一个p标签</p>
	</div>
	<script>
		// 要移除一个元素，你需要知道该元素的父元素。
		var div = document.getElementById("div");
		var p = document.getElementById("p");
		div.removeChild(p);
	</script>
</body>

总结：

tion () {
alert(‘添加监听’);
});

```

添加元素

<body>
	<div id="div"> </div>
		<script>
			var div = document.getElementById("div");
			var p = document.createElement("p");
            p.innerText = "这是js创建的p标签";
			div.appendChild(p);
		</script>
</body>

移除元素

<body>
	<div id="div">
		<p id="p">这是一个p标签</p>
		<p>这是另一个p标签</p>
	</div>
	<script>
		// 要移除一个元素，你需要知道该元素的父元素。
		var div = document.getElementById("div");
		var p = document.getElementById("p");
		div.removeChild(p);
	</script>
</body>