JavaScriptクイックスタートマニュアル
まず、JavaScriptについて理解します
1.はじめに
JavaScriptは、ブラウザーで実行されるスクリプト言語で、jsと省略されます。手動でコンパイルする必要はなく、通常のドキュメントの形式で保存されます。サフィックスは「.js」です。ブラウザーにコマンドを発行することにより、動的なページ機能とユーザー操作を実現できます
2.構成
JavaScriptプログラムは、ステートメント、ステートメントブロック(複数行のステートメントは「{}」で囲まれ、関数はステートメントシーケンスを一緒に実行させるためのものです)、関数、オブジェクト、メソッド、属性などで構成され、3つの基本プログラム(シーケンス、選択、ループ)によって制御されます。構造。
3、注意点
";"各ステートメントの最後に追加することもしない
こともできます。変数は、変数を宣言するときに割り当てることも、割り当てないこともできます。
文字列は一重引用符または二重引用符を使用できます
次に、JavaScriptファイルを導入する方法
1.必要な場所に直接書く
イベントは、イベントハンドルを直接バインドすることで実装されます(イベントハンドルは、イベントハンドルが「onclick」である「クリック」など、イベントの前に直接「on」を追加することです)。この場合、マウスクリックイベントは、イベントハンドル「onclick」によってトリガーされます。
<input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScript代码">
2.スクリプトブロックメソッド(CSSインラインスタイルシートと同じ)
スクリプトブロックで公開され、ページが開かれたときに実行され、
トップダウンの順序で実行されます(このコードはイベントなしで実行されます)。
<script type="text/javascript">
document.write("第一个JavaScript实例")
alert("第一个JavaScript实例")
</script>
3.独立(同じCSS外部スタイルシート)を導入する
jsスクリプトファイルを必要な場所にマッピングします。
外部独立jsファイルが導入されると、jsファイル内のコードは上から下へと1行ずつ実行されます。
<script type="text/javascript" src="../JavaScript文件/demo.js">
document.write("src是可选属性,如果加上src属性,则script中的代码会被忽视——这行代码不会执行")
</script>
3、JavaScriptの基本構文
1. jsの変数
変数宣言
- javaは強く型付けされた言語
です。コードがint:iであると仮定すると、javaはコンパイル段階に存在します。次に、javaに機能があります:iプログラムのコンパイル段階でi変数のデータ型が決定され、i変数のデータ型がコンパイルされていますステージはint型であり、この変数は最後のメモリが解放されるまで常にint型であり、他の型に変更することはできません。 - JavaScriptは弱く型付けされた言語です
。JavaScriptはコンパイル段階では存在しません。変数は自由に割り当てることができ、任意のタイプの値を割り当てることができます。変数のタイプは割り当てられた値のタイプによって決定されるため、変数の宣言では「var」を使用します - 例(JavaScriptで変数を宣言する方法):
var i=1;(此时变量类型是整型)
var i=3.14;(此时的变量名是浮点型)
var i`=‘abc’;(此时变量的类型是字符串)
- JSでは、変数が手動で割り当てられていない場合、システムはデフォルトで未定義になります(ここでの未定義は文字列ではなく特定の値です。定義/宣言なしで変数にアクセスすると、構文エラーが報告されます: "変数”定義されていません。
変数のタイプ
- 未定義
- 数値に
は、整数、10進数、正の数、負の数、数ではなく、無限大が含まれます - 文字列
"+"の両側で、それらの1つが文字列である限り、 "+"は文字列連結演算を実行します
。10/ 3 = 3.333333の結果(弱く型付けされた言語) - ブール値に
は、trueとfalseの2つの値しかありません - オブジェクト
- オブジェクトサブクラス
- NaN
は特定の値であり、数値ではないことを意味します。「Not a Number」、特異数はタイプnumberです。 - グローバル変数
関数本体の外部で宣言された変数は、グローバル変数に属します。グローバル変数の宣言期間は
、ブラウザが開かれたときに宣言され、ブラウザが閉じられたときに破棄されます。グローバル変数は常にブラウザのメモリにあり、消費するため、できるだけ使用しないようにしてくださいメモリ空間。ローカル変数をできる限り使用できる - ローカル変数
変数は、関数の本体で宣言は、関数のパラメータはローカル変数に属していると、
ローカル変数は、ライフサイクル:ローカル変数のメモリ空間、機能が実行を開始するときに関数が実行された後、開いて、ローカル変数のメモリ空間は解放
部分変数のライフサイクルは比較的短いです。
関数では、ローカル変数とグローバル変数が同じ名前の場合、ローカル変数は「最も近い原理」を使用して呼び出されます。グローバル変数は関数本体の外で呼び出されます(ローカル変数はこの時点で破棄されているため) )
変数がvarキーワードなしで宣言されている場合、変数がどこで宣言されていても、それはグローバル変数です
//举个例子
function myfun(){
name = "wangwu"
}
//访问函数
myfun();
alert("name="+name);//name=wangwu
2. jsの識別子とキーワード
- 識別子の命名規則と仕様はJavaに従って実装されています
- キーワードを覚える必要はありません
3. jsのコメント
- 1行コメント:
//单行注释
/*
多行注释1
多行注释2
*/
4. JavaScriptの関数
1.関数の定義方法
- この関数は、Java言語のメソッドと同等であり、意図的に再利用されるコードの一部でもあります。関数は通常、意図的に特定の関数を完成させます
- 弱く型付けされた言語であるため、返されるクラスが何であれ、戻り値の型を指定する必要はありません。
- 関数を定義するには2つの方法があります
第一种方式:
function 函数名(形式参数列表){
函数体;
}
第二种方式:
函数名 = function (形式参数列表){
函数体;
}
//其中,形式参数可以由也可以没有
//可以传指定的参数个数,也可以不传指定的参数个数
呼び出しメソッドを実行するには、関数を呼び出す必要があります。
函数名(实际参数);
- jsには関数のオーバーロードメカニズムはありません
- Javaでは、
オーバーロードは、パラメーターのタイプと数の違いに依存してオーバーロードを実現します。 - jsでは、
jsは弱く型付けされた言語です。関数パラメーターの型は人工的に定義されていませんが、パラメーター自体の型によって決定されるため、javaのようにパラメーターの数と型によって異なる関数を区別できません。オーバーロードを実装する
2つの関数の名前が同じである場合、背後の関数は上記の関数を上書きします
2.特別な演算子と関数
警告ボックス
- 使い方
- 警告(マッサージ)、警告情報の入力に使用
プロンプトボックス
- 使い方
- ユーザーに操作を確認させるために使用される確認(マッサージ)
確認ボックス
- プロンプト(「プロンプト情報」、「デフォルト」)、確認情報を表示するために使用
//示例
<!--三种消息对话框-->
<script type="text/javascript">
//alter(massage)
alert("这是警告框,用于输出警告信息")
function show_confirm(){
//confirm(massage)
var tf=confirm("请选择确认按钮!")
if(tf==true){
alert("您按了确认按钮")
}else{
alert("您按了取消按钮!")
}
}
function disp_confirm(){
//prompt("提示信息","默认值");
var name=prompt("请输入您的姓名","李大为");
if(name!=null && name!=""){
document.write("您好",+"name")
}
}
</script>
<form action="" method="POST">
<input type="button" onclick="show_confirm()" value="显示确认框"/>
<input type="button" onclick="disp_confirm()" value="显示提示框"/>
</form>
typoofオペレーター
- 使い方
- アラート(typeof変数名)、プログラム実行フェーズ中に変数のデータ型を動的に取得できます
- 运算结果是以下6个字符串之一
“undefined”
“number”
“string”
“boolean”
“object”
“function”
//例子
var v1 = 1;
alert(typeof v)//"number"
var v2 = "abc";
alert(typeof v)//"string"
"=="同等の演算子
- 使い方
- (変数1 ==変数2)、値が等しいかどうかのみを判断します
"==="合同演算子
- 使い方
- (変数1 ===変数2)、値が等しいかどうか、およびデータ型が同じかどうかを判断する
isNaN関数
- 使い方
- isNaN(データ)、結果がtrueの場合は数値、結果がfalseの場合は数値ではない
parsenInt()関数
- 使い方
- parseInt(データ)、文字列を自動的に数値に変換し、整数ビットを取ることができます
parseFloat()関数
- 使い方
- parseFloat( "string")、文字列を数値に自動的に変換できます
Math.ceil()関数
- 使い方
- Math.ceil(数値)、切り上げ可能
ブール()関数
- 使い方
- ブール(データ)、非ブールタイプをブールタイプに変換できます。
if(3) 相当于 if(Boolean(3))
文字列の一般的に使用される関数
- length
は文字列の長さを取得します - indexOf
は、現在の文字列で指定された文字列が最初に出現する位置のインデックスを取得します - lastIndexOf
現在の文字列で指定された文字列が最後に出現するインデックスを取得します - 置き換える
置き換え - substr
インターセプトサブストリング - サブストリング
インターセプションサブストリング - toLowerCase小文字
変換 - toUpperCase
大文字に変換
文字列を分割する
* substrとsubstring
var str = "avghsdkl"
substr(2,4)-intercept ghsd の違いに注意してください。str[4]
substring(2,4)-intercept ghsを含み、str [4]を除きます
*
V.クラスとオブジェクトの定義
1.クラス定義
定義するには2つの方法があります
第一种方式:
function 类名(形式参数列表){
}
第二种方式:
类名 = function (形式参数列表){
}
2.オブジェクトクラス
- これは、すべてのタイプのスーパークラスであり、カスタムタイプであり、デフォルトでObjectを継承します。
- プロトタイプ属性(一般的に使用される)を含め、クラス属性と関数
コンストラクター属性を動的に拡張できます - toString()関数を含む
valueOf()関数
toLocaleString()関数 - jsで定義されたクラスはデフォルトでObjectを継承し、Objectクラスのすべての属性と関数を統合します
3.オブジェクトの作成
new 构造方法名(实参);//构造方法名和类名一致
//定义一个学生信息函数
function Student(number,name,score){
this.number = number;
this.name = name;
this.score = score;
}
//函数调用
Student(222,"Jack" ,54);
//创建对象(传几个参数都可以)
var stu1 = new Student();
var stu2 = new Student2(544);
var stu3 = new Student(32,"Helen");
var stu = new Student(111,"Rose",65);
//访问对象属性
alter(stu.number);
alter(stu.name);
alter(stu.score);
//访问对象的另一种方法
alert(stu["number"]);
alert(stu["name"]);
alert(stu["score"]);
4.文字列オブジェクト
作成する2つの方法
- 最初の種類:
var s = "abc";を直接作成します。 - 2番目の種類:内部サポートクラス
var s2 = new String( "abc")を使用します。String は直接使用できる組み込みクラスであり、Stringの親クラスはObjectであることに注意して
ください
//小String(属于原始类型String)
var x = "king";
alter(typeof x);//"string"
//大String(属于Object类型)
var y = new String("abc");
alter(typeof y);//"object"
6. JavaScriptでのイベントとイベント登録
1.イベント
-
ぼかし
が焦点を失う -
焦点は
フォーカスを取得します -
クリック
キーを押しながらクリック -
dblclick
マウスダブルクリック -
キーダウン
キーボードプレス -
keyup
キーボードバウンス -
マウスダウン
、マウスダウン -
マウスオーバー
マウスオーバー -
MouseMove
マウスの動き -
マウスアウト
マウスの葉 -
mouseUp
マウスアップ -
リセット
フォームリセット -
フォームを送信 -
ドロップダウンリストのオプションを変更する -
選択
テキストが選択されています -
ロード
ページがロードされます(HTMLページ全体のすべての要素がロードされた後に発生します)
2.イベント登録
イベントハンドラーを介して直接登録する
- すべてのイベントはイベントハンドルに対応します
- イベントハンドル属性が存在します
jsコードで登録
以下は、2つの方法の具体例です。
function hello(){
alter("事件的注册例子”);
}
//第一种方法
<input type="button" value="第一种方法" onclick="hello()"/>
/*
将hello函数注册到按钮上,等待onclick事件发生之后,该函数被浏览器调用,我们称这个为回调函数
回调函数的特点:自己把这个代码写出来了,但是这个函数不是自己负责调用的,由其他程序员负责调用该函数
*/
//第二种方法
<input type="button" value="第二种方法" id="mybtn"/>
<input type="button1" value="第二种方法1" id="mybtn1"/>
//第一步、先获取这个按钮对象
var btn = document.getElementById("mybtn");
//第二步、给按钮对象的onclick属性赋值
btn.onclick = hello;//注意:千万不要加小括号
//这行代码的含义是:将回调函数hello注册到click事件上
//使用匿名事件注册
var btn1 = document.getElementById("mybtn1");
btn1.onclick = function(){
aleter("使用匿名函数注册事件");
}