JavaScript基础学习之二

目录

• JavaScript
  • HTML DOM事件
    • 事件触发1
    • 事件触发2
      • addEventListener()
      • 事件冒泡或事件捕获？
      • 事件委托
      • removeEventListener() 方法
    • 事件对象
  • 节点
    • 创建新的 HTML 元素 (节点)
      • appendChild()
      • insertBefore()
    • 移除已存在的元素
      • removeChild()
    • 替换 HTML 元素
      • replaceChild()
    • NodeList
      • HTMLCollection 与 NodeList 的区别
  • 对象
    • Number
      • 数字方法
    • String
      • 属性:
      • 方法:
      • 特殊字符
    • Date
    • 创建日期
    • 设置日期
    • Math
      • 算数值
      • 算数方法
  • BOM
    • window.screen 对象
    • window.location 对象
    • window.history 对象
    • 弹窗
      • 警告框
      • 确认框
      • 提示输入框
    • 定时事件
      • setInterval()
      • clearInterval()
      • setTimeout()
    • setInterval和setTimeout的区别
    • Cookie
      • 介绍
      • 创建Cookie
      • 读取Cookie
      • 修改Cookie
      • 删除Cookie
      • Cookie字符串
      • 实例

JavaScript

HTML DOM事件

事件触发1

onload 和 onunload：onload 和 onunload 事件会在用户进入或离开页面时被触发。

onchange ：onchange 事件常结合对输入字段的验证来使用。

<!--行内事件处理器-->
<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout ：onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown 和 onmouseup 和 onclick ：onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。(ondbclick双击)

btn.onclick = function(){
    // do something
}

onkeypress 和 onkeydown 、 onkeyup ：onkeypress是按下按键又松开，而onkeydown是按下，onkeyup是松开。

onfocus 和 onblur ：获得焦点和失去焦点事件。

onsubmit： 表单提交事件，可与preventDefault()连用，以验证表单填写是否符合规范。

form.onsubmit = function(e) {
  if (表单填写判断) {
    e.preventDefault(); //阻止表单提交
    para.textContent = '提示信息';
  }
}

给多个按钮添加事件：

const buttons = document.querySelectorAll('button');
for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = bgChange;
}

事件触发2

优点：

1. 便于维护和管理
2. 可以在不同环境下运行不同的事件处理器
3. 可以给同一个监听器注册多个处理器（对于前一种方法来说处理器会被覆盖）

addEventListener()

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意：不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

默认情况下，所有事件处理程序都在冒泡阶段进行注册。

当不想某事件向上冒泡时，可像如下：

x.onclick = function(e){
    e.stopPropagation();
    //do something
}

事件委托

冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实，如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。

一个很好的例子是一系列列表项，如果你想让每个列表项被点击时弹出一条信息，您可以将click单击事件监听器设置在父元素ul上，这样事件就会从列表项冒泡到其父元素ul上。

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄：

element.removeEventListener(event, function);

事件对象

在事件处理函数内部，我们可能会看到一个固定指定名称的参数，例如event，evt或简单的e。 这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。

function f(e){
    console.log(e);
}

操作引起触发的事件对象可使用e.target（参考JS·4x4调色板的例子）。

阻止表单提交使用e.preventDefault() 参考上面事件触发1部分。

阻止冒泡使用e.stopPropagation()，当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行(不会向上冒泡)。

节点

创建新的 HTML 元素 (节点)

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

appendChild()

添加新元素到尾部。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var para = document.createElement("p");  //创建<p>元素
//var node = document.createTextNode("这是一个新的段落。");  //行1，为 <p> 元素创建一个新的文本节点
//para.appendChild(node);  //行2，将文本节点添加到 <p> 元素中
para.textContent = '这是一个新的段落。'; //以上两行可以用这一行代替

var element = document.getElementById("div1");
element.appendChild(para);  //添加到已存在的元素中
</script>

insertBefore()

添加新元素e1在e2之前。

element.insertBefore(e1, e2);

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

移除已存在的元素

removeChild()

要移除一个元素，你需要知道该元素的父元素。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var parent = document.getElementById("div1");  //找到父元素
var child = document.getElementById("p1");  //找到要删除的元素
parent.removeChild(child);  //删除该元素
</script>

替换 HTML 元素

replaceChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var parent = document.getElementById("div1");  //找到父元素
var child = document.getElementById("p1");  //找到需替换的元素
parent.replaceChild(para, child);  //进行替换
</script>

NodeList

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

NodeList 对象类似 HTMLCollection 对象。

使用样例：修改节点列表中所有 <p> 元素的背景颜色

<script>
	var myNodelist = document.querySelectorAll("p");
	var i;
	for (i = 0; i < myNodelist.length; i++) {
    	myNodelist[i].style.backgroundColor = "red";
	}
</script>

HTMLCollection 与 NodeList 的区别

• NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

• NodeList 与 HTMLCollection 都有 length 属性。

• HTMLCollection 元素可以通过 name，id 或索引来获取，NodeList 只能通过索引来获取。

• 只有 NodeList 对象有包含属性节点和文本节点。

• pcoll=document.querySelectorAll("p")
  
  plist=document.getElementsByTagName("p")
  

  以上 pcoll 返回的就是固定的值。

  而获取 plist 后, 若 html 页面有变化且刚好添加或移除了 p 标签, 此时plist也会跟着变。

节点列表不是一个数组！

节点列表看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

对象

Number

所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。

在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是浮点型类型。JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字，它能表示最大值为 ±1.7976931348623157e+308，最小值为 ±5e-324。

无穷大（Infinity）

基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。

NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

除以0是无穷大，无穷大是一个数字

数字方法

方法	描述
Number.parseFloat()	将字符串转换成浮点数，和全局方法 parseFloat() 作用一致。
Number.parseInt()	将字符串转换成整型数字，和全局方法 parseInt() 作用一致。
Number.isFinite()	判断传递的参数是否为有限数字。
Number.isInteger()	判断传递的参数是否为整数。
Number.isNaN()	判断传递的参数是否为 isNaN()。
Number.isSafeInteger()	判断传递的参数是否为安全整数。

String

字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

属性:

• length
• prototype
• constructor

方法:

• charAt()

• charCodeAt()

• concat()

• fromCharCode()

• indexOf() -- 定位字符串中某一个指定的字符首次出现的位置，如果没找到对应的字符函数返回-1。

  例：

  var str="Hello world, welcome to the universe.";
  var n=str.indexOf("welcome");
  

• lastIndexOf() -- 在字符串末尾开始查找字符串出现的位置。

• match() -- 用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

• replace() -- 在字符串中用某些字符替换另一些字符。

  str="Please visit Microsoft!"
  var n=str.replace("Microsoft","Runoob");
  

• search()

• slice()

  当你知道字符串中的子字符串开始的位置，以及想要结束的字符时，slice()可以用来提取它。

  browserType.slice(0,3); //不包括下标3的字符
  browserType.slice(3); //从下标3开始之后的所有字符
  

• split() -- 字符串使用split()函数转为数组：

  <script>
  	txt="a,b,c,d,e"   // String
  	txt.split(",");   // 使用逗号分隔
  	txt.split(" ");   // 使用空格分隔
  	txt.split("|");   // 使用竖线分隔
  </script>
  

• substr()

• substring()

• toLowerCase() -- 所有转换成小写

• toUpperCase() -- 所有转换成大写

• valueOf()

特殊字符

Javascript 中可以使用反斜线（\）插入特殊符号，如：撇号,引号等其他特殊符号。

代码	输出
'	单引号
"	双引号
\	斜杆
\n	换行
\r	回车
\t	tab
\b	空格
\f	换页

Date

创建日期

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

有四种方式初始化日期:

<script>
	new Date();
    var today = new Date();

	new Date(value);
    var d1 = new Date("October 13, 1975 11:13:00");

	new Date(dateString);
    var d2 = new Date(79,5,24);

	new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
    var d3 = new Date(79,5,24,11,33,0);
</script>

上面的参数大多数都是可选的，在不指定的情况下，默认参数是0。

设置日期

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：

var myDate=new Date();
myDate.setFullYear(2010,0,14);

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

---

如何把日期格式化为指定格式？

<script>
	alert(new Date().format("yyyy年MM月dd日"));
	alert(new Date().format("MM/dd/yyyy"));
	alert(new Date().format("yyyyMMdd"));
    alert(new Date().format("yyyy-MM-dd hh:mm:ss"));
</script>

Math

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

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

你可以参考如下Javascript常量使用方法：

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

算数方法

除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。

下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。

document.write(Math.round(4.7));

上面的代码输出为：5

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：

document.write(Math.random());

上面的代码输出为：0.9114746491640092

var rand = (min,max) => Math.round(Math.random()*(max-min))+min;
//Max为最大值，Min为最小值

下面的例子使用了 Math 对象的 floor() 方法(取整)和 random() 来返回一个介于 0 和 11 之间的随机数：

document.write(Math.floor(Math.random()*11));

上面的代码输出为：9

BOM

window.screen 对象

包含有关用户屏幕的信息。

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度
• screen.width - 总宽度
• screen.height - 总高度
• screen.colorDepth - 色彩深度
• screen.pixelDepth - 色彩分辨率

<script>
	document.write("可用宽度: " + screen.availWidth); //打印屏幕宽度
    document.write("可用高度: " + screen.availHeight);  //打印屏幕高度
</script>

window.location 对象

用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

• location.hostname 返回 web 主机的域名

• location.pathname 返回当前页面的路径和文件名

• location.port 返回 web 主机的端口 （80 或 443）

• location.protocol 返回所使用的 web 协议（http: 或 https:）

• location.href 返回当前页面的 URL

• location.assign() 加载新的文档。加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的。

  <script>
  function newDoc(){
      window.location.assign("https://www.runoob.com");
  }
  </script>
  <body>
  <input type="button" value="加载新文档" onclick="newDoc()">
  </body>
  

window.history 对象

包含浏览器的历史。

• history.back() - 加载历史列表中的前一个 URL，与在浏览器点击后退按钮相同

• history.forward() - 加载历史列表中的下一个 URL，与在浏览器中点击向前按钮相同

• history.go(数字) - 这个方法来实现向前，后退的功能。

  <script>
  function a(){
      history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
  }
  function b(){
      history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
  }
  function a(){
      history.go(0);  // go() 里面的参数为0,表示刷新页面
  }
  </script>
  

  ---

弹窗

警告框

alert()，有确认按钮。

确认框

confirm，有确认和取消按钮。

提示输入框

prompt("sometext", "defaultValue")，有提示信息和输入框，返回值为输入值。

---

定时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

• setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
• setTimeout() - 在指定的毫秒数后执行指定代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

setInterval()

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法：window.setInterval("javascript function",milliseconds);

第一个参数是函数（function）；第二个参数间隔的毫秒数。

<script>
//显示当前时间
    var myVar=setInterval(myTimer(),1000);

	function myTimer()
	{
    	var d=new Date();
    	var t=d.toLocaleTimeString();
    	document.getElementById("demo").innerHTML=t;
	}
</script>

clearInterval()

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法：window.clearInterval(intervalVariable)

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量

setTimeout()

语法：myVar= window.setTimeout("javascript function", milliseconds);

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg。

第二个参数指示从当前起多少毫秒后执行第一个参数。

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

setInterval和setTimeout的区别

setTimeout和setInterval都属于JS中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环下去。

---

Cookie

介绍

Cookie 用于存储 web 页面的用户信息。

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储，如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

读取Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

修改Cookie

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

删除Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

Cookie字符串

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie，旧的 cookie 不会被覆盖。

实例

在以下实例中，我们将创建 cookie 来存储访问者名称。

首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

访问者下一次访问页面时，他会看到一个欢迎的消息。

在这个实例中我们会创建 3 个 JavaScript 函数:

1. 设置 cookie 值的函数
2. 获取 cookie 值的函数
3. 检测 cookie 值的函数

<script>
    //首先，我们创建一个函数用于存储访问者的名字：
/*
以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。

该函数设置了 cookie 名、cookie 值、cookie过期时间。
*/
    function setCookie(cname, cvalue, exdays){
        var d = new Date();
        d.setTime(d.getTime+(exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        documnet.cookie = cname + "=" + cvalue + ";" + expires;
    }

    //获取cookie的函数
    /*
cookie 名的参数为 cname。

创建一个文本变量用于检索指定 cookie :cname + "="。

使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。

循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。

如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。

如果没有找到 cookie, 返回 ""。
    */
    function getCookie(cname){
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++){
            var c = ca[i].trim();
            if(c.indexOf(name)==0){
                return c.substring(name.length, c.length);
            }
            return "";
        }
    }

    //最后，我们可以创建一个检测 cookie 是否创建的函数。
/*
如果设置了 cookie，将显示一个问候信息。

如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：
*/
    function checkCookie(){
        var username = getCookie("username");
        if(username != ""){
            alert("Welcome again " + username);
        }else{
            username = prompt("Please enter your name: ", "");
            if(username != "" && username != null){
                setCookie("username", username, 365);
            }
        }
    }
</script>

实话说cookie这部分我还没整明白，等整明白了我再把这块内容改改或者写过一篇：）