ホームページ >ウェブフロントエンド >jsチュートリアル >初心者のためのJavaScript入門学習ガイド
初心者のためのJavaScript入門学習ガイド
- 伊谢尔伦オリジナル
- 2017-06-16 10:05:512266ブラウズ
JavaScript はフロントエンド開発にとって必須のコースです。まず、最初の 3 つのコースを見てみましょう。
レッスン 1
1: JavaScript の主な機能
解釈型: コンパイルの必要がなく、ブラウザが直接解釈して実行します
オブジェクトベース: JS によって作成されたオブジェクトを直接使用できます
イベント駆動型:イベント駆動型 サーバー側のプログラムを介さずにクライアントの入力に対応するメソッドです。
セキュリティ: ローカルのハードディスクへのアクセスは許可されず、データをサーバーに書き込むことはできません。
クロスプラットフォーム: js に依存します。
レッスン 2
Web ページに JavaScript を記述する方法: JavaScript
& lt; スクリプト言語 = "javascript" & gt; を挿入できます。 head & gt; & lt;/head & gt; ラベル
は 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956 タグの間に配置することもできます
最も一般的に使用される場所は 93f0f5c25f18dab9d176bd4f6de5d30e 9c3bca370b5104690d9ef395f2c5f8d1タグ
以下の場合は、タグの途中の93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1にJavaScriptコードを挿入します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初学javascript</title>
<script language="javascript"> var now=new Date();//获取Date对象的一个实例
var hour=now.getHours();//获取小时数
var min=now.getMinutes();//获取分钟数
alert("当前时间"+hour+":"+min+"\n欢迎访问柠檬学院http://www.bjlemon.com/"); </script>
</head>
<body>
</body>
</html>ケース 2 のコードは次のとおりです
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的年月日</title>
<script language="javascript"> var now=new Date();//获取日期对象
var year=now.getYear()+1900;//获得年，在js中年份需要加1900才可以显示此时此刻的年份
var month=now.getMonth()+1;//获得月份,月份是0-11，所以在js中需要加1
var date=now.getDate();//获得日
var day=now.getDay();//获得星期几
var day_week=new Array("礼拜日","礼拜一","礼拜二","礼拜三","礼拜四","礼拜五","礼拜六"); var week=day_week[day]; var time="当前时间:"+year+"年"+month+"月"+date+"日"+week;
alert(time); </script>
</head>
<body></body>
</html>2: 外部 Javascript を参照します スクリプトが複雑な場合、または同じコードが多くのページで使用されている場合は、これらのスクリプト コードを別のファイルに配置できます。拡張子は .js です。そして、コードを使用する必要がある Web ページ内の JavaScript ファイルをリンクできます5cdacb76afb3793eabcdbd48e17de46e2cacc6d41bbb37262a98f745aa00fbf0
(推奨)上記のコードは、一般に 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 の途中に記述することをお勧めします
.js 接尾辞を持つファイルでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 タグを使用して囲む必要はありません
05503b97b17f94689c3ddb2273c58e71 は、ページの読み込み時に getDate() メソッドを呼び出すことを意味します。この場合の接尾辞は .js です。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>引用外部的js</title>
<script language="javascript" src="js1.js">
</script>
</head>
<body onload="getdate()">
</body>
</html>この場合のサフィックスは .js です
function getdate(){ var now=new Date();//获取日期对象
var year=now.getYear()+1900;//获得年，在js中年份需要加1900才可以显示此时此刻的年份
var month=now.getMonth()+1;//获得月份,月份是0-11，所以在js中需要加1
var date=now.getDate();//获得日
var day=now.getDay();//获得星期几
var day_week=new Array("礼拜日","礼拜一","礼拜二","礼拜三","礼拜四","礼拜五","礼拜六");
var week=day_week[day];
var time="当前时间:"+year+"年"+month+"月"+date+"日"+week;
alert(time);
}レッスン 3
Javascript 構文
1:Javascript 構文
1.1: js 変数は大文字と小文字が区別されます
Usename と useName は 2 つの異なる変数です 1.2: それぞれの末尾のセミコロンline はオプションです。ステートメントの末尾にセミコロンがない場合、js
はコードのこの行の末尾をステートメントの末尾として自動的に使用します
alert("hello world"); alert ("hello world")
1.3: 変数は弱い型です
変数を定義します。例: var username = "biexiansheng"
var age = 22; のように、VAR 演算子のみを使用します。タグブロック{//コード}大きなブラケットにパッケージ化された文は、order 1.5で
1.5を実行します。 = Var now = new date (); // date を取得するオブジェクト 1.5.2: 複数行のアノテーション/** /
複数行のコメントは /* で始まります。*/end、2 つの内容はアノテーションのメモです。
//コンテンツ
}
レッスン 4
JavaScript データ型 (JavaScript にデータ型がいくつあっても、宣言時に使用できるのは var のみです)
1: 数値型
整数: 123 //10 進数
0123 //0 から始まる 8 進数
0x123 //0x (oではなくゼロ) で始まる16進数 浮動小数点型: 整数部と小数部を加えたもので、10進数でのみ表現できますが、科学的表記法を使用できます
3.1415926 // 浮動小数点数の標準形式 /3.14E9 / / 科学的な数え方を使用して表すと、3.14 乗した 9 番目の辺を表します
2: 文字
文字データは、単一引用符または複数の引用符に含まれる 1 つ以上の文字です。 ：'a' 'hello world'
"a" " hello world"
JavaScript には char データ型はありません
単一の文字を表したい場合は、長さ 1 の文字列を使用する必要があります
一重引用符には二重引用符が含まれます '"hello" '
二重引用符には一重引用符 "' が含まれますworld'"
3: ブール型
ブールデータには true または false のみがあります。js では、整数 0 を使用して false を表し、0 以外の整数を使用して true を表すこともできます
4: エスケープ文字
表示不可バックスラッシュで始まる特殊文字は、エスケープ文字としても知られる制御文字と呼ばれることがよくあります
b バックスペース n 改行 f フォーム フィード tTab 文字 '一重引用符' '二重引用符' \Backslash
5 : Null 値
null、定義に使用されます空の参照または存在しない参照
例: var a=null;
6: 未定義の値
宣言されているが値が割り当てられていない変数
var a;
alert(a);
Pop up unknown はキーワードです、未定義の値を表すために使用されます
7: 配列型
配列型、配列は、JavaScript スクリプト言語で、基本的なデータと結合されたデータを含むシーケンスです
var core=[45,56,45,78,78,65];
配列は本質的に Array オブジェクトであるため、演算子 new を使用して var core などの新しい配列を作成できます。 =new Array(45,65,78,8,45);
配列内の特定の要素へのアクセスは、次のステートメントで宣言されているように、要素のインデックス位置によって実現できます
変数は配列内の 4 番目の要素を返しますスコア
var m=score[ 3];
レッスン 5
変数の定義と使用
1: 変数の命名規則
変数名は文字、数字、アンダースコアで構成されますが、数字で始めることはできません
大文字と小文字を厳密に区別します
たとえば、ユーザー名 username
2: 変数の宣言
var 変数
1 つの var を使用して、var now、year、month、date などの複数の変数を宣言できます
に値を割り当てることができます。変数を宣言しながら、つまり初期化します
var now="2016-8-11",year="2016",month="8",date="11";
値を代入せずに変数を宣言しただけの場合の場合、変数のデフォルト値は未定義です
JavaScript は弱い型です。変数の型は、変数の値に基づいて決定されます。グローバル変数の宣言: 1: var 宣言の有無に関係なく、関数本体外の宣言はグローバル変数です。 2: 関数本体内で var を使用して宣言された変数はローカル変数であり、var なしで宣言された変数はグローバル変数です
。
//宣言されていない変数タイプに値を割り当てると、JavaScript は自動的にその変数を使用してレイアウト変数を作成します
例: a="hello world";
function test(){
var c= 「ローカル変数」; / /このCはローカル変数であり、ローカル変数を定義する唯一の方法でもあります。 : 代入演算子
単純な代入演算子
例: var useName='tom';// 単純な代入演算子
複合代入演算子
a+=b;/ / a=a+b;
と同等 a-=b;// a=a-b;
a*=b;// a=a*b;
a/=b;// a =a/b;
と同等 a%=b;// a=と同等a%b;
a&b=b;// a=a&b; 論理積演算と同等
a|=b;// a=a |b; 論理和演算と同等
a^=b;// a と同等=a^b; 論理 NOT 演算子
+ - * / %
++ ++ は最初に追加され、後で使用されます + +最初に使用してから add
--Pre--最初に減算してから Post- - 最初に使用してから減算します
注: 除算演算を実行する場合、0 を除数として使用することはできません。0 を除数として使用すると、キーワード infinity が返されます。より大きい > = 以上 <= 以下
== true に等しい。
===絶対に等しい 表面的な値だけでなく、データ型が同じかどうかも判断します。
！ = と等しくない 表面的な値のみで判断され、データ型は関係ありません。
！ == は完全に等しいわけではありません。表面値を決定するだけでなく、データ型が同じかどうかも決定します。
4: 論理演算子
!論理 NOT
&&論理 AND。両方のオペランドの値が true の場合のみ、結果は true になります
|| 論理和。 2 つのオペランドのうち 1 つだけが true の場合、結果は true になります
5: 条件演算子
条件演算子は、JavaScript でサポートされている特別な三項演算子です
構文形式: オペランド?結果 1: 結果 2;
オペランドの値が true の場合、式全体の結果は結果 1 になります
文字列を接続する 2 つの方法
+。 var a="hello"+"world";
+=。 var a+="ハローワールド!!!";
レッスン7
フロー制御if、switch文
1: if条件判定文
1: if(式){
を使用して
' out 's off 's off ‐ ‐ ‐ ‐ ‐ ‐ ‐ 1: if(式) {
/expression が true の場合、
内のステートメントを実行します }else{
Else if (Expression1) {
// Expression1 はステートメント
で実行されます} Else If (Expression2) {
// Expression2 はステートメント
で実行されます} Else {
// これは else が使用可能です。存在する場合は、上記の条件になります
// else を指定します
}
2: switch ステートメント
利点: 可読性が高く、読みやすい
構文形式
switch (式){
ケース条件 1: ステートメント 1; . case 条件 4: ステートメント 4;
Break;
デフォルト: 2 ループ条件を実行します。 step) {
3 ステートメント body;
}
//最初に初期条件を実行し、ループ条件が true を返すかどうかを判断します。
// false が返された場合は条件を終了し、true の場合はステートメント body を実行します。 //その後、成長ステップを実行します
//1->2true->3->4->2true->3->4
//1->2false->3->> 4->2false for ループが終了します
例
var sum=0;
for(var i=0;i sum+=i;
}
alert(sum);
2: while ループステートメント
文法形式
' ' ' ' の 1true-> var sum=0;
var i =1;
,,、これを少なくとも 1 回実行してください。
文法形式
do{
1 実行ループ本体
}while(2 判定条件);
1->2true->1->2true....
注: while ループは最初に条件を判定します。 . が十分に成立し、その判定結果に基づいてループ本体を実行するかどうかを決定します
do-while ループは、まずループ本体を 1 回実行し、その後、条件が true であるかどうかを判断します。ループは少なくとも 1 回は実行されることを保証できます。
例
var sum=0;
var i=1;
do{
sum+=i;
}while(i<=10);
alert(sum);
以上が初心者のためのJavaScript入門学習ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。