JavaScript学习二

星石传说

已于 2023-11-06 12:22:43 修改

阅读量56

点赞数

分类专栏： python篇文章标签： javascript 学习开发语言

于 2023-11-02 10:20:28 首次发布

本文链接：https://blog.csdn.net/2301_78630677/article/details/134170185

版权

python篇专栏收录该内容

92 篇文章 10 订阅

订阅专栏

JavaScript学习二

文章目录

前言
一、JS数组
二、JS核心对象
三、DOM
四、JS事件
总结

前言

继续一下JS的学习。

一、JS数组

数组对象是使用单独的变量名来存储一系列的值。

var mycars = new Array("Saab","Volvo","BMW");
//或者
var mycars = ["Saab", "Volvo", "BMW"];

以动态添加元素

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

总之与pythond的列表差不多,索引也是从0开始的,

尝试访问数组以外的索引，返回值 undefined

push()方法

使用 push() 方法在数组末尾增加一个或多个元素

pop()方法

.pop() 方法用来删除（“抛出”）一个数组末尾的值。

我们可以把这个删除（“抛出”）的值赋给一个变量存储起来

shift() 方法

它的工作原理类似 .pop()，但它移除的是第一个元素，而不是最后一个

unshift() 方法

.unshift() 方法用起来就像 .push() 方法一样, 但不是在数组的末尾添加元素，而是在数组的头部添加元素

concat() 方法

JavaScript的 concat() 方法允许您连接数组并创建一个全新的数组

forEach() 方法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

var numbers = [3, 4, 5, 6, 7];
var x = 0;
numbers.forEach(function(item){

    x += item;

});

//结果x的值为25

indexOf() 方法

indexOf() 方法可返回数组中某个指定的元素位置。该方法将从头到尾地检索数组，看它是否含有对应的元素。返回第一次出现该元素的位置。
如果在数组中没找到指定元素则返回 -1。

slice() 方法

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。（相当于列表的切片）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wht</title>
</head>
<body>
<p>fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]</p>
<p >fruits.slice(1,3), 结果是:<span id="demo1"></span>
</p>
<p >fruits.slice(-3,-1), 结果是:<span id="demo2"></span>
</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var myBest = fruits.slice(-3,-1);
	var x=document.getElementById("demo1");
	x.innerHTML=citrus;
	var y=document.getElementById("demo2");
	y.innerHTML=myBest;
}
</script>

</body>
</html>

在JavaScript中，数组总是使用数字编号的索引。当您希望索引为字符串（文本）时，最好使用对象。当您希望索引为数字时使用数组。

二、JS核心对象

2.1. String对象

String 对象用于处理文本（字符串）。
创建方法： new String()。

var txt = new String("string");

// 或者更简单方式：
var txt = "string";

在这里插入图片描述

2.2. Window对象

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

如果文档包含框架（< frame > 或 < iframe > 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

在这里插入图片描述

我们之前有使用过的alert（）就是window对象的方法，调用window对象方法可以不需要指定window对象：

在这里插入图片描述

open() 方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

//语法
window.open(URL,name,specs,replace)

setTimeout() 方法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 1000 毫秒 = 1 秒

//打开一个新窗口，3 秒后将该窗口关闭
var myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("<p>这是一个新窗口'</p>");
setTimeout(function(){ myWindow.close() }, 3000);

2.3. JSON

JSON 语法规则：

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

