目次
JSはブラウザ上で動作しますが、例えばchromeにはJSエンジンというJVMに相当する専用モジュールがあり、jsコードを解釈して実行することができます。
JSの構成:
DOM APIとは、jsがページを操作するためにブラウザが提供するAPIです。
BOM APIは、ブラウザウィンドウを操作するためにブラウザがjsで提供するAPIです。
こんにちは世界
スクリプト タグを使用して HTML に埋め込む、3 つの導入方法:
1.内部js 
2.外部js
これを別の .js ファイルとして記述し、HTML をインポートさせます。
3. インラインjs
アラートは、ユーザーがプログラムの出力を確認できるようにウィンドウをポップアップできますが、ポップアップ ウィンドウの操作はあまり適切ではありません。
一部のダイアログ ボックスは、一度ポップアップすると、ユーザーがインターフェイスの他の部分を操作できなくなります。これらはモーダル ダイアログ ボックスと呼ばれます。
console .log はコンソールにログを出力できます。
js の console.log は Java の println に似ており、非常に便利なデバッグ方法でもあります。
JavaScript 変数
var 変数名 = 初期値
js で変数を定義するために型を記述する必要はありません。型を記述しないからといって型が存在しないわけではありません。
むしろ、変数の型は初期化操作の値によって決まります。
js で変数を定義するために使用されるキーワードは、 let のように書くこともできます。
JavaScript の動的型付け
プログラムの実行中に変数の型が変わる可能性があり、この特性を動的特性と呼びます。
プログラムの実行中に変数の型を変更できない場合、その変数は静的型と呼ばれます。
動的型付けの最大の利点は、コードが非常に柔軟であることです。
たとえば、2 つの数値の合計を計算する関数を作成する場合、Java を使用している場合は、加算する 2 つの int、加算する 2 つの double、加算する 2 つの long などを記述する必要がある場合があります。
動的型付け言語では、関数を記述するだけで済みます。
動的型付けの欠点も明らかです。変数が現在どのような型であるか、変数にどのような種類の値が格納され、どのようなメソッドとプロパティが提供されるかが不明です。
JavaScript に組み込まれたいくつかの型:
他の言語では、定義されていないものにアクセスすると、エラーが直接報告されます。
ただし、JS はエラーを報告せず、直接 unknown を返します。
暗黙的な型変換
このコードでは、暗黙的な型変換がトリガーされます。
JSでは、異なる型を比較・演算する場合、可能な限り同じ型に変換しようとします。
もう一つの例：
最終結果も同様です
Java のように暗黙的な型変換をサポートしない言語は、「厳密に型指定された」言語と呼ばれます。
JS のように暗黙的な型変換をサポートできる言語は、「弱い型付け」言語と呼ばれます。
JavaScript では === が導入されます
=== を使用して比較する場合、暗黙的な型変換は実行されません。
JavaScript 配列
どちらも JS で配列を作成する方法です
ただし、一般的には 2 番目のものが使用されます
JS では、配列の要素の型は均一である必要はなく、どのような型でも構いません。！！
これは JS だけでなく、動的型付け言語にも当てはまります。
配列要素を操作するにはどうすればよいですか?
配列の添字の操作
JSの配列は、従来の意味での単なる配列(添字を押すことでしか要素を取得できない)ではなく、「キーと値のペア」の性質を持つものです。
Map + 配列のハイブリッドとして理解するとよいでしょう。このとき、配列は Map のキーと値のペアに従ってデータを編成することもできます。
JS の以降のバージョンでは、キーと値のペアを表す特別なマップが導入されています。
配列の走査:
1.forループを使用する
2. for-each を使用する
3. 2 番目のタイプの for-each
配列への要素の追加 (末尾の挿入)
プッシュメソッドを使用するだけです
配列から要素を削除します。
スプライス方式を使用する
JavaScript関数
関数の構文規則:
括弧内に型を記述する必要はありません (渡した変数が関数内で正常に動作する限り、どのような型でも問題ありません)
未定義と 10 を加算すると、結果は NaN になります。
正式名は Not a Number で、意味は「数字ではありません」です。
ただし、コードはエラーを報告しません。この結果はユーザーの期待を満たしていませんが、エラーは報告されません。
実パラメータの数が仮パラメータの数より少ない場合、追加の仮パラメータの値は定義されません。
仮パラメータが多すぎる場合、追加の仮パラメータは役に立ちません。
つまり、仮パラメータと実パラメータの数が一致しない場合でもエラーは報告されず、可能な限り実行されることになります。
各関数は、実際のパラメータをすべて含む配列である引数変数をカスタマイズします。
引数を使用すると、任意の数の数値を追加できます
JS のような動的型付け言語の場合、「オーバーロード」のような構文は必要ありません
関数式:
まず名前のない匿名関数を定義し、次にその匿名関数を add 変数に割り当てます。
追加変数の型は関数型と呼ばれます。
関数型の変数を呼び出すことができます
JSでは、通常の変数と同じように関数を変数に代入することができ、その関数を別の関数のパラメータとして使用したり、その関数を別の関数の戻り値として使用したりすることもできます（これはできません） Javaでは)
この機能は次のように呼ばれます: 関数は JS の「第一級市民」です
JavaScript の変数のスコープ
コード内の変数にアクセスしたいとき、その変数はどこで見つけますか?
JS はまず現在のスコープを探します。現在見つからない場合は、グローバル スコープまでの上位スコープで探します。それでも見つからない場合は、エラーまたは未定義を報告します。
この構文設定は、Java の変数キャプチャに似ています。
物体
JS はオブジェクト指向プログラミング言語ではありませんが、オブジェクトという概念があります。
これは、JS でのオブジェクトの設定が JAVA でのオブジェクトの設定とは大きく異なることを意味します。
js にはカプセル化、継承、ポリモーフィズム、さらにはクラスすらありません。
js オブジェクトにはプロパティとメソッドがあります (関数は js の第一級市民であるため、メソッドは本質的にプロパティです)
ここでjsのオブジェクトが生成されます
Object を使用してオブジェクトを作成することもできます
js オブジェクトにどのような属性やメソッドがあるかは事前に合意されておらず、いつでも追加できます。
ドム
DOM: ドキュメント オブジェクト モデル。html の各タグを js の対応するオブジェクトにマッピングできます。
ラベルに表示されているものはすべて、js オブジェクトを通じて認識できます。
js オブジェクトは対応する属性を変更します。これはラベルの表示に影響を与える可能性があります
dom を通じて、js コードを使用してページ要素を操作できます。
DOM には多数の API がありますが、ここでは一般的に使用される API のいくつかのみを紹介します。
ページ要素の選択
querySelector (CSS セレクター)
ドキュメントはブラウザ内のグローバル オブジェクトであり、どのページにもドキュメント オブジェクトがあります。
すべての DOM API はドキュメント オブジェクトを通じて拡張されます
複数のボックスがある場合、デフォルトは最初のボックスです。
それらをすべて選択したい場合は、別のメソッドがあります: querySelectorAll() (配列を返します)
イベント
イベントはユーザーの操作に対する応答です。
ユーザーと対話できるようにするには、ユーザーが何をしたかを知る必要があります。ユーザーが行うアクションによっては、ブラウザーでイベントが生成されます。
コードはイベントに反応する必要がある
イベントの 3 つの要素:
1. イベントソース: どの要素がイベントを生成したか
2. イベントの種類: クリック、ダブルクリック、移動、プレス
3. イベントハンドラ：イベント発生後、どのコードを実行するか（実行するコードはすべて事前に設定されています）
フロントエンドページには、イベントのさまざまな処理方法もあり、すべて最初から設定されています。
最も簡単な方法: 要素内で on XXX メソッドを直接使用してイベント ハンドラーをバインドします。
イベント ソース: .box イベント タイプ: onlick イベント ハンドラー: アラート
要素の内容を取得/変更する
まず要素を取得し、innerHTML 属性を使用して要素内のコンテンツを取得します。
このプロパティを変更すると、インターフェイスの表示に影響します。
要素の属性を取得/変更する
html タグの属性も js オブジェクトにマッピングされます。
フォーム要素の属性を取得/変更する
フォーム要素 (input、textarea、select...) には、通常のタグにはない特別な属性がいくつかあります。
value は、ユーザーが要素に入力した値を取得します。
入力に数値を入力すると、ボタンをクリックするたびに数値 +1 が表示されます。
value 属性は文字列です。+1 するだけで文字列に変わります。文字列を整数に変換するには parseInt を使用する必要があります。
スタイル属性の取得/変更
1. コンテンツのスタイルを直接変更する
(style属性の値を変更)
クリックするたびにフォントを拡大するdivを作成します。
スタイル内の属性名は、スパインの名前がキャメルケースに置き換えられることを除いて、CSS の属性名と同じです。
2. 要素に適用される CSS クラス名を変更します
ナイトモードに切り替える
新しい要素を追加する
1. 要素を作成する
2. この要素を dom に配置します
createElement メソッドを使用して要素を作成します
要素の削除
parentElem.removeChild
コード例:
1.Web版の数字を当ててください
1. 1 ～ 100 の範囲の乱数を生成します。
2. ユーザーに数字を入力してもらいます
3. 数値入力の大小関係に基づいてプロンプトを表示する
Math.random を使用して [0,1) の間の乱数を生成します。
この*100に基づいて乱数をNに設定します。このとき、Nの範囲は[0,100)です。
そして、parseInt を使用して小数部分を削除し、最終的に [0,100) の間の整数を取得します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字</title>
</head>
<body>
<div>请输入要猜的数字</div>
<input type="text">
<button>提交</button>
<!-- 使用这个 div 来显示结果 -->
<div class="result">
</div>
<script>
//1、先生成一个随机的整数
let toGuess = parseInt(Math.random() * 100) + 1;
console.log(toGuess);
//2、进行猜数字操作
let button = document.querySelector('button');
let input = document.querySelector('input');
let resultDiv = document.querySelector('.result');
button.onclick = function(){
//取出输入框里的数字
if(input.value == ''){
//用户什么都没有输入
return;
}
let inputNum = parseInt(input.value);
//4、比较大小关系
if(inputNum < toGuess){
//低了
resultDiv.innerHTML = '低了'
}else if(inputNum > toGuess){
//高了
resultDiv.innerHTML = '高了'
}else{
//猜对了
resultDiv.innerHTML = '猜对了'
}
}
</script>
</body>
</html>告白の壁プログラム
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
<style>
/* * 是通配符选择器，是选中也米娜所有元素 */
*{
/* 消除浏览器的默认样式 */
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
width:600px;
margin:20px auto;
}
h1{
text-align: center;
}
p{
text-align: center;
color:#666;
margin: 20px;
}
.row{
/* 开启弹性布局 */
display:flex;
height:40px;
/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;
}
.row span{
width:100px;
}
.row input{
height:30px;
width:200px;
}
.row button{
width: 300px;
height:30px;
color:white;
background-color: orange;
border: none;
border-radius: 5px;
}
/* 点击的时候有反馈 */
.row button:active{
background-color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p>输入内容后点击提交，会将信息显示到表格中</p>
<div class="row">
<span>谁：</span>
<input type="text">
</div>
<div class="row">
<span>对谁：</span>
<input type="text">
</div>
<div class="row">
<span>说：</span>
<input type="text">
</div>
<div class="row">
<button>提交</button>
</div>
</div>
<script>
// 实现提交操作
//点击提交，就能够把用户输入的内容提交到页面上显示
//在点击的时候，获取到三个输入框的文本内容
//创建一个新的 div .row ,把文本内容构造到这个 div 中
let containerDiv = document.querySelector('.container');
let inputs = document.querySelector('input');
let button = document.querySelector('button');
button.onlick = function(){
//1、获取到三个输入框的内容
let from = inputs[0].value;
let to = inputs[1].value;
let msg = inputs[2].value;
if(from == '' || to == '' || msg == ''){
return;
}
//构造新的 div
let rowDiv = document.createElement('div');
rowDiv.className = 'row';
rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
containerDiv.appendChild(rowDiv);
//清空之前的输入框内容
for(let input of inputs){
input.value = '';
}
}
</script>
</body>
</html>