** for / in 문 **
- 해당 객체의 열거할 수 있는 모든 프로퍼티는 순회할 수 있도록 해줌.
- 문법 ) for(변수 in 객체){
객체의 열거할 수 있는 모든 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문; }
** label 문 **
프로그램 내의 특정 영역을 식별할 수 있도록 해주는 식별자
label문을 사용하면 continue문과 break 문의 동작이 프로그램의 흐름을 특정 영역으로 이동
- continue 문 : 해당 루프의 나머지 부분을 건너뛰고, 바로 다음 표현식으로 넘어가게함
문법1. continue;
문법2. continue 라벨이름;
- break 문 : 반복문을 완전히 종료시키고 다음위치의 실행문으로 프로그램의 흐름을 이동
문법1. break;
문법2. break 라벨이름;
* 예제 1213_2 (label 문) * - label문은 잘 사용하지 않는다. (문법정도만 알아두기)
* leble 을 break와 continue 사용
* 예제 1213_2 (switch문) *
** 배열 **
- 배열의 특징
배열 요소의 타입이 고정되어 이지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수 있다.
배열 요소의 인덱스가 연속적이지 않아도 되며, 때문에 특정 배열 요소가 비어 있을 수 있음
자바스크립트에서 배열은 Array객체로 다뤄진다.
- 배열의 참조
배열의 각 요소를 참조하고 싶을 때는 []연산자를 사용함. 문법 : 배열이름[인덱스]
배열 요소의 개수를 배열의 길이라고 함.
배열의 길이는 length 프로퍼티에 자동으로 갱신됨.
cf) 삭제예) delete arr[2]; //배열의 3번째 요소를 삭제함, 배열의 길이는 변하지 않는다.
- 배열의 요소 추가
문법)
1. arr.push(추가할 요소); // push메소드를 이용하는 방법
2.arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
3.arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법
push()메서드와 length프로퍼티를 이용한 추가방법은 모두 배열의 끝에 새로운 요소가 추가된다.
- 배열 요소 접근
모든 요소에 차례대로 접근하고 싶을 때는 for/in 과 같은 반복문을 사용하여 접근
- Array객체
배열은 정렬된 값들의 집합으로 정의되며, Array객체로 다뤄짐
- 희소 배열
배열에 속한 요소의 위치가 연속적이지 않은 배열을 의미함.
희소배열의 경우 배열의 length 프로퍼티 값보다 배열 요소의 개수가 언제나 적음
- 다차원 배열
배열요소가 또 다른배열인 배열을 의미함
2차원배열이란 배열 요소가 1차원 배열인 배열을 의미함
- 연관 배열 (associative array)
숫자로 된 인덱스 대신에 문자열로 된 키(key)를 사용해 배열처럼 사용.
Array 객체가 아닌 기본 객체로 실제배열이 아님
- 문자열을 배열처럼 접근
문자열은 변하지 않는 값이므로, 읽기 전용 배열로 다룰 수 있음
** 함수(function) **
하나의 특별할 목적으로 작업을 수행하도록 설계된 독립적인 블록을 의미함.
필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있음.
- 함수의 정의는 function키워드로 시작되며, 다음과 같은 구성요소를 가짐
1. 함수의 이름
2. 괄호안에 쉼표(,)로 구분되는 함수의 매개변수 (parameter)
3. 중괄호 ({})로 둘러싸인 자바스크립트 실행문
- 문법)
function 함수이름(매개변수1, 매개변수2...)
{
함수가 호출되었을 때 실행하고자 하는 실행문;
}
* 예제 1213_3 (배열) *
* 예제 1213_3 (배열의 활용) *
* 예제 1213_3 (배열 요소 접근 <for in 문 활용>) *
* 예제 1213_3 (희소배열/다차원배열) *
* 예제 1213_3 (연관배열) *
* 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트-배열</title>
</head>
<body>
<h3>배열</h3>
<script>
//
var arrList = [1, true, "JavaScript"];
var arrObj = Array(1, true, "JavaScript");
var arrNewObj = new Array(1, true, "JavaScript");
document.write(arrList + "<br />");
document.write(arrObj + "<br />");
document.write(arrNewObj + "<br />");
</script>
<br /><br />
<h2>배열의 활용</h2>
<script>
//배열의 요소 추가 , 삭제
var arr = ["JavaScript"];
var ele = arr[0];
arr[1] = 10;
arr[2] = ele;
document.write("배열의 요소는 [" + arr + "] 입니다.<br />");
document.write("배열의 길이는 " + arr.length + "입니다.<br />");
delete arr[1];
document.write("배열의 요소는 [" + arr + "] 입니다.<br />");
document.write("배열의 길이는 " + arr.length + "입니다.<br /><br />");
//배열의 요소 추가
arr.push("Script");
arr[arr.length] = 100;
document.write("배열의 요소는 [" + arr + "] 입니다.<br />");
document.write("배열의 길이는 " + arr.length + "입니다.<br />");
arr[20] = "자바스크립트";
document.write("배열의 요소는 [" + arr + "] 입니다.<br />");
document.write("배열의 길이는 " + arr.length + "입니다.<br />"); //길이 : 21
document.write("arr[10] : " + arr[10] + "<br />") // undefined : 값이 없기에 타입이 정해지지 않아서
</script>
<br /><br />
<h3>배열 요소 접근</h3>
<script>
arr = [1, true, "Javascript"];
var result = "<table border=1><tr>";
for(var idx in arr){
result += "<td>" + arr[idx] + "</td>";
}
result += "</tr></table>";
document.write(result);
document.write("<br /><br />");
document.write("typeof arr : " + (typeof arr) + "<br />");
document.write("typeof arr[0] : " + (typeof arr[0]) + "<br />");
document.write("typeof arr[1] : " + (typeof arr[1]) + "<br />");
document.write("typeof arr[2] : " + (typeof arr[2]) + "<br />");
</script>
<br /><br />
<h3>희소배열 / 다차원배열</h3>
<script>
//희소배열
arr = new Array();
arr[99] = "JavaScript"
document.write("배열의 길이는 " + arr.length + "입니다.<br />");
//다차원 배열
arr = new Array(3);
var row, column;
for(row = 0 ; row < 3 ; row++){
arr[row] = new Array(4);
for(column = 0 ; column < arr[row].length ; column++){
arr[row][column] = "[" + row + "," + column + "]";
document.write(arr[row][column] + " ");
}
document.write("<br />");
}
</script>
<br /><br />
<h3>연관배열 / 문자열을 배열처럼 접근</h3>
<script>
//연관 배열
arr = [];
arr["하나"] = 1;
arr["참"] = true;
arr["자바스크립드"] = "JavaScript";
document.write(arr["참"] + "<br />");
document.write("arr.length : " + arr.length + "<br />");
document.write("arr[0] : " + arr[0] + "<br /><br />");
//문자열을 배열처럼 접근
var str = "안녕하세요.";
document.write("str.charAt(2) : " + str.charAt(2) + "<br />");
document.write("str[2] : " + str[2] + "<br />");
</script>
</body>
</html>
** 함수(function) **
하나의 특별할 목적으로 작업을 수행하도록 설계된 독립적인 블록을 의미함.
필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있음.
- 함수의 정의는 function키워드로 시작되며, 다음과 같은 구성요소를 가짐
1. 함수의 이름
2. 괄호안에 쉼표(,)로 구분되는 함수의 매개변수 (parameter)
3. 중괄호 ({})로 둘러싸인 자바스크립트 실행문
- 문법)
function 함수이름(매개변수1, 매개변수2...)
{
함수가 호출되었을 때 실행하고자 하는 실행문;
}
- 반환(return)문
함수는 반환문을 포함할 수 있음. 호출자는 함수에서 실행된 결과를 전달 받을 수 있음.
- 값으로서의 함수
함수가 변수에 대입될 수도 있으며, 다른 함수의 인수로 전달될 수 도 있음.
- 변수의 유효 범위
유효범위에 따라 -> 지역변수(lical variable) / 전역변수(global variable ) 로 구분됨.
cf) 선언되지 않은 변수에 대한 typeof 연산자의 결과값은 undefined을 반환.
· 지역변수
함수 내에서 선언된 변수를 가리킴
함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라짐
함수의 매개변수 또한 함수 내에서 정의되는 지역변수처럼 동작함
· 전역변수
함수 외부에서 선언된 변수
프로그램의 어느 영역에서나 접근 가능, 페이지가 닫히면 메모리 삭제
함수내부에서 var 키워드를 사용하지 않고 변수 선언하면 → 전역변수로 선언됨
cf) 전역변수와 같은이름의 지역변수 선언시 함수 내에서는 지역변수만 호출
함수 내에서 같은 이름의 전역변수를 호출하려면 window. 붙여준다.
- 매개변수
함수 정의시 매개변수의 타입을 따로 명시하지않으며, 함수 호출 시 인수(argument)로 전달된 값에 대해 어떠한 타입검사도 하지 않음
함수를 호출 할 때 함수의 매개변수보다 적은 인수가 전달되더라도 오류가 발생하지 않음.
(나머지 매개변수에 자동으로 undefined값을 설정)
* 예제 1213_4 (자바스크립트 함수) *
* 예제 1213_4 ( 값으로서 함수 / 변수유효범위 / 함수내에서 전역변수 사용법 window. / 매개변수 ) *
- head
- body
* 소스 *
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트(함수)</title>
<script>
function addNum(x, y){
document.write("addNum 함수 호출<br />");
return x + y;
}
function addNum2(x, y){
document.write("addNum2(x, y) : " + (x + y) + "<br />");
}
function sqr(x){
return x*x;
}
function localNum(){
var num = 10; //지역변수 / var 없음면 전역변수로 된다.
num2 = 20; //var선언 안하면 전역변수
document.write("함수 내부에서 변수 num의 타입은 " + (typeof num) + "입니다.<br />");
document.write("함수 내부에서 변수 num2의 타입은 " + (typeof num2) + "입니다.<br />");
}
var num = 10;
function globalNum(){
var num = 20;
document.write("함수내에서 지역변수 num의 값은 " + num + "입니다.<br />");
document.write("함수내에서 전역변수 num의 값은 " + window.num + "입니다.<br />");
}
function addNum3(x, y, z){
return x+y+z;
}
</script>
</head>
<body>
<h3>자바스크립트 함수</h3>
<script>
document.write("addNum(x, y) : " + addNum(2,3));
document.write("<br /><br />");
document.write("addNum() : " + addNum());
document.write("<br /><br />");
addNum2(13, "일 입니다.<br />");
</script>
<br /><br />
<h4>값으로서의 함수</h4>
<script>
//값으로서의 함수
var sqrNum = sqr;
document.write("sar(4) : " + sqr(4) + "<br />");
document.write("sqrNum(5) : " + sqrNum(5) );
</script>
<br /><br />
<h4>변수 유효 범위 (지역변수/전역변수)</h4>
<script>
//변수 유효 범위 (지역변수/전역변수)
localNum();
document.write("함수 호출이 끝난 뒤 변수 num의 타입은 " + (typeof num) + "입니다.<br />");
document.write("함수 호출이 끝난 뒤 변수 num2의 타입은 " + (typeof num2) + "입니다.<br />");
</script>
<br /><br />
<h4>함수내에서 전역변수 사용시 앞에 window. 사용</h4>
<script>
//함수내에서 전역변수 사용시 앞에 window. 사용
globalNum();
//매개변수
document.write("<br /><br />")
document.write("1 : " + addNum3(1, 2, 3) + "<br />");
document.write("1 : " + addNum3(1, 2) + "<br />");
document.write("1 : " + addNum3(1) + "<br />");
document.write("1 : " + addNum3() + "<br />");
</script>
</body>
</html>
* 예제 1213_5 메소드 오버로딩 해보자 * → 맨 마지막의 메소드만 호출된다. ( 결과 : alert창의 값4가 네번나옴)
** Arguments 객체 **
- 함수 정의보다 더 많은 수의 인수가 전달되었을때 arguments객체를 이용하여
함수로 전달된 인수의 총 개수를 확인하거나, 각각의 인수에도 바로 접근할 수 있다.
- 전달받은 인수의 개수에 상관없이 정상적인 계산을 수행할 수 있다.
- Arguments객체는 배열과 비슷하지만 Array객체는 아니므로, 인덱스와 . length프로퍼티만을 가지고 있을 뿐, 모든 것을 배열처럼 다룰 수는 없다.
** String 메서드 **
- 문자열에서 위치 찾기 메서드
String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치 또는 마지막으로 등장하는 위치를 반환한다.
.indexOf()
.lastIndexOf()
전달 받은 특정 문자나 문자열을 찾을 수 없을 때는 -1을 반환한다..
- 문자열에서 지정된 위치에 있는 문자 반환
.charAt()
.
- 문자열 추출 메서드
String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열만을 추출하여 만든 새로운 문자열을 반환한다.
.slice(a, b) → a : 시작인덱스 / b : 끝인덱스 +1 <a부터 b-1인덱스 까지 추출>.substring() → 슬라이스와 동일.substr(a, b) → a : 시작인덱스 / b : 문자갯수
str.slice(-4, -2); //음수로 전달된 인덱스는 문자열의 뒤에서부터 시작함 (뒤는 1부터 시작)
- 문자열 주위의 공백 제거 메서드
String인스턴스의 양끝에 존재하는 모든 공백과 줄 바꿈 문자를 제거한 새로운 문자열 반환한다.
.trim()
- 문자열 분리 메서드
String인스턴스를 구분자를 기준으로 나눈 후 , 나눈 문자열을 하나의 배열로 반환한다.
.split(); //()안에 들어가는 기준으로 나눈다.
split("") : 한문자씩 나눔 (공백도 한문자로 취급한다.)
split(" ") : 띄어쓰기를 기준으로 나눔 (나뉜 후 띄어쓰기부분만 사라짐)
split(!) : 느낌표를 기준으로 나눔 (나뉜 후 !는 없다. !이외 공백이나 다른요소들을 그대로 유지)
Split메서드는 인수로 구분자를 전달하지 않으며, 전체 문자열을 하나의 배열 요소로 가지는 길이가 1일 배열을 반환
- 문자열의 대소문자 변환 메서드
String인스턴스의 모든 문자를 대문자나 소문자로 변환한 새로운 문자열을 반환함.
.toUpperCase(); // 전부 대문자로 변환
.toLowerCase(); // 전부 소문자로 변환
** Array메서드 **
Array 객체에 정의된 배열과 관련된 작업을 할 때 사용하는 메서드
Array.prototype 메서드
push() 메서드 : 하나 이상의 요소를 가장 마지막에 추가
- pop() 메서드
배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환함.
pop() 메서드를 실행할 때마다 배열의 길이를 1 씩 줄어들게됨.
cf) delete 는 배열의 길이는 변하지 않고 해당위치의 요소를 삭제 / pop 해당 요소를 제거하고 배열도 줄어듬
- shift() 메서드
배열의 가장 마지막 요소가 아닌 첫 요소를 제거하고, 그 제거된 요소를 반환한다.
실행할 때 마다 배열의 길이가 1 씩 줄어들게됨.
- reverse() 메서드
배열 요소의 순서를 뒤집는다.
- splice() 메서드
배열 요소를 제거하거나 새로운 배열요소를 추가하여 내용을 변경한다.
첫번째 인수 : 새로운 요소가 삽입될 위치의 인덱스
인수 : 제거할 요소의 개수
그후 인수들 : 모두 배열 요소로서 지정된 인데스부터 차례대로 삽입
이 메소드는 배열에서 제거된 요소를 배열의 형태로 반환하며, 아무요소도 제거되지 않았으면 빈 배열 반환.
* 예제 1213
* 소스 *
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트</title>
<script>
function addNum(){
var sum = 0,i;
for(i = 0 ; i < arguments.length ; i++){
sum += arguments[i];
}
return sum;
}
</script>
</head>
<body>
<h3>arguments 객체</h3>
<script>
// argument 객체
document.write("addNum(1,2,3) : " + addNum(1,2,3) + "<br />");
document.write("addNum(1,2) : " + addNum(1,2) + "<br />");
document.write("addNum(1) : " + addNum(1) + "<br />");
document.write("addNum() : " + addNum() + "<br />");
document.write("addNum(1,2,3,4,5,6,7,8,9,10) : " + addNum(1,2,3,4,5,6,7,8,9,10) + "<br />");
</script>
<br /><br />
<h3>String 메소드 - 위치찾기 / 지정된위치의 문자 반환 / 문자열 추출</h3>
<script>
var str = "abcEDFabc";
//문자열에서 위치찾기
document.write("indexOf('abc') : " + str.indexOf("abc") + "<br />");
document.write("indexOf('abcd') : " + str.indexOf('abcd') + "<br />");
document.write("indexOf('abc', 3) : " + str.indexOf("abc", 3) + "<br />");
document.write("lastindexOf('abc') : " + str.lastIndexOf("abc") + "<br />");
document.write("indexOf('d') : " + str.lastIndexOf("d") + "<br />");
document.write("indexOf('c') : " + str.lastIndexOf("c") + "<br /><br />");
//문자열에서 지정된 위치의 문자 반환
document.write("str.charAt(0) : " + str.charAt(0) + "<br />");
document.write("str.charAt(10) : " + str.charAt(10) + "<br /><br />");
//문자열 추출
str = "abcDEFabc";
document.write("slice(2, 6) : " + str.slice(2, 6) + "<br />");
document.write("slice(-4, 2) : " + str.slice(-4, -2) + "<br />");
document.write("slice(2) : " + str.slice(2) + "<br />");
document.write("substring(2, 6) : " + str.substring(2, 6) + "<br />");
document.write("substr(2, 3) : " + str.substr(2, 4) + "<br /><br />");
</script>
<br /><br />
<h3>String 메소드2 - 공백제거 / 문자열분리 / 문자열의 대소문자 변환</h3>
<script>
//공백제거
var temp = " java script ";
document.write("[" + temp + "],length : " + temp.length + "<br />");
document.write("[" + temp.trim() + "], length : " + temp.trim().length + "<br /><br />");
//문자열 분리
str = "자바스크립트는 너무 멋져요! 그리고 유용해요.";
document.write("str.split() : " + str.split() + "<br />");
document.write("str.split('') : " + str.split("") + "<br />");
document.write("str.split(' ') : " + str.split(" ") + "<br />");
document.write("str.split('!') : " + str.split("!") + "<br /><br />");
const arr = str.split(" "); //const : 상수정의
document.write("arr.length : " + arr.length + "<br />");
document.write("arr[0] : " + arr[0] + "<br />");
document.write("arr[1] : " + arr[1] + "<br />");
document.write("arr[2] : " + arr[2] + "<br />");
document.write("arr[3] : " + arr[3] + "<br /><br />");
str = "Javascript";
document.write("toUppercase() : " + str.toUpperCase() + "<br />");
document.write("toLowercase() : " + str.toLowerCase() + "<br /><br />");
</script>
<br /><br />
<h3>Array 메소드3 - Array메서드</h3>
<script>
// Array 메서드 - push
var arr1 = [1, true, "Java Script"];
document.write("arr1.length : " + arr1.length + "<br />");
arr1.push("자바스크립트");
document.write("arr1.length : " + arr1.length + "<br />");
document.write("arr1 : " + arr1 + " <br />");
arr1.push(2, "거짓");
document.write("arr1.length : " + arr1.length + "<br />");
document.write("arr1 : " + arr1 + "<br /><br />");
//pop() 메서드
document.write("arr1.pop() : " + arr1.pop() + " <br />");
document.write("arr1.length : " + arr1.length + " <br />");
document.write("arr1.pop() : " + arr1.pop() + " <br />");
document.write("arr1.length : " + arr1.length + " <br />");
document.write("arr1.pop() : " + arr1.pop() + " <br />");
document.write("arr1 : " + arr1 + " <br /><br />");
//shift() 메서드
document.write("arr1.shift() : " + arr1.shift() + " <br />");
document.write("arr1.length : " + arr1.length + " <br />");
document.write("arr1.shift() : " + arr1.shift() + " <br />");
document.write("arr1.length : " + arr1.length + " <br />");
document.write("arr1 : " + arr1 + " <br /><br />");
</script>
</body>
</html>
** 문서 객체 모델 (DOM) **
문서 객체 모델 HTML문서에 접근하기 위한 일종의 인터페이스.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공
- 객체 모델을 이용한 작업
새로운 HTML요소나 속성을 추가
존재하는 HTML요소나 속성을 제거
HTML문서의 모든 HTML요소를 변경
HTML문서의 모든 HTML속성을 변경
HTML문서의 모든 CSS스타일을 변경
HTML문서의 새로운 HTML이벤트 추가
HTML문서의 모든 HTML이벤트에 반응
HTML DOM은 HTML문서를 조작하고 접근하는 표준화된 방법을 정의함.
* Document 객체
웹페이지 그자체를 의미하며, 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document객체부터 시작해야한다.
-HTML 요소 선택
document.getELementsById
- 아이디 (id) 를 이용한 선택
- Name 속성을 이용한 선택
getElementsByName() 은 HTML요소의 name속성을 이용해 HTML요소를 선택
name 속선값이 같은 모든 요소를 선택한다.
- CSS선택자(selector)를 이용한 선택
quarySelectorAll() 메서드는 CSS선택자(아이디, 클래스, 속성, 속성값 등)를 이용해 HTML 요소를 선택
quarySelectorAll() 메소드는 익스플로럴8 과 그 이전 버전은 지원하지 않음.
- HTML 객체 집합(object coloection)을 이용한 선택
객체 집합(object collection)을 이용하여 HTML용소를 선택
- DOM 요소의 내용변경
HTML 요소의 내용(content)이나 속성값 등을 손쉽게 변경.
HTML 요소의 내용을 변경하는 가장 쉬운 방법은 innerHTML 프로퍼티를 이용.
- DOM 요소의 스타일 변경
예 )
var str = document.getElementById("text"); //아이디가 "str"인요소를 선택함
function changeRedColor(){ str.style.color = "red";}
https://tcpschool.com/javascript/js_dom_document
* 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM요소</title>
<script>
//모든 li요소를 선택하여 텍스트 색상 변경
function fn_tag(){
var selectedItem = document.getElementsByTagName("li");
var i;
for(i = 0 ; i < selectedItem.length ; i++){
selectedItem.item(i).style.color = "orange"; //선택된 요소의 텍스트 색상 변경.
}
}
//아이디를 이용하여 선택한 후 텍스트 변경(단, 아이디가 여러개인 경우 첫번쨰만 적용됨)
function fn_id(){
var selectItem = document.getElementById("even");
selectItem.style.color = "red";
}
</script>
</head>
<body>
<h2>모든 li 요소 선택</h2>
<ul>
<li id="even">월요일</li>
<li>화요일</li>
<li name="first">수요일</li>
<li>목요일</li>
<li name="first">금요일</li>
<li id="even">토요일</li>
<li id="even">일요일</li>
</ul>
<input type="button" value="li태그로 선택" onclick="fn_tag()" />
<input type="button" value="id가 even선택" onclick="fn_id()" />
<script>
// name을 이용한
var selectI = document.getElementsByName("first");
for( i = 0 ; i < selectI.length ; i++){
selectI.item(i).style.color = "blue";
}
// title 요소 선택
var title = document.title;
document.write(title + "<br /><br />");
</script>
<h2>DOM 요소의 스타일 변경</h2>
<p id="text">이부분의 스타일이 변경됩니다.</p>
<input type="button" value="빨간색 변경" onclick="redColor()" />
<input type="button" value="검정색 변경" onclick="blackColor()" />
<script>
var str = document.getElementById("text");
//스크립트를 이곳에 쓴 이유
//document.getElementById("text")는 <p id="text">이부분의 스타일이 변경됩니다.</p>이 선언된 후 사용되기 때문
function redColor(){
str.style.color = "red";
}
function blackColor(){
str.style.color = "black";
}
</script>
</body>
</html>
'수업끄적끄적_7MONTH > JavaScript' 카테고리의 다른 글
| 12/14 수업 (31일차) (0) | 2023.12.14 |
|---|---|
| 12/12 수업 (29일차) (0) | 2023.12.12 |
| 12/11 수업 (28일차) _ (1) | 2023.12.11 |
| 12/08 수업 (27일차) _ 자바스크립트란? / 식별자 / 타입 / 변수 / 연산자 (2) | 2023.12.08 |