html : 내용
css : 디자인
javascript : 동적 입력 / 디자인
자바스크립트 내부
<!DOCTYPE html>
<html>
<head>
<title>My first javascipt</title>
<script>
document.write("Hello World!");
</script>
</head>
<body>
</body>
</html>자바스크립트 외부
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="playjs.css">
<script src="playjs.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Delicious+Handrawn&family=Fasthand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id ="title">
Play with JS!<script src ="dddd.js"></script>
자바스크립트 인라인
<!DOCYPTE html>
<html>
<body>
<button type ="button" onclick="alert('반갑습니다.')">버튼을 누르세요!</button>
</body>
</html>> document.write() 함수 주의사항
문서가 완전히 로드된 후, 다시 document.write()를 호출하면 문서의 내용이 새로운 내용으로 완전히 재작성됨.
> DOM : Document Object Model
1) 이미지 바꾸기
<img src ="octopus.jpg" id="icon01"/>
(javascript 함수 내부)
var icon = document.getElementById("icon01");
icon.src ="kitty.gif";
2) value 값 바꾸기
<input id ="output" type="text" value="replace me"/>
(javascript 함수 내부)
var textbox = document.getElementById("output");
textbox.value = "Hello World";
주석처리
html : <!-- hello -->
css : /* hello */
js : //hello
함수 선언
function FNAME(parameters){
}
1 ) Anonymous function
var x = function(a,b) { return a*b};
var z = x(4,3);
2 ) 인수전달 / 내장객체 arguments
x = findMax(1, 123,500,115, 44 , 88);
function findMax(){
var i;
var max = -Infinity;
for (i = 0 l i <arguments.length;i++)
{
if (arguments[i] > max){
max = arguments[i];
}
}
return max;
}
3) Popup boxes
onclick ='alert("message")'
onclick = 'confirm("message")' - > 확인 -true 반환 , 취소 -false 반환
onclick ='prompt("message")' -> 글상자 포함 알림창
'2023 1학기 > html.css.javascript' 카테고리의 다른 글
| [html/css] nth-child() / nth-of-type() , display / visibility (0) | 2023.04.05 |
|---|
