前戯

　　これまでのところ、我々はいくつかの簡単なJavaScriptの構文を学びました。しかし、これらの単純な構文、およびブラウザは、任意の相互作用を持っていませんでした。

　　それは、我々はいくつかの私たちはしばしば参照いくつかのインタラクティブなWeb作成することはできませんが、我々はBOMとDOMの知識を学ぶために継続する必要があります。

　　ダウンロードJavaScriptをECMAScriptの、DOM、BOMに分かれています。

　　BOM（ブラウザのオブジェクトモデルは）にはJavaScript対応ブラウザが可能ブラウザオブジェクトモデルを指し、「話。」

　　DOM（ドキュメントオブジェクトモデル）を使用すると、HTMLドキュメントのすべての要素にアクセスするためのドキュメントオブジェクトモデルを指します。

　　Windowオブジェクトは、ウィンドウオブジェクトが他のオブジェクトのほとんどの共通の祖先であるため、ウィンドウオブジェクトのメソッドとプロパティを呼び出すとき、あなたは、ウィンドウオブジェクトへの参照を省略することができ、トップターゲットクライアントのJavaScriptの一つです。たとえば、次のdocument.write（）：window.document.write（）は、と略記することができます。

GOOD

ウィンドウオブジェクト

　　あなたは、見つけるウィンドウオブジェクトに直接パッケージに名前を付け、それを見ていきます上記の例を参照してください。

　　すべてのブラウザでは、ウィンドウオブジェクトをサポートしています。これは、ブラウザのウィンドウを表します。

　　**ドキュメントがフレーム（フレームまたはiframeタグ）が含まれている場合、ブラウザは（知っている）HTML文書としてウィンドウオブジェクトを作成し、フレームごとに追加のウィンドウオブジェクトを作成します。*

　　**公共の標準のウィンドウオブジェクトに適用されますが、すべてのブラウザは（知っている）オブジェクトをサポートしていません。*

　　すべてのJavaScriptのグローバルオブジェクト、関数、変数は自動的にウィンドウオブジェクトのメンバーです。

　　グローバル変数はwindowオブジェクトのプロパティです。グローバル関数は、windowオブジェクトです。

　　そして、HTML DOMドキュメントウィンドウの話をすると、オブジェクトの属性の1つです。

　　いくつかの一般的に使用される方法:(ウィンドウこれらの入力方法コンソール内部の以下の特性やデバッガブラウザ、対応する効果を見ることができます）

ブラウザウィンドウの内部高さ - window.innerHeight
window.innerWidth - ブラウザウィンドウの幅の内側
window.open（） - 新しいウィンドウが開きます
window.close（） - （ライン上で見て、ページを開くには、window.openのみ（JSで閉じることができます））現在のウィンドウを閉じます

ウィンドウの子オブジェクト

navigatorオブジェクト（理解します）

　　　　ブラウザのオブジェクト、オブジェクトは、ブラウザ関連の情報を含む、ユーザによって使用されるブラウザによって決定することができます。

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

　　　　例を参照してください。

画面オブジェクト（理解します）

　　　　画面オブジェクトは、一般的に使用されていません。

　　　　一部のプロパティ：

screen.availWidth - 利用可能な画面幅
screen.availHeight - 利用可能な画面の高さ

履歴オブジェクト（理解します）

　　　　window.historyオブジェクトは、ブラウザの履歴が含まれています。

　　　　ユーザの現在のページの閲覧履歴が含まれていますが、我々は特定のアドレスを見ることができない閲覧履歴オブジェクトは、単に前方または後方のページを移動するために使用することができます。

history.forward()  // 前进一页，其实也是window的属性，window.history.forward()
history.back()  // 后退一页

ロケーション・オブジェクト

　　　　window.locationのオブジェクトは、現在のページのアドレス（URL）を取得するために使用され、ブラウザが新しいページにリダイレクトされます。

　　　　共通の属性とメソッド：

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面

　　私たちが覚えておく必要が上記の内容は次のとおりです。

　　　　1.windowオブジェクト

　　　　2.windowサブオブジェクト：それらのいくつかのプロパティとメソッドの場所

　　　　理解などの他の3

　　ここでは、より興味深いいくつかの有用な内容を学ぶために来ます。

ポップアップボックス

　　　　警告ボックス、チェックボックス、メッセージボックス：スリーは、JavaScriptのメッセージボックスに作成することができます。

　　アラートボックス

　　　　アラートボックスは、多くの場合、ユーザーはいくつかの情報を得ることができることを確実にするために使用されます。

　　　　警告ボックスが表示されたら、ユーザーは続行するために[OK]ボタンをクリックする必要があります。

　　　　構文：

alert("你看到了吗？");

　　確認ボックス（理解します）

　　　　特定の情報を確認したり、受信するユーザーのためのボックスをチェックします。

　　　　確認ボックスが表示されたら、ユーザーは続行するために、ボタンをOK]または[キャンセル]をクリックする必要があります。

