JavaScript 函数定义

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

函数提升（Hoisting）

在之前的教程中我们已经了解了 "hoisting(提升)"。

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升（Hoisting）应用在变量的声明与函数的声明。

因此，函数可以在声明之前调用：

myFunction(5);

function myFunction(y) {
    return y * y;
}

使用表达式定义函数时无法提升。

===============声明、声明、声明================ 不是初始化

自调用函数

函数表达式可以 "自调用"。

自调用表达式会自动调用。

如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

JavaScript 闭包

JavaScript 变量可以是局部变量或全局变量。

私有变量可以用到闭包。

JavaScript prototype（原型对象）

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

我们也知道在一个已存在的对象构造器中是不能添加新的属性的：

prototype 继承

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：

Date 对象从 Date.prototype 继承。
Array 对象从 Array.prototype 继承。
Person 对象从 Person.prototype 继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";

==================================

给已有的对象增加属性或者方法

格式：构造函数名.prototype.新属性或者新方法

==================================

JavaScript Date（日期）对象

如何使用 Date() 方法获得当日的日期。

getFullYear()
使用 getFullYear() 获取年份。

getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

setFullYear()
如何使用 setFullYear() 设置具体的日期。

toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

Display a clock
如何在网页上显示一个钟表。

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"));

JavaScript Array（数组）对象

将一个数组中的元素的顺序反转排序 - reverse()

删除数组的第一个元素 - shift()

从一个数组中选择元素 - slice()

数组排序（按字母顺序升序）- sort()

数字排序（按数字顺序升序）- sort()

数字排序（按数字顺序降序）- sort()

在数组的第2位置添加一个元素 - splice()

转换数组到字符串 -toString()

在数组的开头添加新元素 - unshift()

JavaScript Window - 浏览器对象模型

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

其他 Window 方法

一些其他方法：

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

JavaScript Window Navigator

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

JavaScript 计时事件

setInterval() 方法

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

如何停止执行?

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

setTimeout() 方法

window.clearTimeout() 方法可以不使用window 前缀。

JavaScript Cookie

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

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

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

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

使用 JavaScript 创建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=/";

使用 JavaScript 读取 Cookie

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

var x = document.cookie;

使用 JavaScript 删除 Cookie

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

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

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

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

函数解析：

以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。

该函数设置了 cookie 名、cookie 值、cookie过期时间。

获取 cookie 值的函数

我们创建一个函数用户返回指定 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 名的参数为 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, 返回 ""。

JS基本语法(2)

JavaScript 函数定义

函数提升（Hoisting）

自调用函数

JavaScript 闭包

JavaScript prototype（原型对象）

prototype 继承

JavaScript Date（日期）对象

JavaScript Array（数组）对象

JavaScript Window - 浏览器对象模型

其他 Window 方法

JavaScript Window Navigator

JavaScript 计时事件

setInterval() 方法

如何停止执行?

setTimeout() 方法

JavaScript Cookie

使用 JavaScript 创建Cookie

使用 JavaScript 读取 Cookie

使用 JavaScript 删除 Cookie

获取 cookie 值的函数

猜你喜欢

JS基本语法(2)

JavaScript 函数定义

函数提升（Hoisting）

自调用函数

JavaScript 闭包

JavaScript prototype（原型对象）

prototype 继承

JavaScript Date（日期） 对象

JavaScript Array（数组） 对象

JavaScript Window - 浏览器对象模型

其他 Window 方法

JavaScript Window Navigator

JavaScript 计时事件

setInterval() 方法

如何停止执行?

setTimeout() 方法

JavaScript Cookie

使用 JavaScript 创建Cookie

使用 JavaScript 读取 Cookie

使用 JavaScript 删除 Cookie

获取 cookie 值的函数

猜你喜欢

JavaScript Date（日期）对象

JavaScript Array（数组）对象