<script>태그 사이에 소스를 넣어주면 됨
html 요소들 선택 html 문서에서 각 요소들을 구분하기 위해 사용
ex) type, id, class, name, value
input button id를 설정해 주고 js나 jquery로 해당하는 id에 이벤트를 처리를 줄 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 작성 방법</title>
</head>
<body>
<h3>내부 스크립트 형식 작성</h3>
<script type="text/javascript">
//type="text/javascript" 적어주지 않아도 되지만, 웹 버전에 따라 동작하지 않을 수 있다.
alert("Welcom Javascript World!");
</script>
<hr>
<h3>외부 스크립트 형식 작성</h3>
<script type="text/javascript" src="js/sample.js"></script>
<hr>
<h3>요소의 속성으로 사용</h3>
<!--input button id를 설정해 주고 js나 jquery로 해당하는 id에 이벤트를 처리를 줄 수 있다.
버튼 만들기 형식 : <input type="button" value="버튼에 표시할 내용" javascript/jQuery 이벤트> -->
input type="button"<br>
<input type="button" value="click" onclick="alert('한 번 클릭')"><br>
<input type="button" value="double click" ondblclick="alert('두 번 클릭')"><br>
<input type="button" value="mouse over" onmouseover="alert('마우스 오버')"><br>
<hr>
<!--button tag : 클릭할 수 있는 버튼을 정의하는 태그 -->
button 태그<br>
<button type="button" onclick="alert('button 클릭, 한 번 클릭')">click</button><br>
<button type="button" ondblclick="alert('더블클릭')">double click</button><br>
<button type="button" onmouseover="alert('마우스 오버')">mouse over</button><br>
<hr>
<button type="submit" value="전송">전송</button><br>
<button type="reset" value="초기화">초기화</button><br>
</body>
</html>
간단한 입출력 방법
입력 -> 자바 Scanner
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 기본 입출력</title>
</head>
<body>
<h3>출력하기</h3>
<p>
1. 알림창(경고창) alter()<br>
2. 콘솔창 : console.log()<br>
3. HTML 문서 내 : document.write()<br>
</p>
<hr>
<h3>1. 알림창(경고창) alter()</h3><br>
<script type="text/javascript">
//형식) alter("메세지",변수, 수식);
alert("안녕하세요");
alert("1+2 = " + (1+2));
var a = "ㅎㅇ";
alert(a);
</script>
<hr>
<h3>2. 콘솔창 : console.log()</h3>
<p>브라우저 내에서 소스코드의 오류를 발견하거나 변수값(간단한 연산)을 확인할 수 있는 창.(디버깅용)<br>
단축키 Ctrl + Shift + J 또는 F12<br>
HTML tag(태그)를 넣어서 사용할 수 없음.<br>
</p>
<script type="text/javascript">
//형식) console.log("메시지", 변수, 수식);
console.log("안녕하세요");
console.log("1+2 = " + (1+2));
console.log("1+2 = " , (1+2));
var b = 'ㅎㅇ';
console.log(b);
</script>
<hr>
<h3> 3. HTML 문서 내 : document.write()</h3>
<p>
HTML 문서 내에 출력한다.<br>
HTML tag(태그)를 넣어서 사용할 수 있음.<br>
</p>
<script type="text/javascript">
document.write("안녕하세요<br>");
document.write("1+2 = " + (1+2)+"<br>");
document.write("1+2 = " , (1+2)+"<br>");
var c = 'ㅎㅇ';
document.write(c+"<br>");
// document.write("<h3> \<h3\> h3 tag 적용해서 출력</h3>") → html 특수문자로 처리해야함
document.write("<h3> <h3> h3 tag 적용해서 출력</h3>")
</script>
</body>
</html>
'KDT > JavaScript' 카테고리의 다른 글
| 240125 자바스크립트 (0) | 2024.01.25 |
|---|---|
| 240124 자바스크립트 (0) | 2024.01.24 |
| 240122 자바스크립트 (0) | 2024.01.22 |
| 240119 자바스크립트 (0) | 2024.01.19 |
| 240115 자바스크립트 (0) | 2024.01.15 |