　　　　ユーザーが確認するためにクリックした場合、戻り値はtrueです。ユーザーが[キャンセル]をクリックした場合、戻り値はfalseです。

　　　　構文：

confirm("你确定吗？")

　　　　私たちは、この値に基づいて、対応するWebサイトにジャンプする場所を使用しているもの、を決定するために、真と偽に戻ることができます。

　　プロンプトボックス（理解します）

　　　　プロンプトボックスは、多くの場合、ページに入る前に入力する値をユーザーに促すために使用されています。

　　　　プロンプトボックスが表示されたら、ユーザーは、操作を継続するには、[OK]をクリックするか、[キャンセル]ボタンを、値を入力する必要があります。

　　　　ユーザーが確認するためにクリックした場合、戻り値は入力されます。[キャンセル]をクリックする場合は、デフォルト値を返すことは二番目の引数であるデフォルト値がない場合、nullを返します。

　　　　構文：

prompt("请在下方输入","你的答案")

　　　　それは我々が背後にどのように動作するかをユーザが入力することによって決定することができます

　　（すべてではないとの）警告ボックスに加えて、他の人はほとんど使用されていない、より多くの醜い、ラインを見て

タイミング関連（より重要）

　　　　JavaScriptを使用することにより、我々は時間の一定の間隔で後に関数が呼び出された直後にコードを実行し、しないようにすることができます。私たちは、時限イベントを呼び出します。

　　　　何かをする時間が経過した後のsetTimeout（）

　　　　　　構文：

var t=setTimeout("JS语句",毫秒)  第一个参数js语句多数是写一个函数，不然一般的js语句到这里就直接执行了，先用函数封装一下，返回值t其实就是一个id值（浏览器给你自动分配的）

　　　　　　setTimeout（）メソッドは、値を返します。上記のステートメントでは、値がTで名前の変数に格納されています。あなたがこののsetTimeout（）をキャンセルしたい場合は、それを指定するには、この変数名を使用することができます。

　　　　　　最初のパラメータのsetTimeout（）は、JavaScriptステートメントを含む文字列です。この文は、ALERTMSG（として「警告（『5秒！』）」、または関数の呼び出し、）」ようなものであってもよいです。

　　　　　　第2のパラメータは、何ミリ秒（1000ミリ秒が1に等しい）から現在の実装からパラメータを示しています。

　　　　clearTimeout（）

　　　　　　構文：

clearTimeout(setTimeout_variable)

　　　　例えば：

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

　　　　何かをする時間から時間までのsetInterval（）

　　　　　　呼出関数または演算式に（ミリ秒単位で）指定された期間に従ってたsetInterval（）メソッド。

　　　　　　setInterval（）メソッドは、（）てclearIntervalまで、関数を呼び出すしていきますと呼ばれる、またはウィンドウが閉じられています。パラメータ値がてclearInterval（）メソッドを返すようにしたsetInterval（）IDが使用されます。

　　　　　　構文：

setInterval("JS语句",时间间隔)

　　　　　　返却値

　　　　　　コードの値を定期的に実行されるキャンセルするように（）window.clearIntervalに渡すことができます。

　　　　clearInterval（）

　　　　　　clearInterval（）メソッドは、タイムアウトのsetInterval（）のセットを取り消します。

　　　　　　clearIntervalパラメータは、（）メソッドのsetInterval（）リターンのID値でなければなりません。

　　　　　　構文：

clearInterval(setinterval返回的ID值)

　　　　　　例えば：

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

JUDGMENT

　　DOM（ドキュメントオブジェクトモデル）は、文書や抽象概念の内容のためのメソッドのセットです。

　　ページがロードされると、ブラウザは、ドキュメントオブジェクトモデル（ドキュメントオブジェクトモデル）のページを作成します。

　　HTML DOMモデルは、オブジェクトツリーとして構成されています。

HTML DOMツリー

　　DOM標準は、HTML文書の各構成要素はノード（ノード）であることを指定します。