{"sites":[
    {"name":"baidu", "url":"www.baidu.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

在以上实例中，对象 “sites” 是一个数组，包含了三个对象,每个对象为站点的信息（网站名和网站地址）。

JSON.parse() 方法

JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

JSON.parse(text[, reviver])
//text: 必需， 一个有效的 JSON 字符串。
//reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON.parse() 方法</title>
</head>
<body>

<h2>从 JSON 字符串中创建一个对象</h2>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
	'{"name":"baidu","site":"http://www.baidu.com" },' +
	'{"name":"Google","site":"http://www.Google.com" },' +
	'{"name":"Taobao","site":"http://www.taobao.com" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
	obj.employees[2].name + " " + obj.employees[2].site;
</script>

</body>
</html>

JSON.stringify() 方法

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

JSON.stringify(value[, replacer[, space]])

//value: 必需， 要转换的 JavaScript 值（通常为对象或数组）
//replacer:可选。用于转换结果的函数或数组。
//space: 可选，文本添加缩进、空格和换行符，

2.4. Math对象

Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

在这里插入图片描述

var n = prompt("请输入一个数字:", "");
var answer = Math.sqrt(n);
alert("数字" + n + " 的平方根是: " + answer);

创建一个叫randomRange的函数，参数为myMin和myMax，
返回一个在myMin(包括等于myMin)和myMax(包括等于myMax)之间的随机数。

function randomRange(myMin,myMax){
return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;
}

2.5. 时间对象

setInterval

setInterval() 方法调用函数或以指定的间隔（以毫秒为单位）来计算表达式。
它将持续调用该函数，直到调用 clearInterval() 或窗口关闭。

Date 对象

日期对象用于处理日期和时间。
日期由年，月，日，时，分，秒和毫秒组成。
使用 new Date() , 将创建一个存储当前日期和时间的日期对象。

<html>
<head>
</head>
<body>
<script>
function printTime() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var secs = d.getSeconds();
  document.body.innerHTML = hours+":"+mins+":"+secs;
}
setInterval(printTime, 1000); // setInterval 第二个参数单位是 毫秒
</script>
</body>
</html>

三、DOM

要创建动画，我们需要以较小的时间间隔更改元素的属性。

我们可以通过使用 setInterval() 方法来实现这一点，它允许我们创建一个定时器并调用一个以定义的间隔（以毫秒为单位）反复更改属性的函数。

var t = setInterval(move, 500); 
// 定义开始的位置
var pos = 0; 
// 获取box元素
var box = document.getElementById("box");

function move() {
  pos += 1;
  box.style.left = pos+"px"; //px = pixels
}

通过 HTML DOM，JavaScript 可访问 HTML 文档的所有元素。

所有HTML元素都是对象。并且我们知道每个对象都有属性和方法。

document 对象具有三种方法最常用于选择HTML元素：

//通过 id 找元素
document.getElementById(id) 

//通过 类 找元素
document.getElementsByClassName(name) 

//通过 标签 找元素
document.getElementsByTagName(name)

在下面的示例中，getElementById 方法用于选择 id=“demo” 的元素并更改其内容：

var elem = document.getElementById("demo");
elem.innerHTML = "Hello World";

如果我们的HTML页面包含三个元素与 class=“demo”，以下代码将返回所有这些元素作为一个数组：

<div class="demo">
    <span class="demo">Hi I'm Loen!</span>
</div>
<p class="demo">This is a paragraph</p>
<script>
var arr =  document.getElementsByClassName("demo");
//访问第二个元素
arr[1].innerHTML = "Hi I am Peter";
</script>

getElementsByTagName 方法返回指定标签名称的所有元素,作为数组返回:

<p>hi</p>
<p>hello</p>
<p>hi</p>
<script>
var arr = document.getElementsByTagName("p");
for (var x = 0; x < arr.length; x++) {
  arr[x].innerHTML = "Hi there";
}
</script>

DOM中的每个元素都有一组属性和方法，它们提供有关它们在DOM中的关系的信息：

element.childNodes 返回一个元素的子节点的数组。
element.firstChild 返回元素的第一个子节点。
element.lastChild 返回元素的最后一个子节点。
element.hasChildNodes 如果元素有任何子节点，则返回 true，否则为 false 。
element.nextSibling 返回相同树级别的下一个节点。
element.previousSibling 返回在同一树级别的上一个节点。
element.parentNode 返回元素的父节点。

选择要使用的元素后，您可以更改其属性。

我们可以更改链接的href属性：

<a href="http://www.baidu.com">百度</a>
<script>
var el = document.getElementsByTagName("a");
el[0].href = "https://www.goole.com";
el[0].innerHTML = "goole";
</script>

HTML元素的样式也可以使用JavaScript进行更改。使用元素的 style 对象来访问所有样式属性

<div id="demo" style="width:200px">一些文本</div>
<script>
  var x = document.getElementById("demo");
  x.style.color = "6600FF";
  x.style.width = "100px";
</script>

添加和移除元素

使用以下方法创建新节点：

element.cloneNode() 克隆元素并返回结果节点。
document.createElement(element) 创建一个新的元素节点。
document.createTextNode(text) 创建一个新的文本节点。

这将创建一个新的文本节点，但它将不会出现在文档中，直到您使用以下方法之一将其附加到现有元素：
element.appendChild(newNode) 将一个新的子节点添加到元素作为最后一个子节点。
element.insertBefore(node1, node2) 在节点2之前插入node1作为子节点

<div id ="demo">一些文本</div>

<script>
  //创建一个新的段落
  var p = document.createElement("p");
  var node = document.createTextNode("一些新的文本");
  //添加文本到段落
  p.appendChild(node);

  var div = document.getElementById("demo");
  //将段落添加到div中
  div.appendChild(p);
</script>

要删除HTML元素，您必须选择元素的父项并使用 removeChild(node) 方法。

要替换HTML元素，使用 element.replaceChild(newNode,oldNode) 方法。

四、JS事件

4.1. 事件

JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。

所谓事件流，也可理解为事件的轨迹。一般地，将事件流分为三个阶段：捕获阶段，目标阶段和冒泡阶段。

编写事件触发执行的Javascript代码，例如用户单击HTML元素，移动鼠标或提交表单时。当目标元素发生事件时，执行处理函数。
常见的HTML事件包括：
在这里插入图片描述

当用户单击指定的按钮时，我们给元素绑定事件监听:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www</title>

</head>
<body>
<button onclick="show()" id = "demo">点击我</button>
<!--<p id="demo">点击我</p>-->
<p id="date"></p>
<script>
var x = document.getElementById("demo");
x.onclick = function show() {
  document.getElementById("date").innerHTML = new Date();
}

</script>
</body>
</html>

当用户进入或离开页面时，触发 onload 和 onunload 事件。在页面加载后执行操作时，这些操作非常有用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wht</title>

</head>
<body>
<h1>gighhkh</h1>
<script>
window.onload = function() {
   alert("整个页面已经加载完成");
}
</script>
</body>
</html>

事件监听

addEventListener() 方法将事件处理程序附加到元素，而不会覆盖现有的事件处理程序。

element.addEventListener(event, function [, useCapture]);

第一个参数是事件的类型（如“click”或“mouseover”）。
第二个参数是事件发生时要调用的函数。
第三个参数是一个布尔值，指定是否使用事件冒泡或事件捕获。此参数是可选的.

删除事件监听

我们可以使用 removeEventListener 删除事件监听：

element.removeEventListener("mouseover", myFunction);

4.2. 创建图像幻灯片

现在我们可以创建一个示例图像幻灯片项目。将使用“下一个”和“上一个”按钮更改图像。

4.3. 表格验证

表单元素具有可以处理以执行验证的 onsubmit 事件。

例如，我们创建一个带有两个输入框和一个按钮的窗体。两个字段中的文本应该相同，不能为空，才可通过验证。
如果其 onsubmit 事件返回 false，表单将不会被提交。

<html>

<head>
    <script>
        var images = [
            ".../IMG/1.jpg",
            ".../IMG/2.jpg",
            ".../IMG/3.jpg",
        ];
        var num = 0;

        function next() {
            var slider = document.getElementById("slider");
            slider.style.width = "300px";
            slider.style.height = "auto";
            num++;
            if (num >= images.length) {
                num = 0;
            }
            slider.src = images[num];
        }

        function prev() {
            var slider = document.getElementById("slider");
            slider.style.width = "300px";
            slider.style.height = "auto";
            num--;
            if (num < 0) {
                num = images.length - 1;
            }
            slider.src = images[num];
        }

        function validate() {
            var n1 = document.getElementById("num1");
            var n2 = document.getElementById("num2");
            if (n1.value != "" && n2.value != "") {
                if (n1.value == n2.value) {
                    return true;
                }
            }
            alert("输入两个值不相等,请重新输入!");
            return false;
        }
    </script>

</head>
<div>
    <button onclick="prev()"> 上一个 </button>
    <img id="slider" src=" .../IMG/1.jpg" />
    <button onclick="next()"> 下一个 </button>
</div>

<form onsubmit="return validate()" method="post">
    Number: <input type="text" name="num1" id="num1" />
    <br />
    Repeat: <input type="text" name="num2" id="num2" />
    <br />
    <input type="submit" value="Submit" />
</form>


<body>

</body>

</html>