JavaScriptの学習を開始する

会ってくれてありがとう
こんにちは、
ケンです

2020年10月24日に、10.24プログラマーズデーを祝うためにJavaScript列が作成され、今後も更新されます。またお会い
できること
を楽しみにしています。

ここに写真の説明を挿入
CSDNの友達が始めてレビューできるように、学校関連の教科書に焦点を当てる

ここに写真の説明を挿入
誰もが島
であり、弱い者は集まり、
強い者は自分自身を強化します

1.1_JavaScriptとは

1.1.1_JavaScriptの概要

JavaScriptは、主にインタラクティブなWebページの開発に使用される、Web開発の分野における強力なプログラミング言語です。コンピューター、携帯電話、その他のデバイスで閲覧されるWebページでは、ほとんどの対話ロジックはJavaScriptによって実装されています。

言語	機能と説明
HTML	Structure_Webページの構造とコンテンツを決定します。これは人体に相当します
CSS	スタイル-_ユーザーに対するWebページの外観を決定します。これは、ドレッシングやメイクに相当します。
JavaScript	Behavior_Realizeビジネスロジックとページコントロール、さまざまな人間の行動に相当

JavaScriptはHTMLWebページに埋め込まれており、ブラウザに組み込まれたJavaScriptエンジンによって解釈および実行され、元々表示にのみ使用されていたページを、ユーザーの操作をサポートするページプログラムに変換します。

1.1.2_JavaScriptの誕生と発展

1995年、Netscape（現在のMozilla）のBrandon Eichは、NetscapeNavigatorブラウザで初めてJavaScriptを設計しました。
_
Netscapeは当初このスクリプト言語をLiveScriptと名付け、後にNetscapeとSun（2009年にOracleに買収）が協力してJavaScriptに名前を変更しました。
_これ
は、Sunによって導入されたJava言語が大きな注目を集め、NetscapeがマーケティングのためにJavaという名前を借用したためです。実際、JavaScriptとJavaの関係は、Lei FengTowerやLeiFengのようなものです。それらは本質的に2つの異なるプログラミング言語です。

1.1.3_JavaScriptの機能

JavaScriptはスクリプト言語であり、スクリプト
は単にテキストコマンドのセットであり、プログラムフローに従って1つずつ実行されます。一般的なスクリプト言語には、JavaScript、TypeScript、PHP、Pythonなどがあります。非スクリプト言語（C、C ++など）は通常、独立した実行可能ファイルを生成した後にコンパイル、リンク、および実行する必要がありますが、スクリプト言語はインタープリターに依存し、呼び出されたときにのみ自動的に解釈またはコンパイルします。スクリプト言語は通常、シンプルで、習得しやすく、使いやすいものです。文法規則は比較的緩いため、開発者はプログラミング作業をすばやく完了することができます。
JavaScriptはクロスプラットフォームにすることができます
。JavaScript言語はオペレーティングシステムに依存せず、ブラウザのサポートのみが必要です。
JavaScriptはオブジェクト指向をサポートします

1.1.4_JavaScript構成

JavaScriptは、ECMAScript、DOM、およびBOMの3つの部分で構成されています。

ここに写真の説明を挿入

次に、JavaScriptの構成について簡単に紹介します。

（1）ECMAScript：JavaScriptのコアです。ECMAScriptは、JavaScriptのプログラミング構文と基本的なコアコンテンツを規定しており、すべてのブラウザメーカーが準拠するJavaScript構文の業界標準のセットです。

（2）DOM：W3C組織が推奨する拡張マークアップ言語を処理するための標準プログラミングインターフェイスであるドキュメントオブジェクトモデル。DOMが提供するインターフェイスを介して、ページ上のさまざまな要素（サイズ、位置、色など）を操作できます。

（3）BOM：ブラウザオブジェクトモデル。コンテンツに依存せず、ブラウザウィンドウと対話できるオブジェクト構造を提供します。BOMを使用すると、ブラウザウィンドウを操作できます（ポップアップボックス、ブラウザナビゲーションジャンプの制御など）。

