JS基本文法(2)

10015 ワード

JavaScript 関数の定義
JavaScript使用キーワード機能関数を定義します
関数は、宣言によって定義されてもよいし、表現としてもよい.

関数アップグレード(Hoisting)
以前の教程では「hoisting(昇格)」というものが分かりました.
アップグレード(Hoisting)はJavaScriptがデフォルトで現在のスコープを前に進める行為です.
変数に対する宣言と関数の宣言を昇格させます.
したがって、関数は宣言の前に呼び出すことができます.

myFunction(5);

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

表式定義関数を使用すると、昇格できません.
=========声明、声明=========================================================================== 初期化ではない

コール機能
関数式は「自動呼び出し」ができます.
自動的に式を呼び出します.
式の後に続く()と自動的に呼び出されます.
宣言の関数を自動で呼び出すことはできません.
括弧を追加することにより、関数式であることを説明します.
JavaScript 包みを閉じる
JavaScript変数は、ローカル変数またはグローバル変数とすることができます.
プライベート変数は、閉じられたパケットを使用することができます.

JavaScript prototype(原型対象)
すべてのJavaScriptオブジェクトは一つのプロトタイプから属性と方法を継承します.
既存のオブジェクトコンストラクタには新しい属性が追加できないことも知っています.

prototype継承
すべてのJavaScriptオブジェクトは一つのプロトタイプから属性と方法を継承します.

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()方法を使って当日の日付を取得しますか?
get FulYear()はgetFulYear()を使って年を取得します.
getTime()getTime()は1970年1月1日現在のミリ秒数に戻ります.
set FulYear()はどのようにsetFulYear()を使って具体的な日付を設定しますか?
toUTCString()はどのようにtoUTCString()を使用して当日の日付(UTC)を文字列に変換しますか?
getDay()は、数字だけでなく、getDay()と配列を使って曜日を表示する方法です.
Displa 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 Aray(配列) オブジェクト
二つの配列を結合する-concat()
3つの配列を結合する-concat()
配列の要素で文字列を構成します.ジョン()
配列の最後の要素-pop()を削除します.
配列の末尾に新しい要素を追加します.
配列内の要素の順序を反転させます.並べ替え→reverse()
配列の最初の要素-shift()を削除します.
1つの配列から元素を選択します.slice()
配列の並べ替え(アルファベット順の昇順)-sort()
デジタル並べ替え(数字順に昇順)-sort()
デジタル並べ替え(数字順に降順)-sort()
配列の2番目の位置に要素-splice()を追加します.
変換配列を文字列-toString()
配列の先頭に新しい要素-unshift()を追加します.

JavaScript Window-ブラウザオブジェクトモデル
ブラウザウィンドウのサイズを決定できる3つの方法があります.
Internet Explorer、Chrome、Firefox、Opera及びSafariについて:

window.inner Height-ブラウザウィンドウの内部高度(スクロールバーを含む)

window.inner Width-ブラウザウィンドウの内部幅(スクロールバーを含む)

Internet Explorer 8、7、6、5について:

document.documentElement.clientHeight

document.documentElement.client Width

または

Dcument.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.resized()-現在のウィンドウのサイズを調整する

JavaScript Window Navigator


<span style="color: #000000;">
txt </span>= "<p>     : " + navigator.appCodeName + "</p>"<span style="color: #000000;">;
txt</span>+= "<p>     : " + navigator.appName + "</p>"<span style="color: #000000;">;
txt</span>+= "<p>     : " + navigator.appVersion + "</p>"<span style="color: #000000;">;
txt</span>+= "<p>  Cookies: " + navigator.cookieEnabled + "</p>"<span style="color: #000000;">;
txt</span>+= "<p>    : " + navigator.platform + "</p>"<span style="color: #000000;">;
txt</span>+= "<p>    : " + navigator.userAgent + "</p>"<span style="color: #000000;">;
txt</span>+= "<p>      : " + navigator.systemLanguage + "</p>"<span style="color: #000000;">;
document.getElementById(</span>"example").innerHTML=<span style="color: #000000;">txt;
</span>

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で設定されています.
この関数は、クッキー名、クッキー値、クッキーの有効期限を設定します.

クッキー値を取得する関数
指定されたクッキーの値を返す関数を作成しました.

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

関数解析:
cookie名のパラメータはcnameです.
テキスト変数を作成して、指定されたクッキーを検索します.
Dcument.co okie文字列をセミコロンで分割し、分割した文字列配列をca(ca=document.co okie.split(')に割り当てます.
循環ca配列(i=0;i)
cookie(c.indexOf)が見つかったら、cookieの値(c.substring(name.length、c.length)を返します.
クッキーが見つからなかったら、「」を返します.

4.モジュール化