JavaScript の使用状況の共有

巴扎黑
巴扎黑オリジナル
2017-07-18 15:51:25950ブラウズ

1 概要

1. JavaScript とは何ですか?

オブジェクトベースのイベント駆動型の解釈型スクリプト言語です。

2. JavaScript 構文機能

  • は、HTML とは異なり、大文字と小文字を区別します。

  • 最後のセミコロンはオプションです。

  • 変数は弱い型指定です。変数は定義時に一律に var であり、型は割り当て時に決定されます。

3. UI スレッド

ブラウザーには、UI スレッドと呼ばれるページ表示用のスレッドがあり、サーバーに送信した後、UI スレッドはページをクリアし、読み込みサーバーからのフィードバックを待ちます。 待機時間が長すぎると、ページが空白で表示されます。

4.this

は主にメソッドで使用され、現在のオブジェクト、つまりメソッドの直接の呼び出し元を表します。

II データ型

1. JavaScript データ型

文字列、数値、数学、配列、ブール値、日付、オブジェクト、正規表現、null。

2. 変数の定義

  • グローバル変数: 関数の外で宣言された変数はグローバル変数であり、ページ全体で有効です。未宣言の変数に値を代入すると、グローバル変数に変換されます。

  • ローカル変数: 関数内で宣言された変数はローカル変数であり、関数内でのみ有効です。

  • this: 関数内で変数を宣言するときにこの参照を使用すると、関数の外部のオブジェクトを通じて変数を参照できます。

3.String

一般的なメソッド:

  • length: 文字列の長さを取得します。

  • ==: JS で 2 つの文字列が等しいかどうかを比較するには、「==」を使用します。

  • indexOf(subStr): 指定された文字が最初に出現するインデックス値。

  • lastIndexOf(subStr): 文字が最後に出現するインデックス値を指定します。

  • substr(begin[len]): 指定された位置から指定された長さの文字を取得します。

  • substring(begin[end]): 指定されたインデックス範囲内の文字を取得します。

  • replace(regExp,substr): 形式を満たす文字を指定された文字に置き換えます。

  • concat(str01...): 複数の文字列を連結し、新しい文字列を返します。

  • split(delim[limit]): 指定された区切り文字を使用して文字を分割し、分割結果を配列の形式で返します。 Limit は分割の数です (オプション)。

4.Number

  • toFixed(n): n 個の小数点を保持します。

5.Math

  • random(): 0 ~ 1 の数値をランダムに返します。

  • round(x): ラウンド。

  • max(x...): 最大値を取得します。

  • min(x...): 最小値を取得します。

6.Date

  • getTime(): 1970-01-01 から現在までのミリ秒数を取得します。

  • getFull Year(): 現時点での 4 桁の年を取得します。

  • getMonth(): 現時点での月を取得します。

  • getDate(): 月の日付を取得します。

  • getDay(): 0 ~ 6 の範囲で曜日を取得します。

  • getHours(): 現時点での時間数を取得します。

  • getMinutes(): 現時点での分数を取得します。

  • getSeconds(): 現時点での秒数を取得します。

7.RegExp

作成者:

var reg=/xxxx/;
var ret=new RegExp("");

常用方法:
  test(str):判断字符串是否满足指定的格式。

8.Array

⑴数据类型

   不同与java语言,JS中的数组在创建时不需要指定长度与数据类型,可以存储多种类型数据。

⑵创建(3种方式)

var arr01=[数组中的值];//创建时赋值
var arr01=new Array(数组中的值);//创建时赋值
//先声明,后赋值
var arr01=new Array();
arr01[0]=1;
arr01[1]=2;
var arr01=new Array(6);//创建时指定数组长度

