[JS]HTMLとJSの関係、データ型、条件文、書き換え、タイリング、繰り返し文

20474 ワード
Event Conditionals loop console script variable refactoring assignment operators array テキストリンク
出典:ライフコードJavaScript

Javascript


HTML言語:プログラミング言語Xで、画面に時間順に表示する必要はありません.
Javascript言語:プログラミング言語.時間順に設計すべきです.ダイナミックな特徴があります.

HTMLとJSの出会い-scriptタグ

<script>
document.write(1+1);
</script>
以上のコード値は画面入力2です.自動計算

HTMLとJSの出会い-イベント(Event)


event(イベント):Webブラウザで発生するイベントex)onclick,onchange,onkeydown
ex)複数のイベントの作成
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down')">
onclick、onchange、onkeydown:これらのプロパティのプロパティはjsでなければなりません.onclickが存在するタグをクリックすると、jsコードはjs構文に従って作成され、Webブラウザで使用されます.
キーをクリックするとイベントが発生します.
->Javascript keydown eventプロパティとして検索可能

HTMLとJSの面会-コンソール


右カーソル-チェック-コンソール使用可能
console.length:文字数を示すコマンド.
alert(「文字」.length)
これでコンソールに書くと自動的に計算されます.

Data types - Strings and numbers


コンソール内では、数値は自動的に計算されます.
算術演算子タグ:-+*/
string文字列->javascript string.
ex)
'hello world'.length
'hello workd'.toUpperCase()
1:注意数字「1」:文字列!
1+1=2“1”+“1”=11.
データ型を正しく表現!

変数と代入演算子


i=1
iは変数(定数とは逆)を表し、=代入演算子を表す.

適用


ex)nightボタンとdayボタンの作成
<body>
<input type="button" value="night" onclick="">
onclickにjsコードを挿入する必要があります.bodyラベルのスタイルプロパティは、プログラミング上、インタラクティブに入れようとします.
Webブラウザがjsの構文に基づいてこのマスタータグを選択していることを確認してください.
つまり、jsで「cssの選択者」を使ってtagを選択したいと思います.
->javascript select tag by css selector検索可能
-> .querySelector()
スタイルで背景色を変更する場合
->javascript element style検索!
->.style
javascript script background color
->.backgroundColor=""2
<input type="button" value="night" onclick="document.querySelector('body').style.backgroudColor='black'" >

比較演算子とブール演算子

<script>
document.write(1===1);
</script>
上のコードは「true」値を出力します.==比較演算子または2つの演算子(左、右の結合による結果)と呼ばれます.
Boolean:trueまたはfalseのみのデータ型
<h3>1&1t;2</h3>
<script>
document.write(1<2);
</script>
1<2
true
画面に出力します.
> : > (greater than)

条件文


条件文:条件に基づいて異なる順序の機能を実行する
if(true or false、bulleon data type).{a} else {b}
ブール値によって実行される値が異なります.
ex)dayボタンをクリックして夜間モードに切り替えます
<input id = "night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value==='night'){
document.querySelector('body').style.backgroudColor='black'
document.querySelector('body').style.color='white'
document.querySelector('body').value='day'} else {document.querySelector('body').style.backgroudColor='white'
document.querySelector('body').style.color='black'
document.querySelector('body').value='night'}">
value値の検索->JavaScript get value要素の検索

再構築-重複除外


Refactoring:コード自体を効率的に作成し、コードの可読性を向上させ、メンテナンスを容易にし、重複コードを低減し、コードを再改善します.
ex) document.querySelector('#night_day').valueはこれで置き換えられます.
変数を使用すると、より簡単に削減することもできます.
var target = document.querySelector('body')
var target = document.querySelector('body')

<input type="button" value="night" onclick="
if(this.value==='night'){
target.style.backgroudColor='black'
target.style.color='white'
this.value='day'} else {target.style.backgroudColor='white'
target.style.color='black'
this.value='night'}">

はいれつ


配列(array):データ量が多く、大量のデータを格納できないため、データに関連付けられたデータを整理して入れる受信ボックス.

配列の構文

<script>
var coworkers=["egoing", "hydduru"]
</script>

<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
配列の数を知りたい場合->JavaScript array count検索
document.write(coworkers.length);
配列にデータを追加するには、->JavaScript array count
coworkers.push("hani")

ループ


ex)リスト1～4のうち2、3を3回繰り返したい場合
<script>
document.write('<li>1</li>')

var i = 0 
while (i<3){
document.write('<li>2</li>');
document.<write('<li>3</li>');
i=i+1;}
document.write('<li>4</li>');</script>

アレイと繰り返し文

<script>
var coworkers=['egoing','leezche','duro','taeho'];
</script>

<ul>
  <script>
  var i = 0
  while(i<4){ document.write('<li>'+coworkers[i]+'</li>')}
  i=i+1
  </script>
</ul>
ex)リストにリンクを追加する場合
while(i<4){ document.write('<li><a href = "http://a.com/'
+coworkers[i]+'">+coworkers[i]+'</a></li>')}
write()内には5つのデータが+で接続されています.
'+同僚[i]+'->メールで書くからプラス
JavaScriptでstringを処理するには、二重引用符「」または一重引用符「」を使用することを覚えておいてください.

配列と重複文の使用


ex)夜間モードでリンクを明るくする
すべてのタグ値を選択する構文の検索->javascript get element by cssセレクタmultiple
コンソール内
var alist = document.querySelectorAll('a');
console.log(alist.length)
cosnsole.log(alist[0])
こう書くと、それぞれ結果が出ます.
すなわち、if文に次のコードを追加します.
var alist = document.querySelectorAll('a');
i=0
while(i<alist.length){
                      alist[i].style.color='powderblue';
                      i = i+1}
詳細
タイトルに基づいてリンク色を変更する場合は、->条件が多様であればelse ifを使用します.
var alist = document.querySelectorAll('a')
if (document.title === "My_Coding_Diary")
{alist[1].style.color = 'black'}
else if (documenet.title === "Programming")
{alist[2].style.color = 'black'}
else if (documenet.title === "Diary")
{alist[2].style.color = 'black'}
->if内にifを入れることができます!
Asp.Net MVCのControllers
SQLサブクエリの使用方法