1.2_一般的な開発ツール

仕事を上手くやりたいと思ったら、まずは道具を研ぎ澄まさなければなりません。優れた開発道具は、プログラム開発の効率と経験を大幅に向上させることができます。Webフロントエンド開発で一般的に使用される開発ツールには、Visual Studio Code、Sublime Text、HBuilderなどがあります。次に、これらの開発ツールの特徴を紹介します。

VisualStudioコード

Visual Studio Code（略してVS Code）は、Microsoftによって開発された非常に強力な軽量エディターです。このエディターは、豊富なショートカットキーを提供し、構文の強調表示、カスタマイズ可能なホットキーバインディング、ブラケットマッチング、およびコードフラグメント収集機能を統合し、複数の構文およびファイル形式の記述をサポートします。

崇高なテキスト

Sublime Textは、スペルチェック、ブックマーク、カスタムキーバインディング、その他の機能をサポートする使いやすいユーザーインターフェイスを備えた軽量のコードエディターです。また、柔軟なプラグインメカニズムを通じてエディターの機能を拡張することもできます。そのプラグインは、Pythonを使用できます。言語開発。Sublime Textは、Windows、Linux、macOS、およびその他のオペレーティングシステムをサポートするクロスプラットフォームエディターです。

HBuilder

HBuiderは、DCloud（Digital Paradise）によって起動されたHTML5をサポートするWeb開発エディターです。フロントエンド開発とモバイル開発で豊富な機能と親密なユーザーエクスペリエンスを提供します。また、HTML5ベースのモバイルアプリ開発も提供します。良いサポート。

Adobe Dreamweaver

Adobe Dreamweaverは、Webページの作成とWebサイトの管理を統合するWYSIWYG Webページエディタです。WebデザイナーがWebページの作成効率を向上させ、Web開発の難しさを簡素化し、HTML5とCSSを学習するためのしきい値を簡素化するために使用されます。ただし、不利な点は、視覚的な編集機能が多くの冗長なコードを生成することであり、複雑な構造と多くの動的な相互作用を持つWebページの開発には適していません。

WebStorm

WebStormは、JetBrainsが立ち上げたWebフロントエンド開発ツールです。JavaScriptとHTML5開発がその強みであり、jQuery、Prototype、Less、Sass、AngularJS、ESLint、webpackなどの多くの一般的なフロントエンドテクノロジーをサポートしています。

1.3_JavaScriptの概要❗

1.3.1_コード書き込み位置

インラインスタイル
インラインスタイルとは、HTMLタグのevent属性（つまり、onclickなどのonで始まる属性）に1行または少量のJavaScriptコードを書き込むことを指します。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
<body>
<input type="button" value="点我" οnclick="alert('行内式')“>
</body>
</head>
</html>

インラインスタイルを使用してJavaScriptコードを記述します。実現：ボタンをクリックすると、警告ボックスがポップアップし、いくつかのプロンプト情報が表示されます

4行目は、WebページのエンコーディングがUTF-8であることを宣言しています。これは、ブラウザがWebページのエンコーディングを正しく認識するのに役立ちます。エンコーディングを宣言した後、ファイル自体のエンコーディングもUTF-8であることを確認する必要があります。現在、コードエディタで作成されたほとんどのファイルには、デフォルトでUTF-8エンコーディングがあります。さらに、Windows NotepadのデフォルトのエンコーディングはANSIであり、Notepadで記述されたWebページは文字化けしやすいため、読者はNotepadを使用してコードファイルを記述しないでください。

インラインスタイルの使用に注意してください。

一重引用符と二重引用符の使用に注意してください。HTMLでは二重引用符が使用され、Javascriptでは一重引用符が推奨されます。
インラインスタイルは、特にHTMLで多くのJavaScriptコードを記述する場合、読みにくくなります。読みにくい。
複数の引用符がはめ込まれている場合、混乱しやすく、コードエラーが発生します。
インラインスタイルは、一時的なテストまたは特別な状況でのみ使用する必要があります。インラインスタイルは一般的に推奨されません

