[開発ログ3月24日][パブリックトレーニング-Webベース]JavaScript 2/3-イゴール講師
1.勉強の内容
メモの内容
<h1 style="border-bottom:10px solid
green;">css dinerゲームホームページ...ほほほ
ctrl + alt + ,
現在の設定
→VIEWメニュー→Command
Lorem Picsum:Lorem(ランダムテキストなしで作成)+Picsum:画像の作成
→引き続きhttps://picsum.photos/200/300に入り、画像の変化に伴って出力
背景-画像サンプルチュートリアルサイト
h1{
border-bottom:10px solid red !important;なんてことだ
<style>
body{
background-image :url(http://picsum.photos/1024);
background-size:cover→urlに他の画像ページを設定し、背景として適用する
→http://picsum.photos/1024ページ、画像はずっと変換されて、背景に入るたびに、背景はどんどん変換されます!
なんてことだ
style.cssは新しく作成されたファイルです.
body{
background-image :url(http://picsum.photos/1024);
background-size:cover
}
h1{
border-bottom:10px solid red !important;
}
#container{
display:grid;
grid-template-columns: 200px 2fr;
}そして復習htmlの
<link rel="stylesheet" href="style.css">→関連写真
→review 3のページにスタイルを自動的に反映!
→このまま!(更新するたびにバックグラウンドが変更されます)
<input type="button" value="night" onclick="" onmouseover="alert('hi')">他にもkeydown、keyupなど10個
start the generatorボタンをクリックして色のサイトをランダムに表示
→スペースキーでランダムに変更
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';なんてことだ
index buttonコントロール(flow control)
<body>
<input type="button" id="dnbtn" value="Night" onclick="
let button = document.querySelector('#dnbtn')
if (button.value==='Night'){
document.querySelector('body').style.
backgroundColor='black';
document.querySelector('body').style.color='White';
button.value='Light'
} else {
document.querySelector('body').style.
backgroundColor='white';
document.querySelector('body').style.color='black';
button.value='Dark'
}
"><input type="button" id="dnbtn" value="Night" onclick="let button = document.querySelector('#dnbtn')if (button.value==='Night'){
document.querySelector('body').style.
backgroundColor='black';
document.querySelector('body').style.color='White';
button.value='Light'}→そしてbody styleでフォント色を「white」に設定
→buttonのvalueをライトに変更する
else {
document.querySelector('body').style.
backgroundColor='white';
document.querySelector('body').style.color='black';
button.value='Dark'}<条件文、条件文>の使用
→ある条件を満たすと、ある結果が出る
<繰り返し文、loop文>
→条件が満たされている場合は繰り返し実行する
Boolean比較演算子が必要です!(演算子とともに使用)
数字は無限の具体的なデータです
文字は限られた具体的なデータです
Booleanには2つの具体的なデータしかありません(真/偽)
Boolean演算子には比較演算子、論理演算子があります
比較演算子:
==:ほぼ同じ(例外が多いので3つ推奨)
本当に同じ
!== : 違い(否定)
(「=========差異」を参照)
なんてことだ
login機能(login html)
prompt(「id?」と入力すると、プロンプトウィンドウが開きます.
let button = this;
thisに変更した場合、id(写真)を指定する必要はありません.
this:トリガイベントへのタグ
→これをalterの写真として使う
→コンソールとしてthisを使用した写真
なんてことだ
配列は相互に関連付けられたデータパケットに名前を付けます.
→目的:整理(aに関する写真)
なんてことだ
Live Server機能(ダウンロード)
サーバをダウンロードせずにサーバを使用
編集内容をリアルタイムで反映
→Live Serverのインストール方法
→右クリックでLive Serverを実行し、図のように「Open with Live Server」を実行する
→実行後、単独で保存しなくても、変更時にページが自動的に変更されて出力されます!(ヒント)
なんてことだ
<loop.htmlコンテンツ>
Array:アレイ
注目すべき情報が多すぎると、めちゃくちゃだと思います.
→集合(似たようなもの)→そこに命名→後に新しいものができたら、それに合った箱に入れる→群集化(似たようなものを一緒に置く)/分類(適当な箱に入れる)
各値(10、20、30)は「要素」(element)です.
重要!!<ループ(Loop)>
console.log(1);
for(let i=0; i<3; i=i+1){console.log(2);
console.log(3);}
console.log(4);
→最初はコンソール.log(1)実行→i>3の前に、iを1ずつ増やします.
console.log(2)とコンソール.log(3)出力
→for文が終わったら、最後はconsole.終了時にlogを出力(4)
なんてことだ
Webページのすべてのaを取得するとき
document.querySelectorAll(‘a’)
→ NodeList(4) [a,a,a,a]
→原理を利用してページ上のすべてのliタグ(明日の学習内容)を変更する
なんてことだ
タグ優先度
なんてことだ
2.学習内容の難点または未解決の問題
3.ソリューションの作成
4.勉強の心得
Reference
この問題について([開発ログ3月24日][パブリックトレーニング-Webベース]JavaScript 2/3-イゴール講師), 我々は、より多くの情報をここで見つけました https://velog.io/@pjj2059/개발일지-3월-24일-공통교육-웹기초-JavaScript-23-이고잉-강사-054v51dyテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol