Chap 1. JavaScriptの概要
67694 ワード
JavaScript
JavaScriptの作成方法
インライン方式
<!--태그 내에 자바스크립스 생성-->
<button onclick="javascript:alert('hello');">클릭</button>
<!--태그 내에 자바스크립트 함수 연결-->
<button onclick="myClick();">클릭</button>
<script>
function myClick(){
alert("성공");
};
</script>ないぶモード
<!--요소(태그) 밑에 작성하는 방식-->
<button id="btn1">클릭</button>
<script>
document.getElementById("btn1").onclick = function() {
alert("성공1");
};
</script>
<!--window.onload를 이용한 방식-->
<script>
window.onload = function() {
document.getElementById("btn2").onclick = function() {
alert("성공2")
};
};
</script>
<button id="btn2">클릭</button>がいぶモード
/*js 외부 파일 경로 : js/test.js */
window.onload = function () {
document.getElementById("btn1").onclick = function () {
alert("성공");
};
};
<script src="js/test.js"></script>
<button id="btn1">클릭</button>データ出力関数
意味ドキュメントを区別します.write(コンテンツ)ブラウザ画面の対応するコンテンツ出力ウィンドウ.alert(内容);メッセージ通知ウィンドウからinnerText=コンテンツinnerHTML=コンテンツを出力する.タグ別名の内容(タグ間の値)を変更して出力 - innerText文字列で出力(Text) - innerHTMLは、HTMLタグ形式でコンソールを出力します.ログ(内容);開発者ツールのコンソール画面に出力 - 特定のオブジェクトの内部を表示する場合は、コンソールから表示できます.
document.write();
<script>
function test() {
var table = " <table border='1px'>" +
"<tr> " +
"<th>이름</th>" +
"<th>나이</th>" +
"<th>주소</th>" +
" </tr>" +
"<tr>" +
"<td>임꺽정</td>" +
"<td>20</td>" +
"<td>경기도</td> " +
"</tr>" +
"</table>";
document.write(table);
}
</script>
<button onclick="test();">테이블 생성</button>alert();
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick = function() {
alert("alert을 이용하여 출력");
};
</script>innerText=内容;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div {
border: 1px solid red;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="div"></div>
<input type="text" id="input">
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick = function() {
var input = document.getElementById("input");
var div = document.getElementById("div");
/* 이전 내용 + 추가된내용 + 줄개행 추가*/
div.innerText = div.innerText + input.value + "\n";
/*input 박스 내용 초기화*/
document.getElementById("input").value=" ";
};
</script>
</body></html>innerHTML=コンテンツ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div {
border: 1px solid red;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="div"></div>
<input type="text" id="input">
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick = function() {
var input = document.getElementById("input");
var div = document.getElementById("div");
/* 이전 내용 + 추가된내용 + 줄개행 추가*/
div.innerHTML = div.innerHTML + input.value + "</br>";
/*input 박스 내용 초기화*/
document.getElementById("input").value=" ";
};
</script>
</body></html>console.log() ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text" id="input">
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick = function() {
var input = document.getElementById("input").value;
console.log(input);
};
</script>
</body></html>データ入力を受信する関数
関数の内容は、「値」ウィンドウに戻ります.≪確認｜Confirmation｜ldap≫(コンテンツ)-質問に対して「≪はい/いいえ｜Yes/No｜ldap≫」の結果を取得するために使用されるダイアログ・ウィンドウ:メッセージ、確認/キャンセルボタン表示(真)/キャンセル(偽)ウィンドウ.ヒント(内容)-ダイアログウィンドウ:テキストフィールド、確認/キャンセルボタン入力のメッセージ内容入力=「text」+innerHTML使用状況-入力タグの値を入力または入力
window.confirm() ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick = function() {
var result=window.confirm("당신이 바보이면 확인을 눌러주세요")
if(result==true){
alert("바보래요~~!")
}else{
alert("거짓말!")
}
};
</script>
</body></html>window.ヒント(内容)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="print" style="width:300px; height:200px; border:1px solid red"></p>
<button onclick="test();">클릭</button>
<script>
function test() {
var name = window.prompt("당신의 이름은");
var age = window.prompt("당신의 나이는?")
var addr = window.prompt("당신의 주소는?");
var print = document.getElementById("print");
print.innerHTML = print.innerHTML + name + "/" + age + "/" + addr + "</br>";
};
</script>
</body></html>input=“text”+innerHTML；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="print" style="width:300px; height:200px; border:1px solid red"></p>
<input type="text" id="data">
<button onclick="input();">입력</button>
<button onclick="rest();">초기화</button>
<script>
function input() {
var data = document.getElementById("data");
var print = document.getElementById("print");
print.innerHTML += data.value + "</br>"
document.getElementById("data").value = "";
};
function rest() {
var print = document.getElementById("print");
print.innerHTML = "";
};
</script>
</body></html>HTMLタグアクセス関数
関数の意味getElementById(「ID名」)タグのID属性値を使用してタグ別名オブジェクト情報を取得する(1つ)getElementsByName(「名前」)タグのname属性値を使用してタグ別名のオブジェクト情報を配列に配置してgetElementsByTagName(「タグ名」)を取得するタグ名を使用して、タグのオブジェクト情報を配列に挿入します.
getElementsByName,getElementsByTagName関数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span name="fruits">사과</span><br>
<span name="fruits">배</span><br>
<span name="fruits">바나나</span><br>
<span name="person">홍길동</span><br>
<span name="person">고길동</span><br>
<span name="person">둘리</span><br>
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick=function(){
//getElementsByName() 함수 이용
var elements =document.getElementsByName("fruits");
//getElementsByTagName() 함수 이용
/*var elements =document.getElementsByTagName("span");*/
for(var i=0; i<elements.length;i++){
console.log(elements[i].innerHTML);
};
};
</script>
</body>
</html>CSS(style)へのアクセス
EX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#print {
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id="print"></p><br>
<button id="red">빨강</button>
<button id="yellow">노랑</button>
<button id="blue">파랑</button>
<script>
document.getElementById("red").onclick = function() {
document.getElementById("print").style.backgroundColor = "red";
};
document.getElementById("yellow").onclick = function() {
document.getElementById("print").style.backgroundColor = "yellow";
};
document.getElementById("blue").onclick = function() {
document.getElementById("print").style.backgroundColor = "blue";
};
</script>
</body></html>Reference
この問題について(Chap 1. JavaScriptの概要), 我々は、より多くの情報をここで見つけました https://velog.io/@woody_/Chap-1.-JavaScript-개요テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol