web前端-JavaScript下篇之基础应用

前言

这一篇主要涉及到JavaScript的一些基础应用，主要是各种对象，方法，属性的学习

javascript Browser BOM

Window 对象：

所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性，全局函数是 window 对象的方法。甚至（HTML DOM 的）document 对象也是 window 对象属性：

document.getElementById("header") == window.document.getElementById("header")

属性：

window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）

方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

window.screen对象：

window.screen 对象包含用户屏幕的信息
属性：

screen.width-宽度
screen.height-高度
screen.availWidth-可用宽度
screen.availHeight-可用高度
screen.colorDepth-色深
screen.pixelDepth-像素深度

window.location 对象

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面
属性：

location.href:返回当前页面的href（URL）
location.hostname：返回web主机的域名
location.pathname:返回当前页面的路径或文件名
location.protocol:返回当前使用的web协议（http/https）
location.port:返回当前页面的互联网主机端口的编号，大多数浏览器不会显示默认端口号（http 为 80，https 为 443）。
loaction.assign:加载新文档

window.history 对象

window.history 对象包含浏览器历史，但访问存在限制
（可不带window书写）
方法：

history.back():相当于点击后退按钮
history.forward():相当于点击前进按钮

window.navigator 对象

window.navigator 对象包含有关访问者的信息。
属性：

navigator.cookieEnabled:返回 true，如果 cookie 已启用
navigator.appName:返回浏览器的应用程序名称（"Netscape" 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称）
navigator.appCodeName:返回浏览器的应用程序代码名称（"Mozilla" 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称）
navigator.product:返回浏览器引擎的产品名称
navigator.appversion:返回浏览器版本信息
navigator.userAgent:返回由浏览器发送到服务器的用户代理报头（user-agent header）
navigator.paltform:返回浏览器使用的操作系统
navigator.language:返回浏览器使用的语言
navigator.onLine:返回true，表示浏览器在线
navigator.javaEnabled:返回true表示启用java

注：来自 navigator 对象的信息通常是误导性的，不应该用于检测浏览器版本，因为：

不同浏览器能够使用相同名称
导航数据可被浏览器拥有者更改
某些浏览器会错误标识自身以绕过站点测试
浏览器无法报告发布晚于浏览器的新操作系统	

弹出框

JavaScript有三种类型的弹出框：警告框，确认框，提示框

如果要确保信息传递给用户，通常会使用警告框。

//可以省去window
window.alert("sometext");

如果希望用户验证或接受某个东西，则通常使用“确认”框。

//可以省去window
window.confirm("sometext");

如果希望用户在进入页面前输入值，通常会使用提示框。当提示框弹出时，如果用户单击“确定”，该框返回输入值,点击“取消” NULL，如什么也不点击则无法进行操作

//可以不带 window 前缀
window.prompt("sometext","defaultTest");

//例
function myFunction() {
  var txt;
  var person = prompt("请输入您的名字：", "老王");
  if (person == null || person == "") {
    txt = "用户取消输入";
  } else {
    txt = "你好，" + person ;
  }
  document.getElementById("demo").innerHTML = txt;
}

如需在弹出框中显示折行，可以在反斜杠后面加一个字符 n：

alert("Hello\n world");

JavaScript Timing 事件

JavaScript Timing 时间便是所谓的定时事件
主要方法：

setTimegout(function,milliseconds)-在等待指定毫秒后执行函数,一次

setInterval(function，millisecond) -类似setTimeout（），但是会重复执行

clearTimeout()-停止执行setTimeout() 中规定的函数

//clearTimeout() 使用从 setTimeout() 返回的变量：
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

clearInterval() -停止 setInterval() 方法中指定的函数的执行

window.clearInterval(timerVariable)
//clearInterval() 方法使用从 setInterval() 返回的变量
myVar = setInterval(function, milliseconds);
clearInterval(myVar);

注：setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

JavaScript Cookies

Cookie 可以存储用户信息，方便会话连接。
当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。
Cookie 是为了解决“如何记住用户信息”而发明的：

当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。

Cookie 保存在名称值对中：

username = laowang

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

创建：

document.cookie = "username=laowang";
//添加有效日期
document.cookie = "username=laowang; expires=Sun, 10 March 2020 12:00:00 UTC";
//通过 path 参数可以告诉浏览器 cookie的路径。默认情况下，cookie 属于当前页。
document.cookie = "username=老王; expires=Sun, 10 March 2020 12:00:00 UTC; path=/";

读取：

var a = document.cookie;
//会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

更改：
类似创建，直接覆盖原cookie

删除：

//删除 cookie 时不必指定 cookie 值，直接把 expires 参数设置为过去的日期即可：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
//定义 cookie 路径以确保删除正确的 cookie。

Cookie 字符串
document.cookie 属性看起来像一个正常的文本字符串。但它不是。

即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。

如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

cookie1 = value; cookie2 = value;

显示所有 cookie 创建 cookie 1 创建 cookie 2 删除 cookie 1 删除 cookie 2
应用：

/**创建一个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.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
//创建一个函数返回指定 cookie 的值
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}
//创建检查 cookie 是否设置的函数
function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

常见HTML事件

onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onload	浏览器已经完成页面加载
onfocus	元素获得焦点
onkeydown	用户按下键盘按键
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开
onmouseover	用户把鼠标移动到 HTML 元素上
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmouseout	用户把鼠标移开 HTML 元素
onreset	重置按钮被点击
onresize	窗口或框架被重新调整大小
onsubmit	确认按钮被点击
onunload	用户退出页面
onchange	存在输入字段时