반응형
onclick 사용법
onclick="alert();"
<button type="button" onclick="alert('Hi');">
Click me
</button>
<button type="button" onclick="alert(1+1);">
Click me
</button>각 Button에 대해 클릭 했을 시 무엇이 팝업창에 뜰지 지정 가능
Hi 라는 메세지와 (1+1) 즉 숫자 2를 팝업창에 띄움
onclick="console.log();"
<button type="button" onclick="console.log('Hi');">
Click me
</button>
<button type="button" onclick="console.log(2+2);">
Click me
</button>console.log 코드를 이용해 크롬 콘솔창에 저장 가능
이 두개의 코드를 동시에 이용 가능
<button type="button" onclick="alert('Hi'); console.log(2+2);">
Click me
</button>Hi 를 팝업창에 띄우면서 콘솔창에 정보르 저장 가능
<script> 코드 사용
<button type="button" onclick="sayHi();">
Click me
</button>
<script>
function sayHi(){
alert("Hi");
}
</script>버튼을 클릭 했을 시 sayHi() 라는 코드를 불러옴
<script> 를 이용해서 sayHi 코드를 코딩 가능
<script> 코드는 <head>든 <body>든 어디든 사용 가능
.js 파일 사용
<script type="text/javascript" src="js/myscript.js"></script>
JavaScript 를 이용해서 값 변경
<button type="button" onclick="changeToFrench();">
Click me to change the text to French
</button>
<span id="french">Hi there!</span>
<script>
function changeToFrench(){
document.getElementById("french").innerHTML = "Salut!";
}
</script>Id가 french여서 같은 Id 이므로
단순히 버튼을 클릭하면 Hi there! 이 Salut! 으로 바뀌어서 표시됨
JavaScript 를 이용해서 스타일 변경
<button type="button" onclick="changeHelloWorldStyle();">
Click me to change the style of the text
</button>
<span id="hello">Hello world</span>
<script>
function changeHelloWorldStyle(){
var e = document.getElementById("hello");
e.style.color = "orange";
e.style.fontSize = "30px";
e.style.fontStyle = "italic";
}
</script>Id "hello" 에 속한 모든 값을 설정한 스타일으로 변경
JavaScript 를 사용 할 시 유의할점
1. 항상 var 코드를 사용해서 값을 부여할 것
2. number, string , boolean 등 항상 데이터의 속성을 잘 판단할 것
JavaScript 날짜, 시간, 초 표시
var d = new Date();
var d = new Date(millisec);
var d = new Date(dateString);
var d = new Date(year, month, day, hour, min, sec, millisec);
var d = new Date(86400000);
alert(d); //02 Jan 1970 00:00:00 UTC
var d = new Date(dateString);
//using YYYY-MM-DD format
var d = new Date("2000-01-30");
alert(d);
//using YYYY-MM-DDTHH:MI:SS
var d = new Date("2000-01-30T10:00:00");
alert(d);
var d = new Date(2000, 0, 1); // 01 Jan 2000
alert(d);
서로 다른 타입의 데이터도 하나로 표시 가능
var info = ["John", new Date("1996-01-20"), "CSCI204", 85];
alert(info); //John,Sat Jan 20 1996...,CSCI204,85
alert(typeof info); //object
Array
var subjects = ["ISIT206", "MATH121", "CSCI301"];
subjects[1] = "LOGIC101"; //change the content of item 1
subjects[3] = "LAW201"; //add new item 3
alert(subjects[0]); //ISIT206
alert(subjects[1]); //LOGIC101
alert(subjects[2]); //CSCI301
alert(subjects[3]); //LAW201
Array 의 길이 알아보기
var subjects = ["ISIT206", "MATH121", "CSCI301"];
subjects[1] = "LOGIC101";
subjects[3] = "LAW201";
// loop through an array
for(var i = 0; i < subjects.length; i++){
alert(subjects[i]);
}
반응형
'코딩 > HTML' 카테고리의 다른 글
| [HTML] 리뷰 (0) | 2024.05.10 |
|---|---|
| [HTML] 자바 스크립트 응용 (Form 태그, (0) | 2024.04.22 |
| [HTML] 입문 ( li태그, ul태그, ol태그, dl태그, table태그 ) (0) | 2024.04.10 |
| [HTML] CSS 입문 (0) | 2024.04.09 |
| [HTML] Form 을 배워보자 (0) | 2024.04.09 |