오늘 드디어 자바스크립트가 끝났다. 1주 내내 자바스크립트를 배웠는데 자바와 조금 헷갈리는 부분이 있는데 혼동하지 않도록 주의해야겠다. 다음주부터는 제이쿼리를 배우게 되는데, 리액트를 배우고 싶지만 커리큘럼 상 아쉽게 됐다. 현재 교육 단위에서는 제이쿼리에 집중하고 나중에 추가적으로 리액트, 부트스트랩 사용법을 익혀야겠다. 오늘로 개강 3달차가 되었는데, 이제 파이널 조 구성을 하게 되었다. 아직 확정은 아니지만 뛰어나신 분들과 얘기가 되고 있는거 같아서 정말 다행이다. 나도 조에서 제 역할을 잘 하려면 더 노력해야한다.
---
innerHTML과 innerText , textContent차이 구분하기!
innerHTML은 HTML태그 적용 가능
innerText, textContent는 태그 적용되지 않는다.
---
객체를 생성하는 방법
1. 객체 변수를 이용하여 객체생성
지난 시간에 배움!!!
2. 생성자 함수를 이용하여 객체생성
오늘 배우자!!!
Object 함수 이용
<body>
<p id="carname"></p>
<p id="carcolor"></p>
<p id="carspeed"></p>
<script>
var car = new Object(); // 객체 생성
car.name = 'Sonata'; // 속성 정의
car.speed = 100;
car.color = 'blue';
car.speedup = function () { // 메소드 정의
return this.speed + 10;
};
console.log('car:', car);
</script>
</body>
생성자 함수정의
<body>
<p>[Hong's Car]</p>
<p id="carname"></p>
<p id="carcolor"></p>
<p id="carspeed"></p>
<p>[Kim's Car]</p>
<p id="carname2"></p>
<p id="carcolor2"></p>
<p id="carspeed2"></p>
<script>
function Car(name, color, speed) {
this.name=name;
this.color=color;
this.speed=speed;
this.speedup=function() {
return this.speed+10;
};
this.speeddown=function() {
return this.speed-10;
};
}
var Hongcar=new Car('Sonata', 'blue', 100);
var Kimcar=new Car('Jeep', 'red', 70);
var cname=document.getElementById("carname");
cname.textContent='자동차 이름 : ' + Hongcar.name;
var colname=document.getElementById("carcolor");
colname.textContent='자동차 색상 : ' + Hongcar.color;
var cspeed=document.getElementById("carspeed");
cspeed.textContent='자동차 속도 : ' + Hongcar.speedup();
var cname=document.getElementById("carname2");
cname.textContent='자동차 이름 : ' + Kimcar.name;
var colname=document.getElementById("carcolor2");
colname.textContent='자동차 색상 : ' + Kimcar.color;
var cspeed=document.getElementById("carspeed2");
cspeed.textContent='자동차 속도 : ' + Kimcar.speedup();
</script>
</body>
**JSON : JavaScript Object Notation(기호)**
CR LF
<enter> : 2개 코드가 발생 (CR + LF) => CRLF (on windows)
<enter> : 1개 코드가 발생 (only LF) => Mac/Linux/UNIX
JS객체 => JSON 문자열로 변환하는 과정 --> 객체의 직렬화
JSON.stringify();
JSON 문자열 => JS객체로 환원하는 과정 --> 객체의 역직렬화
JSON.parse();
---
배열객체
배열내객체구조
<body>
<p>[Car1]</p>
<p id="data10"></p>
<p id="data20"></p>
<p id="data30"></p>
<p>[Car2]</p>
<p id="data11"></p>
<p id="data21"></p>
<p id="data31"></p>
<p>[Car3]</p>
<p id="data12"></p>
<p id="data22"></p>
<p id="data32"></p>
<script>
// 1. 객체를 원소로 가지는 배열 리터럴 생성
var car = [
{ name: 'Sonata', color: 'blue', speed: 100 },
{ name: 'Jeep', color: 'red', speed: 70 },
{ name: 'Passt', color: 'white', speed: 150 }
]
// 객체를 출력할 때 `` 사용하면 객체 내부를 볼 수 없다
console.clear();
console.log('car', car);
for (let i = 0; i < 3; i++) {
let cname = document.querySelector("#data1" + i);
cname.textContent = '자동차 이름 : ' + car[i].name;
let colname = document.querySelector("#data2" + i);
colname.textContent = '자동차 색상 : ' + car[i].color;
let cspeed = document.querySelector("#data3" + i);
cspeed.textContent = '자동차 속도 : ' + car[i].speed;
} // for
</script>
</body>
Array 생성자 배열 객체 구조
<body>
<p id="car"></p>
<p>[Car1 속성]</p>
<p id="car0"></p>
<p>[Car2 속성]</p>
<p id="car1"></p>
<p>[Car3 속성]</p>
<p id="car2"></p>
<script>
var car = new Array(
['Sonata', 'blue', 100],
['Jeep', 'red', 70],
['Passt', 'white', 150]
);
console.log('car:', car);
var cname = document.querySelector("#car");
cname.textContent = "car[2][1] : " + car[2][1];
for (let i = 0; i < 3; i++) {
let cname = document.querySelector("#car" + i);
cname.textContent = car[i];
}
</script>
</body>
---
Date 객체
Date 생성자의 작성 형식
<body>
<p id="d1"></p>
<p id="d2"></p>
<p id="d3"></p>
<p id="d4"></p>
<script>
// 1. 기본 생성자
document.querySelector("#d1").innerHTML = new Date();
// 2. 1970.01.01 (UTC) 이후의 밀리초로 날짜와 시간 생성
document.querySelector("#d2").innerHTML = new Date(1491803527400);
// 3. 날짜 형식의 문자열로 날짜 객체 생성
document.querySelector("#d3").innerHTML = new Date("October 15, 2018 06:18:07");
// 4. 날짜를 지정해서 날짜 객체 생성 *주의사항 : 월(month)은 0부터 시작
document.querySelector("#d4").innerHTML = new Date(2018, 11, 25, 18, 30, 29);
</script>
</body><body>
<div id="digClock"></div>
<script>
function digClock() {
let now = new Date(); // get now
// 날짜와 시간 조합
let day = now.getMonth() + 1 + "월 " + now.getDate() + "일 ";
let time = now.getHours() + "시 " + now.getMinutes() + "분 " + now.getSeconds() + "초";
// Text Node 조합
document.querySelector("#digClock").innerHTML = day + time;
} // digClock
setInterval('digClock()', 1000); // setTimeout과 동일 but 영속적 주기로 핸들러 호출!
</script>
</body>
----
문서 객체 모델 (DOM)
웹 문서를 메모리로 읽어 들여 트리 구조로 변환
문서의 각종 요소는 요소 노드로, 텍스트는 텍스트 노드로 변환
변환된 트리 구조를 이용하면 자바스크립트로 웹 문서를 조작할 수 있음
문서객체생성
<head>
<script>
function add() {
console.clear();
console.group('add');
let header = document.createElement('h3'); // 요소 노드(<h3>태그) 생성
let textNode = document.createTextNode('내 이름은 홍길동입니다.'); // 텍스트 노드 생성
header.appendChild(textNode); // 요소 노드의 자식으로 텍스트 노드 추가
document.body.appendChild(header); // <body> 태그에 header(<h3>태그) 자식으로 추가
console.groupEnd();
}; // add
</script>
</head>
<body>
<!-- 이벤트를 처리하기 위해 필요한 4가지
1) E.target : <a> 태그
2) E.type : 마우스 click
3) E.listener : onclick 속성
4) E.handler : add() 함수 -->
<a href="#" onclick="javascript:add()">당신의 이름은 무엇입니까?</a>
<!-- 새로운 노드 요소가 여기에 추가된다 -->
</body>
문서 객체의 속성값을 설정
객체 변수 사용: 객체변수.속성=‘값’;
속성 메소드 사용: setAttrbute(속성, 값);
<head>
<script>
function add() {
let img = document.createElement('img');
img.setAttribute('src', 'html5.jpg'); // img.src = 'html5.jpg';
img.setAttribute('width', 100); // img.width = 100;
img.setAttribute('height', 122); // img.height = 122;
// <body> 태그에 <img> 태그를 자식으로 추가 -> 그 즉시 재렌더링
document.body.appendChild(img);
};
</script>
</head>
<body>
<a href="#" onclick="add()">[이미지 추가]</a>
</body>
문서 객체 스타일 변경
document.getElementById("id").style.속성명="속성값";
<head>
<script>
function textstyle() {
let p = document.querySelector("#msg");
p.style.color = "blue";
p.style.fontSize = "30px";
p.style.fontStyle = "italic";
// document.querySelector("#msg").style.color = "blue";
// document.querySelector("#msg").style.fontSize = "30px";
// document.querySelector("#msg").style.fontStyle = "italic";
};
function texthidden() {
document.querySelector("#msg").style.display = "none";
// document.querySelector("#msg").style.visibility = "hidden";
};
function textvisible() {
document.querySelector("#msg").style.display = "block";
// document.querySelector("#msg").style.visibility = "visible";
};
</script>
</head>
<body>
<p id="msg">문서 객체 스타일 변경하기</p>
<input type="button" onclick="textstyle()" value="텍스트 스타일 변경">
<input type="button" onclick="texthidden()" value="텍스트 숨기기">
<input type="button" onclick="textvisible()" value="텍스트 보이기">
</body>
--------------------------------------------
'국비학원' 카테고리의 다른 글
| [국비지원] KH 정보교육원 64일차 (0) | 2022.06.29 |
|---|---|
| [국비지원] KH 정보교육원 63일차 (0) | 2022.06.29 |
| [국비지원] KH 정보교육원 60~61일차 (0) | 2022.06.24 |
| [국비지원] KH 정보교육원 59일차 (0) | 2022.06.21 |
| [국비지원] KH 정보교육원 57~58일차 (0) | 2022.06.21 |
