exam17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function insertQuestion(num) {
alert(num);
var str = prompt("사칙연산의 수식을 입력하세요. (예: 100+50)", "");
var answer = eval(str); //입려받은 문자열을 수식으로 변환
var result = "<font color='red'>" + str + " = " + answer + "</font>";
document.getElementById("question").innerHTML = result;
}
</script>
</head>
<body onload="insertQuestion(222)">
<script type="text/javascript">
insertQuestion(111);
</script>
<h1 id="question"></h1>
</body>
</html>
처리순서를 잘 봐야한다.
1. script 태그는 그냥 쭉 훑고 내려온다
2. body 태그의 insertQuestion(111); 함수를 만난다.
3. 그러면 script에 있는 함수를 실행하게 된다.
4. 하지만 아직 id가 question인 곳이 없기 때문에 error가 뜨게 된다.
exam18.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function doPrint(num) { // 구현
var msg = "doPrint()가 " + num + "회 실행되었습니다.";
alert(msg);
document.getElementById("myid").innerHTML = msg;
}
doPrint(1); //호출
</script>
</head>
<body>
<script type="text/javascript">
doPrint(2) //호출
</script>
<h1 id="myid">안녕하세요.</h1>
<script type="text/javascript">
doPrint(3) //호출
</script>
</body>
</html>
안녕하세요를 덮어버린다는 거 확인 !!!
exam19.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#myid {
background: #ff0;
font-size: 20px;
font-weight: bold;
color: #00f;
}
</style>
</head>
<body>
<h1 id="myid">안녕하세요.</h1>
<h1 id="myid">자바스크립트입니다.</h1>
<h1 id="myid">강의 참 재미있죠?</h1>
<a href="#" onclick="doPrint()">자바스크립트 함수 호출하기</a>
</body>
</html>
[ getElementById ]
<body>
<h1 id="myid">안녕하세요.</h1>
<h1 id="myid">자바스크립트입니다.</h1>
<h1 id="myid">강의 참 재미있죠?</h1>
<a href="#" onclick="doPrint()">자바스크립트 함수 호출하기</a>
<script type="text/javascript">
//id가 myid인 태그에 "스크립트가 실행되었습니다."로 바꾸기
//가장 먼저 만나는 id속성만 값을 인식한다. 중복 id를 인식하지 못한다.
document.getElementById("myid").innerText = "스크립트가 실행되었습니다.";
</script>
</body>
가장 먼저 만나는 id속성만 값을 인식한다. 중복 id를 인식하지 못한다.
[ querySelector ]
document.querySelector("#myid").innerText = "스크립트가 실행되었습니다.";
- document.getElementById("myid"):
- 이 방법은 특정 ID를 가진 요소를 선택하는 데 사용된다.
- getElementById는 ID 값이 유일해야 하는 규칙에 따라 동작하며, 문서에서 해당 ID를 가진 요소를 직접 반환한다.
- document.querySelector("#myid"):
- 이 방법은 CSS 선택자(Selector)를 사용하여 요소를 선택한다.
- querySelector는 첫 번째로 일치하는 요소 하나만 반환한다. 따라서 동일한 ID를 가진 요소가 여러 개 있어도 첫 번째 요소만 선택된다.
속성 class="" 로 지정된 Element 얻어오기
1.getElementsByClassName()
- HTMLCollection 타입 리턴
CSS 선택자를 이용하여 지정된 Element 얻어오기
1. querySelector()
- 1개
- 파라메터로 CSS 선택자를 넣어준다.
2. querySelectorAll()
- 여러개
- 파라메터로 CSS 선택자를 넣어준다.
- NodeList 타입 리턴
[ getElementsByClassName ]
exam19-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myid {
background: #ff0;
font-size: 20px;
font-weight: bold;
color: #00f;
}
</style>
</head>
<body>
<h1 class="myid">안녕하세요.</h1>
<h1 class="myid">자바스크립트입니다.</h1>
<h1 class="myid">강의 참 재미있죠?</h1>
<a href="#" onclick="doPrint()">자바스크립트 함수 호출하기</a>
<script type="text/javascript">
</script>
</body>
</html>
<script type="text/javascript">
function doPrint() {
var myTags = document.getElementsByClassName("myid");
alert(myTags);
}
</script>
myTags가 여러개이므로 배열처럼해서 호출하면 된다.
<script type="text/javascript">
function doPrint() {
var myTags = document.getElementsByClassName("myid");
alert(myTags);
for(var i=0; i<myTags.length; i++){
myTags[i].innerText = "스크립트가 실행되었습니다.";
}//for
}
</script>
[ querySelector ]
exam19-2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myid {
background: #ff0;
font-size: 20px;
font-weight: bold;
color: #00f;
}
</style>
</head>
<body>
<h1 class="myid">안녕하세요.</h1>
<h1 class="myid">자바스크립트입니다.</h1>
<h1 class="myid">강의 참 재미있죠?</h1>
<a href="#" onclick="doPrint()">자바스크립트 함수 호출하기</a>
<script type="text/javascript">
var myTag = document.querySelector(".myid");
alert(myTag);
myTag.innerText = "스크립트가 실행되었습니다.";
</script>
</body>
</html>[ querySelectorAll ]
exam19-3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myid {
background: #ff0;
font-size: 20px;
font-weight: bold;
color: #00f;
}
</style>
</head>
<body>
<h1 class="myid">안녕하세요.</h1>
<h1 class="myid">자바스크립트입니다.</h1>
<h1 class="myid">강의 참 재미있죠?</h1>
<a href="#" onclick="doPrint()">자바스크립트 함수 호출하기</a>
<script type="text/javascript">
var myTags = document.querySelectorAll(".myid");
alert(myTags);
for(var i=0; i<myTags.length; i++){
myTags[i].innerText = "스크립트가 실행되었습니다.";
}//for
</script>
</body>
</html>
객체
- 변수와 함수의 집합
- Javascript는 Prototype 기반의 객체지향언어이다.
객체를 원형(prototype) 형태로 생성하고, 그 안에 기능을 위한 변수나 함수를 추가하는 방법으로 그룹화 하는 개념
객체는 자주 사용하게 될 기능들을 묶어서 외부의 스크립트 파일로 분리해 내는 용도로 주로 사용한다.
이렇게 만든 스크립트 파일은 여러개의 HTML파일에 의해서 참조하여 재사용할 수 있다.
[ JAVA ] [ JS ]
//클래스 선언
public class Calc { calc.x = 0;
public int x = 0; calc.y = 0;
public int y = 0;
public void setValue(int x, int y) { calc.setValue = function(x, y){
this.x = x; this.x = x;
this.y = y; this.y = y;
} }
public void plus( ) {
return x + y;
}
public void minus( ) {
return x - y;
}
public void result( ) {
int sum = plus();
int sub = minus();
System.out.println("덧셈 = " + sum);
System.out.println("뺄셈 = " + sub);
}
}
//객체 생성
Calc calc = new Calc(); var calc = { }
calc.x = 25;
calc.js
calc.plus = function(){
return x + y;
}위의 코드때문에 error가 생긴다.
calc.plus = function(){
return this.x + this.y;
}이렇게 바꿔야한다 !
calc.js
// 빈 객체로 생성
var calc = {}
//멤버변수 추가
calc.x = 0;
calc.y = 0;
//멤버함수(자바에서는 메서드)
calc.setValue = function(x, y){
this.x = x;
this.y = y;
}
calc.plus = function(){
return this.x + this.y;
}
calc.minus = function(){
return this.x - this.y;
}
calc.result = function(){
var sum = this.plus();
var sub = this.minus();
document.write("<div>덧셈 = " + sum + "</div>");
document.write("<div>뺄셈 = " + sub + "</div>");
}exam20.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="./calc.js"></script>
<script type="text/javascript">
document.write("<h3>calc</h3>")
calc.setValue(25,36);
document.write("덧셈 = " + calc.plus() + "<br>");
document.write("뺄셈 = " + calc.minus() + "<br>");
document.write("<br>")
calc.result();
</script>
</body>
</html>
calc.result = function(){
var sum = this.plus();
var sub = this.minus();
document.write("<div>덧셈 = " + sum + "</div>");
document.write("<div>뺄셈 = " + sub + "</div>");
}calc.result = function(){
var sum = calc.plus();
var sub = calc.minus();
document.write("<div>덧셈 = " + sum + "</div>");
document.write("<div>뺄셈 = " + sub + "</div>");
}
※ 밑에처럼 하면 안 되는 이유 : 결국엔 또 새로운 함수를 호출하는 것이므로 다른 값을 가져오게 된다 !!
'HTML CSS JS' 카테고리의 다른 글
| DAY 36 - jQuery (2024.08.22) (0) | 2024.08.22 |
|---|---|
| DAY 35 - JS - 템플릿리터럴 / 연산자 / 화살표함수 / 시간 / onclick / history (2024.08.21) (0) | 2024.08.21 |
| DAY 33 - JS (2024.08.19) - let / var / const / prompt / 함수 / 내장함수 / 이벤트처리 (2024.08.19) (0) | 2024.08.19 |
| DAY31, 32 - 페이지 만들기 코드 복습 - main.css (4) | 2024.08.18 |
| DAY31, 32 - 페이지 만들기 코드 복습 - index.html (0) | 2024.08.18 |