インライン（埋め込み）
インラインでは、<script>タグのみを使用してJavaScriptコードをラップします。<script>タグは、<head>または<body>タグにタグを書き込むことができます。インラインを介して、<script>タグに複数行のJavaScriptコードを記述できます。埋め込みは、JavaScriptを学習するための最も一般的な方法です。

<head>
......
<script>
alert('内嵌式');
</script>
</head>

4行目はJavaScriptステートメントで、末尾のセミコロンはステートメントの終わりを示しており、後で次のステートメントを記述できます。<script>タグにもtype属性があります。HTML5では、この属性のデフォルト値は「text / JavaScript」であるため、書き込み時にtype属性を省略できます。

外部タイプ（外部チェーン
タイプ）外部タイプは、JavaScriptコードを別のファイルに書き込むことです。通常、ファイル拡張子として「js」を使用します。<script>タグを使用してhtmlページにインポートします。これは、JavaScriptコードが多い状況に適しています。
外部的には、JavaScriptコードを<script>タグに書き込むことはできません

<head>
......
<script src="test.js"></script>
</head>

と

alert('外部式');

JavaScriptコードをhtmlに埋め込む別の方法は、疑似プロトコルを使用することです。

<a href="javascript:alert('伪协议')">点我</a>

コードでは、href属性の「JavaScript」は疑似プロトコルを表しており、このハイパーリンクをクリックすると、次のJavaScriptコードがアラートボックスをポップアップします。この方法は、実際の開発では推奨されません。

JavaScriptコードを作成するときは、次のように、プログラムエラーを回避するための基本的な文法規則に注意を払う必要があります。

JavaScriptは厳密に大文字と小文字を区別するため、コードを作成するときは大文字と小文字の正確さに注意する必要があります。例：ケースコードのアラートが大文字のALERTに変更された場合、警告ボックスはポップアップしません。
JavaScriptコードは、スペース、改行、インデントの影響を受けず、文を分割できます。複数行で書き込むことができます。たとえば、アラートの後に「（」を次の行に変更しても、プログラムは正しく実行されます。
ステートメントが書き込まれ、次のステートメントが新しい行に書き込まれる場合、前のステートメントの後のセミコロンは省略できます。

1.3.2_メモ

一行コメント「//」

<script>
alert('Hello,JavaScript'); //输出Hello,JavaScript
</script>

複数行のコメント "/ * * /"

<script>
alert('Hello,JavaScript'); 
/* 输出
Hello,JavaScript
*/
</script>

1.3.3_入力および出力ステートメント

ステートメント	説明
アラート（ 'msg'）	ブラウザが警告ボックスをポップアップします
console.log（ 'msg'）	ブラウザコンソールの出力情報
プロンプト（ 'msg'）	ブラウザに出力ボックスが表示され、ユーザーはコンテンツを入力できます

<script>
alert("这是一个警告框"); 
console.log ('在控制台输出信息');
prompt ('这是一个输入框');
document.write("输出语句");
</script>

ここに写真の説明を挿入

1.3.4_コンソールの使用

ブラウザコンソールにJavaScriptコードを直接入力して実行できます。

ここに写真の説明を挿入

1.4_JavaScript変数❗

1.4.1_変数とは

変数は、プログラムがデータを格納するためにメモリに適用するスペースの一部です。

1.4.2_変数の使用

変数を宣言する

var age;   // 声明变量

変数の割り当て

age = 10;   // 为变量赋值

alert(age);        // 使用alert()警告框输出age的值
console.log(age);  // 将age的值输出到控制台中

変数の初期化

var age = 10;   //声明变量同时赋值

1.4.3_変数の適用事例

変数を使用して個人情報を保存する

<script>
var myName = '小明';  //名称
var address = 'xx市xx区';  //地址
var age = 18;  //年龄
var email = 'xiaoming@localhost';  //电子邮箱
console.log(myName);
console.log(address);
console.log(age);
console.log(email);  //输出相应的值
</script>

