[JS] document

JavaScript

[JS] document

효땡 2024. 6. 1. 21:20

document 객체

객체

-> 속성 : 객체명.멤버변수

-> 메소드 : 객체명.멤버함수()

document.write(123);
document.write("대한민국");

출력값 : 123

대한민국

document.write(3+5);		//8
document.write("<hr>");
document.write(3+"5");		//35
document.write("<hr>");
document.write("3"+5);		//35
document.write("<hr>");
document.write("3"+"5");	//35
document.write("<hr>");
document.write("3+5");		//3+5
document.write("<hr>");

let name="손흥민";
let age=25;
let height=178.9;

document.write("이름:" + name + "<hr>");
document.write("나이:" + age + "<hr>");
document.write("키" + height + "<hr>");

document.write("개나리<br><p>진달래</p>");
document.write("<img src='./monkey.jpeg'>");
document.write("<hr>");

let str="";		//빈문자열 (글자개수 0개)
str=str+"ONE";
document.write(str);
document.write("<hr>");

str=str+"TWO";
document.write(str);
document.write("<hr>");

str=str+"THREE";
document.write(str);
document.write("<hr>");

str="";
document.write("#" + str + "#");
document.write("<hr>");

본문 <body>에 있는 id 속성 접근

1. 순서 JavaScript 접근

- document.getElementById("demo")

- document.getElementById("demo").innerText="아이티윌"

2. jQuery 접근 (jQuery 라이브러리가 필요함)

- $("#demo")

- $("#demo").val("아이티윌")

연습) 이름, 나이, 키 값들을 표작성을 해서 id=demo에 출력하시오

name="김연아";
age=30;
height=165.7;

let result="";	//결과값
result = result + "<table border='1'>";
result = result + "<tr>";
result = result + "		<th>이름</th>";
result = result + "		<td>" + name + "</td>";
result = result + "</tr>";
result = result + "<tr>";
result = result + "		<th>나이</th>";
result = result + "		<td>" + age + "</td>";
result = result + "</tr>";
result = result + "<tr>";
result = result + "		<th>키</th>";
result = result + "		<td>" + height + "</td>";
result = result + "</tr>";
result = result + "</table>";

결과값을 문자열로 출력

document.getElementById("demo").innerText = result; //$("#demo").text(result)

결과값을 HTML tag형식으로 출력

document.getElementById("demo").innerHTML = result;	//$("demo").html(result)