Documentノード（ドキュメントオブジェクト）：文書全体を代表して
要素ノード（要素オブジェクトは）：要素（タグ）を表します
ノードのテキスト（テキストオブジェクト）：テキスト内の代表的要素（タグ）
ノード属性（属性オブジェクト）：属性要素（タグ）を表す特性を有します
コメントはコメントノード（コメントオブジェクト）です

　　JavaScriptはDOMを通じてダイナミックHTMLを作成することができます。

JavaScriptは、ページ上のすべてのHTML要素を変更することができます
JavaScriptは、すべてのHTMLページのプロパティを変更することができます
JavaScriptは、すべてのCSSスタイルのページを変更することができます
JavaScriptは、すべてのイベントページ用（マウスクリック、マウスの移動イベント、など）を反応させることができます

（あなたがそれを見つける必要があるラベルを操作したい、のような、およびCSS）ラベルを探します

ダイレクト検索

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName     根据标签名获取标签合集

　　　　例：　

間接検索

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

　　　コンテンツが配列であるかどうかを確認してください、あなたはインデックスで対応するラベルオブジェクトを取ることができます

　　私たちはめったに使用しないので、ラベルは上記の言ったこれらのメソッドを検索し、そのためのjQueryを学ぶ、これらの演習のすべてがシンプルに見える上に、ライン上の理解があった、検索機能ラベルを使用することは非常に簡単で、より包括的ながあるでしょう。

ノードの操作

ノードを作成します（つまり、ラベルを作成します）

　　　　　　構文：

　　　　　　createElement（名札）

　　　　　　例：

var divEle = document.createElement("div");

ノードの追加

　　　　　　構文：

　　　　　　子ノードを追加（最後として、子ノード）

　　　　　　somenode.appendChild（newnode）。

　　　　　　追加されたノードは、ノードの前に置か。

　　　　　　somenode.insertBefore（newnode、ノード）。

　　　　　　例：

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

ノードを削除します。

　　　　　　構文：

　　　　　　親要素を呼び出すことによって、あなたは、削除方法を削除したい要素を取得します。

　　　　　　somenode.removeChild（削除するノード）

交換用ノード

　　　　　　構文：

　　　　　　somenode.replaceChild（newnode、ノード）。

　　　　　　somenodeは、サブタブ内の親タグを交換する見つけ、その後、サブタグを置き換えるために新しいラベルを使用し、その後、親タブです

属性ノード

　　　　　　テキストノードの値を取得します：

var divEle = document.getElementById("d1")
divEle.innerText  #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML  #获取的是该标签内的所有内容，包括文本和标签

　　　　　　ノードのテキスト値：

var divEle = document.getElementById("d1")
divEle.innerText="1"  
divEle.innerHTML="<p>2</p>" #能识别成一个p标签

　　　　　　属性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."

操作の値を取得します。

　　　　　　構文：

　　　　　　elementNode.value

　　　　　　それは次のタグ、ユーザーの入力に適用されるか、ラベルの種類を選択します。

　　　　　　1. INPUT

　　　　　　2.select

　　　　　　3.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

　　　　　　　たとえば：次ページの3つのタブがあります。

クラスアクション

className  获取所有样式类名(字符串)首先获取标签对象
标签对象.classList.remove(cls)  删除指定类
classList.add(cls)  添加类classList.contains(cls)  存在返回true，否则返回falseclassList.toggle(cls)  存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

　　　　　　例えば：私は内側に行くためにクラスを追加するクラスをC2にしたいです

CSS操作を指定します。

obj.style.backgroundColor="red"

　　　　　　JS CSS財産法の操作：

　　　　　　CSSプロパティ1.はない一般的なスタイルの水平線で直接使用する。属性名。以下のような：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

　　　　　　水平ラインに含まれる2 CSS特性、最初の水平線は後に大文字を作っできます。以下のような：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

　　私たちは、上記のスタイルを変更し、これらの方法は、ああ、ユーザーの特定の操作では使用しないでください、あなたがアイテムをユーザーがクリックされた場合、それはユーザーに、色の変化などになるか、またはいくつかの素晴らしい効果を示すために、効果はああ、それは我々がやるべき事を組み合わせることを学ばなければならない次のイベント、+は上記のスタイルを変更することによって達成されるイベントとなります。

イベント

　　HTML 4.0の新機能の1つは、HTMLブラウザのイベントは、ユーザーがHTML要素をクリックしたときにJavaScriptを開始するように、行動（アクション）をトリガする能力です。以下は、イベントアクションを定義するには、HTMLタグに挿入できる属性のリストです。

一般的なイベント（~~戻って他の、それのonchange、onclickの、のonblur、ONFOCUSについて話すこと）

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

