初心者のためのJavaScript入門学習ガイド-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

初心者のためのJavaScript入門学習ガイド

伊谢尔伦

Jun 16, 2017 am 10:05 AM

JavaScript はフロントエンド開発にとって必須のコースです。まず、最初の 3 つのコースを見てみましょう。

レッスン 1
1: JavaScript の主な機能
解釈型: コンパイルの必要がなく、ブラウザが直接解釈して実行します
オブジェクトベース: JS によって作成されたオブジェクトを直接使用できます
イベント駆動型:イベント駆動型サーバー側のプログラムを介さずにクライアントの入力に対応するメソッドです。
セキュリティ: ローカルのハードディスクへのアクセスは許可されず、データをサーバーに書き込むことはできません。
クロスプラットフォーム: js に依存します。

レッスン 2
Web ページに JavaScript を記述する方法: JavaScript
& lt; スクリプト言語 = "javascript" & gt; を挿入できます。 head & gt; & lt;/head & gt; ラベル
はタグの間に配置することもできます
最も一般的に使用される場所はタグ

以下の場合は、タグの途中のに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 ファイルをリンクできます

(推奨)上記のコードは、一般にの途中に記述することをお勧めします

.js 接尾辞を持つファイルでは、<script></script> タグを使用して囲む必要はありません

は、ページの読み込み時に 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 スクリプト言語で、基本的なデータと結合されたデータを含むシーケンスです

各データ型は、データの本質であるオブジェクトに対応します上は Array オブジェクトです

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: 変数の命名規則
変数名は文字、数字、アンダースコアで構成されますが、数字で始めることはできません

キーワードは使用できませんJavaScript

大文字と小文字を厳密に区別します
たとえば、ユーザー名 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 演算子

2: 算術演算子

+ - * / %
++ ++ は最初に追加され、後で使用されます + +最初に使用してから 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7681

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1286

PHP チュートリアル

1229

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。