ここに写真の説明を挿入

変数を使用して、ユーザーが入力した値を保存します

<script>
var myName = prompt('请输入您的名字');
alert(myName);
</script>

1.4.4_変数の構文の詳細

変数の値を更新します

var myName = '小明';   //变量赋初值
console.log (myName);  //输出结果：小明
var myName = '李华';  //更新变量的值
console.log (myName)  //输出结果：小红

同時に複数の変数を宣言する

var myName,age,email;  //同时声明多个变量，不赋值
var myName = '小明'，
    age = 18,
    email = 'xiaoming@localhost';

変数を宣言する特殊なケース
（1）変数のみを宣言し、値を割り当てない場合、変数を出力するとき、結果は未定義です。

var age;
console.log (age);  //输出结果：undefined

（2）変数が宣言されておらず、変数の値が直接出力されている場合、プログラムは失敗します

console.log (age);

前のコード行でエラーが発生した場合、次のコードは実行されません。したがって、開発時にコードが期待どおりに実行されない場合は、コンソールを開いてエラーメッセージがあるかどうかを確認し、どの行が間違っているかを確認できます。

（3）変数を宣言せず、値を割り当てるだけです

age1 = 10;       //变量age1没有使用var进行声明
console.log (age1);  //输出结果：10

出力結果から、宣言されていない変数を直接割り当てると、変数の値も正しく出力できることがわかります。この状況はJavaScript言語の特徴であり、グローバルスコープとウィンドウオブジェクトについて学ぶと理解できます。

1.4.5_変数の命名規則

変数に名前を付けるときは、コードエラーを回避し、コードの読みやすさを向上させるために、変数の名前付け規則に従う必要があります。

①文字、数字、下線、年齢や数字などのドル記号（$）で構成されます。

②appとAppのように厳密に大文字と小文字を区別するのは2つの変数です。

③18ageは変数名が間違っているなど、数字で始めることはできません。

④キーワードにすることはできません。var、for、whileなどの予約済みの単語は間違った変数名です。

⑤「年齢は年齢、numは数」など、「名前を見て意味を理解する」ことを心がけてください。

⑥myFirsNameのように、ラクダの大文字小文字の表記に従うことをお勧めします。最初の文字は小文字で、次の単語の最初の文字は大文字です。

JavaScriptでは、キーワードは「予約済みキーワード」と「将来の予約済みキーワード」に分けられます。予約キーワードとは、事前に定義され、JavaScript言語で特別な意味が与えられている単語を指し、変数名として使用することはできません。

将来予約キーワードとは、ECMAScript仕様で予約されているキーワードを指します。現在、特別な機能はありませんが、将来的に追加される可能性があります。
将来、予約済みキーワードを変数名として使用して、将来キーワードに変換する際のエラーを回避することはお勧めしません。

識別子
JavaScriptには識別子の概念もあります。識別子は、開発者が変数と関数に付けた名前を指します。たとえば、変数名ageは識別子です。構文的には、キーワードを識別子として使用することはできません。そうしないと、文法エラーが発生します。

ここに写真の説明を挿入

明るい場所に顔を向けてください。
時間が経つにつれて、
あなたは自然に自分と仲良くするための秘訣を学びます。

ここに写真の説明を挿入

これは
まだ来て喜んで
でした夢は信仰を失うことはありません
_
こんにちは、私はケンですああ
訪問者に感謝します

1.1_JavaScriptとは

1.1.1_JavaScriptの概要

1.1.2_JavaScriptの誕生と発展

1.1.3_JavaScriptの機能

1.1.4_JavaScript構成

1.2_一般的な開発ツール

1.3_JavaScriptの概要❗

1.3.1_コード書き込み位置

1.3.2_メモ

1.3.3_入力および出力ステートメント

1.3.4_コンソールの使用

1.4_JavaScript変数❗

1.4.1_変数とは

1.4.2_変数の使用

1.4.3_変数の適用事例

1.4.4_変数の構文の詳細

1.4.5_変数の命名規則

おすすめ