結合方法：

　　　　:(頻繁に使用しない方法、及び第二のアプローチと大部分）

<div id="d1" onclick="changeColor(this);">点我</div>  
<script>  
  function changeColor(ths) {  
    ths.style.backgroundColor="green";
  }
</script>

　　　　注意：

　　　　　　これは、イベントをトリガし、現在の要素である引数です。

　　　　　　パラメータとしてTHS中の関数定義。

　　　　第二の方法：

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {　　 //console.log(this)
    this.innerText="呵呵"; #哪个标签触发的这个事件，this就指向谁
  }
</script>

　　　　問題への注意：

　　　　　　別の解決策は、bodyタグの下にスクリプトタグを記述することです

　　　　例えば結合事象タイマー、入力時間動的表示フレームれます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>定时器</title>
  <script>  //当js代码中有找标签的操作的时候，别忘了页面加载的时候的顺序，以防出现找不到标签的情况出现，我们可以将这个script标签放到body标签最下面，或者用window.onload，这里我没有放，你们练习的时候放到下面去
    var intervalId; //用来保存定时器对象，因为开始定时器是一个函数，结束定时器是一个函数，两个函数都是操作的一个定时器，让他们互相能够操作这个定时器，就需要一个全局变量来接受一下这个对象
　　　　　　//把当前事件放到id为i1的input标签里面
    function f() {
      var timeStr = (new Date()).toLocaleString(); // 1.拿到当前事件
      var inputEle = document.getElementById("i1");// 2.获取input标签对象
      inputEle.value = timeStr;  //3.将事件赋值给input标签的value属性
    }
　　//开始定时任务
    function start() {
      f();
      if (intervalId === undefined) { //如果不加这个判断条件，你每次点击开始按钮，就创建一个定时器，每点一次就创建一个定时器，点的次数多了就会在页面上生成好多个定时器，并且点击停止按钮的时候，只能停止最后一个定时器，这样不好，也不对，所以加一个判断
        intervalId = setInterval(f, 1000);
      }
    }    //结束定时任务
    function end() {
      clearInterval(intervalId); //　清除对应的那个定时器
      intervalId = undefined;
    }

  </script>
</head>
<body>

<input type="text" id="i1">
<input type="button" value="开始" id="start" onclick="start();">
<input type="button" value="结束" id="end" onclick="end();">
</body>
</html>

　　　　イベントの例：

　　　　　　検索ボックスの例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){  //如果在标签中写的blur()等方法，没有传入this参数，那么我们就需要自己来获取一下这个标签，例如下面的getElementById('d1')
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="请输入关键字"){
        inputEle.value="";　　　　 //inputEle.setAttribute('value','')
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="请输入关键字";
    }
}
</script>
</body>
</html>

　　　　　　[リンケージ]を選択：選択州、自動的例えば、すべての都市が一覧表示されます：河北省の選択は、河北省のすべての都市を表示します

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</title>
</head>
<body>
<select id="province">
  <option>请选择省:</option>
</select>

<select id="city">
  <option>请选择市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");
  //页面一刷新就将所有的省份都添加到select标签中
  for (var i in data) {
    var optionP = document.createElement("option"); //创建option标签
    optionP.innerHTML = i; //将省份的数据添加到option标签中
    p.appendChild(optionP);//将option标签添加到select标签中
  }  //只要select中选择的值发生变化的时候，就可以触发一个onchange事件，那么我们就可以通过这个事件来完成select标签联动
  p.onchange = function () {    //1.获取省的值
    var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是当前选择的option标签的索引位置，this.options是获取所有的option标签，通过索引拿到当前选择的option标签对象，然后.innerHTML获取对象中的内容，也就是省份
    //还可以这样获取省：var pro = this.value;    var citys = data[pro]; //2. 通过上面获得的省份去data里面取出该省对应的所有的市
    // 3. 清空option
    c.innerHTML = ""; //清空显示市的那个select标签里面的内容
　　    //4.循环所有的市，然后添加到显示市的那个select标签中
    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

　　window.onload

　　　　我々はページの要素にイベントをバインドすると、文書がロードされるまで、待つ必要があります。我々は、存在しないイベントの結合要素を与えることはできませんので。

　　　　window.onloadイベント火災ドキュメントのロード処理が終了。この時点では、文書内のすべてのオブジェクトはDOMに位置しており、すべての画像、スクリプト、リンク、およびサブフレームがロードを完了しました。

　　　　注：.onload（）関数は、現象を覆うように存在します。

04. BOMおよびDOMのフロントエンド

前戯