⑶常用操作

  • arr[0]:获取指定索引位置的元素,也可以为指定索引位置赋值。

  • arr.length:获取数组长度。

  • push(data):向数组尾部添加元素并返回操作完成后的数组长度。

  • unshift(data):向数组头部添加一个元素并返回数组长度。

  • pop():删除数组的最后一个元素并返回删除的元素。

  • shift():删除并返回数组的第一个元素。

  • for(index in arr):遍历数组,arr[index]获取数组中的元素。

  • sort(function(a,b){return a-b;}):如果数组中存储的是字符,不需要指定函数,按照字母升序排序;如果数组中存储的是数字,需要设定排序函数,a-b升序排列,b-a降序排列。

  • reverse():反转排序。

  • join(connector):使用指定的连接符将数组连接成字符串,未指定连接符时默认采用","作为连接符。

  • toString():等效于join(),将数组转化为一个由","连接的字符串。

  • slice(begin,end):获取指定索引范围的元素,包含begin,不包含end。

  • splice(begin,howmany,newValue...):从指定索引位置(包含该位置)开始删除howwmany个元素,插入新的元素。

  • concat(anotherArr...):将参数数组的元素依次追加到该数组中并返回一个新的数组,原数组不变。

9.Object

⑴用于自定义对象,对象的创建方式:

//第一种方式,对象的声明与实例化一体
var obj={name:"张三",age:20,myFunction:function(){}};
//第二种方式,将函数当做构造方法
function person(name,age){
this.name=name;
this.age=age;
this.myfunction=function(){
alert(this.name);
     }
}
var tom=new function("tom",20);
//第三种方式
person=function(){
this.name=name;
this.age=age;
this.myfunction:function(){
      }
}
var tom=new function("tom",20);

⑵fn01: fn02 の意味

fn02 を fn01 に代入すると、fn01 は fn02 と全く同じ内容になります。

3 つの属性

ユーザーはオブジェクトの特性を記述し、オブジェクトをインスタンス化します。
共通属性:

  • href="#": ページの先頭にジャンプします。

  • title は要素のテキストとして直接表示されます。要素にテキストを直接表示できない場合は、マウスをその上に置くとプロンプト メッセージとして表示されます。

4つのウィンドウ

ブラウザウィンドウオブジェクトはグローバルオブジェクトであり、すべてのオブジェクトの最上位オブジェクトです。プロパティまたは関数を参照する場合は省略できます。

1. 共通属性

  • ドキュメント: ウィンドウ内のすべての HTML 要素を表すオブジェクト。

  • Closed: ブール型。現在のウィンドウが閉じられているかどうかを判断するために使用されます。

  • location: 現在のページの URL を取得します。現在のページで開かれている、HTML、サーブレット、またはその他のサーバー リソースである指定されたリソースにアクセスします。 location=url は location.href=url と同じ機能を持ちます。

  • History: 現在のウィンドウの閲覧履歴を表すオブジェクト。閲覧記録を形成することを前提として、前後のページにジャンプすることができ、history.go(-1)で

    前のページにジャンプし、history.go(1)で次のページにジャンプします。

  • parent: 現在のウィンドウを含む親ウィンドウを示します。

  • オープナー: 現在のウィンドウの親ウィンドウを開くことを意味し、親子ウィンドウの通信でよく使用されます。

2. よく使用されるメソッド:

  • アラート(コンテンツ): 警告ダイアログ ボックスをポップアップします。

  • verify(content): 確認ダイアログボックスをポップアップ表示し、確認結果 (true または false) を返します。

  • プロンプト: ユーザー入力と入力結果の返しに使用されるプロンプト ダイアログ ボックス。

  • setTimeout(): スケジュールされた実行。

  • setInterval(): 定期的に実行されます。

  • open(): 指定された URL を新しいウィンドウに読み込みます。

  • close(): 現在のウィンドウを閉じます。

  • parseInt(): 文字を int 数値に変換します。

  • eval: 通常の文字列を JS コードに解析します。

  • typeof: 返されるデータのタイプ。

  • isNaN: データが数値かどうかを判断します。

  • 5つのDOM

ドキュメントオブジェクトモデルとは、ドキュメントを階層構造に配置されたオブジェクトとして捉える技術です。

1. 要素

ドキュメント内のラベルノード。

子ノード: 属性ノードを除く、要素ノード、テキストノード、コメントノード。


2. オブジェクトの作成

document.createElement(tagName): タグ名に基づいて要素を作成します。パラメータとしてのタグには <> がありません。

