220419)Js特別講座
李在元社長.
Webを操作可能にする言語.
htmlを使用してuiの を作成 css非表示 jsは機能開発終了後の である.
htmlタグにjs機能のフォーマットコードを追加するとメンテナンスが困難になります.
したがって、この場合、
関数を使用してコードを完了することを推奨します.
モードウィンドウを開く、閉じるコード
パラメータ取得値はnone,blockで置換された部分のみで処理できる.
もし2つのモデル矛があれば、さらに多くの存在があるのだろうか.
上記の例ではhtmlのonclickプロパティを使用してclickを制御する場合の操作を示します.
これによりhtmlにjsを挿入するとメンテナンス効率が低下する可能性があります.
mouseover、submit、clickなどのUI制御イベントが複数存在します.
eventとコールバック関数を使用します.
https://jenny-daru.tistory.com/17
ボタンをクリックすると、
1.JavaScriptを使用して入力ラベルを追跡する
2.タグの入力値を入力し、変数に含める
3.出力変数 idを選択 クラスの選択
配列の性質があり、順序を表す[i]に指定すべきである. css-セレクタ構文を受信し、対応する要素として選択
pseudo code:韓国語
ユーザーは値を入力していません.
スペースまたはすべての条件を入力します.
Javascript
Webを操作可能にする言語.
1.jsを使用して画面uiを置き換える方法
.~の=代入演算子.左港に右港を代入する価格.2.jsを使用してuiにアクセス
<body>
<!-- 선택자로 접근 -->
<div class="container">
<h1 id="fastcampus">안녕하세요</h1>
<script>
document.getElementById('fastcampus').innerHTML = "안녕 못한대?";
//문서의 fastcampus라는 id를 갖고있는 엘리먼트의 html내부를 안녕못한대로 바꿔줘
</script>
</div>
</body>3.Onclickを使用してjsアクションを接続する（モードウィンドウを作成）
<body>
<!-- 모달창 -->
<div class="container">
<div id="alertBox">
모달창임
</div>
<button class="alertButton" onclick=" document.getElementById('alertBox').style.display='block'">
모달창
</button>
</div>
</body>3-1)関数に機能を含める
htmlタグにjs機能のフォーマットコードを追加するとメンテナンスが困難になります.
したがって、この場合、
関数を使用してコードを完了することを推奨します.
함수 선언자 + 함수명
ex) function 모달창열어줘(){
실행할 코드 ;
}<body>
<!-- 모달창 -->
<div class="container">
<div id="alertBox">
모달창임
</div>
<button class="alertButton" onclick="모달창열기()">모달창</button>
<script>
function 모달창열기(){
document.getElementById('alertBox').style.display = 'block'
}
</script>
</div>3-2）パラメータを受け入れ、重複を避ける
モードウィンドウを開く、閉じるコード
document.getElementById('alertBox').style.displayは共通です.パラメータ取得値はnone,blockで置換された部分のみで処理できる.
<div id="alertBox">
<p>
알림창임!
<br>
<span onclick="모달창여닫기('none')">이거 누르면 꺼짐</span>
</p>
</div>
<button class="show-alert" onclick="모달창여닫기('block')">알림창을 보여줘!</button>
<script>
function 모달창여닫기(열거나닫거나) {
document.getElementById('alertBox').style.display = 열거나닫거나;
}
</script>3-3）パラメータを追加して重複をさらに減らす
もし2つのモデル矛があれば、さらに多くの存在があるのだろうか.
<body>
<div id="alertBox">
<p>
나는 첫번째 모달임!
<br>
<span onclick="모달창여닫기('alertBox', 'none')">이거 누르면 꺼짐</span>
</p>
</div>
<div id="alertBox2">
<p>
나는 두번째 모달임!
<br>
<span onclick="모달창여닫기('alertBox2', 'none')">이거 누르면 꺼짐</span>
</p>
</div>
<button class="show-alert" onclick="모달창여닫기('alertBox', 'block')">첫번째 모달 보여줘!</button>
<button class="show-alert" onclick="모달창여닫기('alertBox2', 'block')">두번째 모달 보여줘!</button>
<script>
function 모달창여닫기(무엇을, 열거나닫거나) {
document.getElementById(무엇을).style.display = 열거나닫거나;
}
</script>
</body>3-4)曖昧なウィンドウを1つだけ作成し、字を変えるだけで繰り返し使用できる
<body>
<div id="alertBox">
<p id="title">
나는 첫번째 모달임!
</p>
<button>이거 누르면 꺼짐</button>
</div>
<button class="show-alert" onclick="모달창열기('나는 첫번째 모달임!')">첫번째 모달 보여줘!</button>
<button class="show-alert" onclick="모달창열기('나는 두번째 모달임!')">두번째 모달 보여줘!</button>
<script>
function 모달창열기(내용) {
document.getElementById('alertBox').style.display = 'block';
document.getElementById('title').innerHTML = 내용;
}
</script>
</body>4. Event - cb
上記の例ではhtmlのonclickプロパティを使用してclickを制御する場合の操作を示します.
これによりhtmlにjsを挿入するとメンテナンス効率が低下する可能性があります.
mouseover、submit、clickなどのUI制御イベントが複数存在します.
eventとコールバック関数を使用します.
https://jenny-daru.tistory.com/17
4-1)ユーザの入力値を受信し、結果の出力を試みる
ボタンをクリックすると、
1.JavaScriptを使用して入力ラベルを追跡する
2.タグの入力値を入力し、変数に含める
3.出力変数
cf) 변수
var : 전역 혹은 함수 단위의 접근성.
let : 블록 단위의 접근성.
const : let과 동일하나 const로 선언된 변수는 바꿀 수 없음. 상수개념.<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<input class="target" type="text">
<button id="submitBtn" class="submitBtn">제출</button>
<div id="result">
</div>
</body>
</html>getElementById:パラメータの値であるIDを持つ要素を返します. document.getElementById("submitBtn").addEventListener("click", function(){
var 사용자가입력한값 = document.querySelector(".target").value;
console.log("value : ", 사용자가입력한값)
})getElementsByClassName[i]:パラメータ値がclassの複数の要素を返します.配列の性質があり、順序を表す[i]に指定すべきである.
document.getElementsByClassName("submitBtn")[0].addEventListener("click", function(){
var 사용자가입력한값 = document.querySelector(".target").value;
console.log("value : ", 사용자가입력한값)
})querySelector:css-selector構文を受信し、対応する要素を返します.querySelectorAll[i]:多因子 <script>
document.querySelector(".submitBtn").addEventListener("click", function(){
var 사용자가입력한값 = document.querySelector(".target").value;
console.log("value : ", 사용자가입력한값)
})
</script>5.検証（ユーザーが値を入力したかどうかを確認）
pseudo code:韓国語
//pseudo code 1딘계
document.querySelector(".submitBtn").addEventListener("click", function(){
var 사용자가입력한값 = document.querySelector(".target").value;
1. 사용자가 값을 입력하지 않고 버튼 누르면 안되는데
2. 그럼 사용자가 값을 입력했는지 체크하고
3. 입력했으면 콘솔 찍고
4. 입력하지 않았으면 alert창 뛰어야겠다.
})//pseudo code 2단계
document.querySelector(".submitBtn").addEventListener("click", function(){
var 사용자가입력한값 = document.querySelector(".target").value;
if(사용자가입력한값이 있음?){
있으면 이 코드를 실행시켜줘
} else {
공백이 아니라면 이 코드를 실행시켜줘
}
})<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<input class="target" type="text">
<button id="submitBtn" class="submitBtn">제출</button>
<div id="result">
</div>
<script>
document.querySelector(".submitBtn").addEventListener("click", function(){
var 사용자가입력한값 = document.querySelector(".target").value;
if(!사용자가입력한값){
alert("값 입력하세요")
} else {
console.log(사용자가입력한값)
}
})
</script>
</body>
</html>5-1)ユーザーがスペースしか入力していない場合は?
document.querySelector(".submitBtn").addEventListener("click", function(){
var 사용자가입력한값 = document.querySelector(".target").value;
if(사용자가입력한값 == " "){
alert("공백 입력 ㄴㄴ")
} else {
console.log(사용자가입력한값)
}
})ユーザーは値を入力していません.
スペースまたはすべての条件を入力します.
document.querySelector(".submitBtn").addEventListener("click", function(){
var 사용자가입력한값 = document.querySelector(".target").value;
if(!사용자가입력한값.trim()){
alert("공백 입력 ㄴㄴ")
} else {
console.log(사용자가입력한값)
}
})Reference
この問題について(220419)Js特別講座), 我々は、より多くの情報をここで見つけました https://velog.io/@oching/220419-Js특강テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol