JavaScript #8

윤동민·2024년 6월 20일
DocumentdigClockelementobject

JavaScript

목록 보기
8/12

element

<p id="carname"> </p>	
<p id="carcolor"> </p>
<p id="carspeed"> </p>

<script>
	let car = {
	name: "sonata",
	speed : 50,
	color: "white",
	start: function(){
		return this.speed + 10
	}
};
let cname =  document.getElementById("carname");
cname.textContent = car.name;
let ccolor = document.getElementById("carcolor");
ccolor.textContent =  car.color;
let cspeed = document.getElementById("carspeed");
cspeed.textContent = "속도 증가 : " + car.start();
</script>

car라는 객체에 name,speed,color 그리고 start 정보를 가지고있고

document.getElementById("carname");를 사용하여 id가 carname인 HTML 요소를 가져오고,
이 요소의 TextContent를 'car.name'으로 설정 합니다. 즉, sonata가 표시 됩니다.

아래는 동일합니다.

element 2 - Object

<p id="carname"> </p>	
<p id="carcolor"> </p>
<p id="carspeed"> </p>
	
<script>
	let car = new Object(); //car는 객체변수가된다
//object: 자바스크립트 내장 객체, 모든 객체의 기본 프로토타입으로 객체를 생성하고 조작하는 데 사용

	car.name = "Sonata";
	car.speed = 100;
	car.color = "blue";
	car.speedUp = function() {
		return this.speed + 10;
	}
	console.log(car);

	let caame = document.getElementById("carname");
	caame.textContent = "자동차 이름 : " + car.name;
	let ccolor = document.getElementById("carcolor");
	ccolor.textContent = "자동차 색상 : " + car.ccolor;
		let cspeed = document.getElementById("carspeed");
	cspeed.textContent = "속도 증가 : " + car.speedUp();
	</script>

new Object를 이용하여 car라는 객체를 생성합니다.
그리고 각 속성을 가집니다 (name="Sonata", speed= 100; ~~ )

car.speedUp = function() {
		return this.speed + 10; }

car객체에 speedUp이라는 메소드를 만듭니다.
document.getElementById("carspeed")를 사용하여 id가 carspeed인 HTML 요소를 가져오고,
이 요소의 textContent를 car.speedUp()의 반환 값으로 설정합니다.
car.speedUp()는 car.speed에 10을 더한 값을 반환하므로, "속도 증가 : 110" 이 표시됩니다.

element 3 - 객제 지향적 프로그래밍

<p>[Hong's Car]</p>	
<p id="carname1"> </p>
<p id="carcolor1"> </p>
<p id="carspeed1"> </p>
<hr />

<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 + 20;
		};
		this.speedDown = function() {
			return this.speed - 20; 
		};
	}
		let hongCar = new Car("Sonata", "blue", 100);
		let kimCar = new Car("Jeep", "red", 70);
        
		// Hong's Car
		let cname1 = document.getElementById("carname1");
		cname1.textContent = "자동차 이름 : " + hongCar.name;
		let ccolor1 = document.getElementById("carcolor1");
		ccolor1.textContent = "자동차 색상 : " + hongCar.color;
		let cspeed1 = document.getElementById("carspeed1");
		cspeed1.textContent = "속도 증가 : " + hongCar.speedUp(); 
		
        // Kim's Car
        let cname2 = document.getElementById("carname2");
        cname2.textContent = "자동차 이름 : " + kimCar.name;
        let ccolor2 = document.getElementById("carcolor2");
        ccolor2.textContent = "자동차 색상 : " + kimCar.color;
        let cspeed2 = document.getElementById("carspeed2");
        cspeed2.textContent = "속도 감소 : " + kimCar.speedDown();
    </script>

자동차 객체(Car)를 생성하고,
각 객체의 속성과 메서드를 사용하여 HTML 페이지에 표시하는 방법.

element 2 - 속성 추가 및 출력

아까전꺼 이어서

~~
kimCar.price = "3천만원"; // 속성 추가
delete kimCar.price; // 속성 삭제

~~

let cprice = document.getElementById("carprice");
cprice.textContent = "자동차 가격 : " + kimCar.price;

객채.속성명 = "속성내용"으로 속성추가가 가능하며, 삭제(delete)도 가능.
추가된 속성은 전과같이 불러서 사용 가능하다.

<p>[Car]</p>
<p id = "data10"></p>
<p id = "data20"></p>
<p id = "data30"></p>
<hr>
<p>[Car]</p>
<p id = "data11"></p>
<p id = "data21"></p>
<p id = "data31"></p>
<hr>
<p>[Car]</p>
<p id = "data12"></p>
<p id = "data22"></p>
<p id = "data32"></p>

<script>
	let car = [
	{name: "Sonata", color : "blue", speed:100},
	{name: "Jeep", color :"red", speed:70},
	{name: "Audi", color :"white", speed:150}
	]

for(let i=0; i<car.length; i++){
	let cname = document.getElementById("data1" + i); //처음 for문돌리면 data10 잡아옴
	cname.textContent = "자동차 이름: " + car[i].name;

	let colname = document.getElementById("data2" + i);
	colname.textContent = " 자동차 색상 : " + car[i].color;

	let cspeed = document.getElementById("data3" + i);
	cspeed.textContent = "자동차 속도 : " + car[i].speed;
	}
</script>

'p' 요소들이 각각 'id' 속성(data10, data20 ~~)을 가지고 있고
이 id속성에 접근하여 텍스트를 삽입하는 방법

'car'라는 배열을 정의하고 세 개의 자동차 객체가 있습니다.

for문을 처음 돌리게되면 data10을 불러오게됌
(data1 + i)하면 묵시적 형변환 string이라서 data1+0 = data10 이렇게되서 잡아옴

각 배열 요소를 가지고와서 해당 정보를 HTML에 동으로 추가하게됌

element - date (년/월/일/시간 반환)

<p id="d1"></p>
<p id="d2"></p>
    <p id="d3"></p>
    <p id="d4"></p>
    <p id="d5"></p>
    <p id="d6"></p>
    <p id="d7"></p>
    <p id="d8"></p>
<p id="d9"></p>
<p id="d10"></p>
<p id="d11"></p>

    <script>    
        //기본생성자
        document.getElementById("d1").textContent = new Date();
        //Date 객채는 생성 시, 현재 날짜와 시간을 반환

        document.getElementById("d2").textContent = new Date(14911415116);
        //밀리초만큼 지난 숫자를 반환 / 쓸일없음

        document.getElementById("d3").textContent = new Date("May 1, 2024 15:04:07");
        //해당날짜 해당 문자열에 해당하는거 반환

        //날짜지정
        document.getElementById("d4").textContent = new Date(2024, 6, 19, 18, 20, 29);
        //년 월 일 시 분 초 순서대로 반환

        let today = new Date(); //오늘 날짜를 담는다.

        document.getElementById("d5").textContent = today.getFullYear()+"년";
        //오늘 날짜의 현재년도 출력

        document.getElementById("d6").textContent = (today.getMonth()+1) + "월" + today.getDate() + "일";
        //오늘 날짜의 현재 월 ,일 출력 / 근데 getMonth(): 월(0부터시작/그래서+1해줌)

        document.getElementById("d7").textContent = today.getHours() + "시" + today.getMinutes()+"분" + today.getSeconds() + "초";
        //getHour():현재 시, getMinutes(): 현재 분, getSeconds(): 현재 초

        document.getElementById("d8").textContent = "1970년 1월 1일 이후 현재까지 몇 초가 지났나요?" + today.getTime() + "ms가 지났습니다.";
        //getTime() : 1970년 1월 1일 자정 이후 밀리초 단위 변환

        document.getElementById("d9").textContent = today.toLocaleDateString();
        // toLocaleDateString() : 날짜만 문자열로 반환

        document.getElementById("d10").textContent = today.toLocaleTimeString();
        // 시간만 문자열로 변환

        document.getElementById("d11").textContent = today.toLocaleString();    
        //전체 문자열 반환
    </script>

digClock

  <div id="digClock"></div>
    
<script>
function digClock() {
	let today = new Date(); //현재 날짜와 시간
	let day = (today.getMonth()+1) + "월 " + today.getDate()+"일";
	let time = today.getHours() + "시 " + today.getMinutes() + "분" + 	today.getSeconds() +"초";
	document.getElementById("digClock").textContent = day + time;
	//현재 날짜와 시간이 뜬다.

	setTimeout("digClock()", 1000);
	//1초가 지난 이후에 디지클론함수를 실행한다.
	//1초마다 무한반복한다.
	//setTimeout() : 특정 시간이 지난 다음에 코드를 실행0
	}

digClock();
</script>

현재 시간이 계속 흐르고있다.

Document - text

 <a href="#" onclick="add()">오늘의 수업은?</a>
    
<script>
	function add() {
	let header = document.createElement("h3");
	//createElement: 새로운 HTML 태그를 만들어 반환
	let textNode = document.createTextNode("JavaScript");
	//createTextNode : 태그에 삽입할 텍스트

	header.appendChild(textNode);
	//부모 노드에 자식 노드를 추가
	document.body.appendChild(header);
  	//바디먼저 보고 -> 자식을 넣는데(헤더)먼저
    }
 </script>

<a href="#" onclick="add()">오늘의 수업은?</a>

onclick="add()" add 함수 실행

펑션 add()은 링크를 클릭할때마다 실행한다.
눌렀을때 "h3" 요소 추가, "JavaScript" 텍스트 노드 생성

최종적으로 document.body.appendChild(header)를 사용하여,
텍스트 노드를 포함한 header 요소를 문서의 body 요소에 추가합니다.
이로 인해 "JavaScript"라는 텍스트를 가진 h3 요소가 웹 페이지에 표시됩니다.

<body>	
<h3>JavaScript</h3>
</body>

최종적으로 이렇게 그림이 그려진다.

자식에 들어간다는 의미 :
header.appendChild(textNode); 는
textNode가 header(부모)의 자식이 된다. header는 h3을 가지고있다.
결론은

<header.>textNode<header.> =
<h3.>textNode<h3.> =
<h3.>JavaScript</h3.>

이어서

document.body.appendChild(header);

위 정보를 가진 header를 HTML body에 넣게된다.

Document - IMG (이미지)

<a href="#" onclick ="add()">[이미지 추가]</a>
<div id = "imgdiv"></div>
<script>
function add() {
	let img = document.createElement("img");
	img.src = "./pic1.jpg";
	img.width =100;
	img.height = 125;
	document.getElementById("imgdiv").appendChild(img);
	}
</script>

  • let img = document.createElement("img");
    :새로운 <img.> 요소를 생성합니다.
  • img.src = "./pic1.jpg";:
    src 속성을 설정하여 이미지를 지정합니다. 여기서는 ./pic1.jpg 경로의 이미지를 사용합니다.
  • img.width = 100;와 img.height = 125;
    : 크기 너비 지정
  • document.getElementById("imgdiv").appendChild(img);
    :imgdiv라는 id를 가진 <div.> 요소를 선택하고, 그 안에 생성한 <img.> 요소를 추가합니다.

document.getElementById("imgdiv").appendChild(img);
같은 경우에도
div id를 = imgdiv로 지정해놨기 때문에
<div.> 자식 <div.> 자식 자리에 img가 들어가게된다

document.getElementById("imgdiv").appendChild(img); =
<div.> .appendChild(img);<div.> =
<div.>img<div.> =

  • 여기서 img는 "./pic1.jpg"에 관한 정보(이미지파일, 크기 정보 등)를 담고있다

문서 객체 스타일 변경하기

버튼을 누르면 텍스트 스타일이 변경되는 문법

<p id="msg">문서 객체 스타일 변경하기</p>
	<input type="button" onclick="textstyle()" value="텍스트 스타일 변경"/>
	<input type="button" onclick="texthidden()" value="텍스트 숨기기"/>
	<input type="button" onclick="textvisible()" value="텍스트 보이기"/>

<script>
	function textstyle() {
	document.getElementById("msg").style.color = "blue";
	document.getElementById("msg").style.fontSize = "30px";
	document.getElementById("msg").style.fontStyle = "italic";
	//p문단 id msg 값을 컬러/사이즈/스타일을 바꾸는 함수
	}
	function texthidden(){
	document.getElementById("msg").style.visibility = "hidden";
	//visibility속성을 히든으로 바꿈 -> 숨겨짐
	}
	function textvisible(){
	document.getElementById("msg").style.visibility = "visible";
	//visibility속성을 visible로 바꾸면 -> 다시 생겨남
	}
</script>

  1. 텍스트 스타일 변경 버튼을 누르면 함수 발동
    function textstyle() {내용}; 적힌대로 실행.

  2. 텍스트 숨기기 누르면 visibility = "hidden" 숨기기 상태로 변경

  3. 텍스트 보이기 누르면 visibility = "visible" 보이기 상태로 변경

profile
윤동민
나를 한줄로 소개하자
이전 포스트

JavaScript #7

다음 포스트

JavaScript #9

0개의 댓글