3. オブジェクトを取得します

document.all.id: ID に基づいてオブジェクトを取得します。

  • formId.tagId: ID を通じてフォームの下の要素を取得するか、「formName.tagName」を通じてフォームの下の要素を取得できます。

  • document.getElementById(id): ID に基づいてオブジェクトを取得します。

  • document.getElementsByName(name): 名前に基づいてオブジェクトを取得します。同じ名前のオブジェクトが複数存在する可能性があるため、取得されるオブジェクトは複数になります。

  •   document.getElementsByTagName(tagName):通过标签名称获取对象。

4.属性

  •  document.location:同document.location.href作用相同,用于访问指定资源,该资源可以是HTML,也可以是Servlet以及其他服务器资源,不能获取当前页面的URL。

5.常用方法

  •  document.write(content):向页面输出。

六 函数

 在JS中调用函数不必像在java中那样必须为每一个形参赋值,只需为需要的形参赋值即可,其他形参位可以空着。每一个函数都有其对应的作用范围,不同作用范围的函数定义在不同的节点上。

  1.常用函数

   javascript:void(0):保留超链接样式,只执行js代码,不进行页面跳转。

  2.动态添加函数

动态地向元素添加函数有两种方式:

⑴使用JS:

使用JS获取对象以后,通过对象调用函数不包含括号),将自定义的函数function赋给该函数

obj.action=function(){};

⑵使用JQuery:

$(selector).action(function(){});

两种方式不能混用,即不能这样使用:$(selector).action=function(){}。

3.插入

java输出代码块与EL表达式都可以插入JavaScript代码中,插入时将其视作字符串处理,包裹在单引号或者双引号中,如:

alert("<%=name%>");
alert("${name}");

7つのイベント

アクションによって引き起こされる動作をイベントと呼びます。イベントには複数の関数を追加でき、複数の関数は追加された順序で順番に実行されます。異なる要素は異なるイベントに対応します。

1. よく使用されるイベント:

  • onclick: マウスがクリックされたときにトリガーされます。

  • onchange: ドロップダウン リスト ボックスのオプションが変更されるとトリガーされます。

  • onblur: フォーカスが失われたときにトリガーされます。

  • onfocus: フォーカスが取得されたときにトリガーされます。

  • onmouseover: マウスが要素上に移動するとトリガーされます。

  • onmousemove: マウスが要素上を移動するとトリガーされます。

  • onmouseout: マウスが要素から離れるとトリガーされます。

  • onselect: テキストフィールドが選択されるとトリガーされます。

8つのフォーム送信

1. ボタン送信

送信ボタンをクリックしてフォームを送信します。

2. コードの送信

document.forms["formName"].submit() コードを実行し、コードを通じてフォームを送信します。

9つの親子ウィンドウ通信

親子ウィンドウ通信とは、ウィンドウがそのウィンドウを開くウィンドウに情報を送信すること、つまり、子ウィンドウが親ウィンドウに情報を送信し、親ウィンドウがそのウィンドウを開くことを指します。情報を子ウィンドウに送信します

情報はQueryString経由で実行できます。

子ウィンドウが親ウィンドウに情報を伝えるための鍵は、子ウィンドウで親ウィンドウオブジェクトを取得し、window.openerで親ウィンドウオブジェクトを取得し、親

ウィンドウと同様に動作することです。

テーブル

1.テーブルオブジェクトに対する一般的な操作

  • table.rows: テーブル内のすべての行を含む配列オブジェクト。table.rows.length は長さ、つまり行の数。

  • insertRow(index): 指定された位置に行を挿入します。位置を指定せず、最後に挿入します。

  • deleteRow(index): 指定された位置の行を削除します。位置が指定されていない場合は、最後の行を削除します。

2. tr オブジェクトに対する一般的な操作

  • rowIndex: インデックス位置、つまり行番号を取得します。

  • insertCell(index): 指定された位置に列を挿入します。指定されていない場合は、最後に挿入します。

  • deleteCell(index): 指定された位置の列を削除します。位置が指定されていない場合は、最後の列を削除します。

以上がJavaScript の使用状況の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。