반응형
JavaScript 에서의 HTML 사용
HTML 문서에 출력하는 메서드이다.
document.write("내용");
JavaScript 와 HTML 실행
JS에서 정의한 값을 메서드 문법을 사용해 불러오면 다음과 같은 결과를 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
var a = 10;
let b = 20;
c= "hello";
d= 'abc';
//JS에서는 var, let을 쓰지 않아도 변수 선언이 가능하다.
let e = 2.34;
let f = [1,2,3,4,5];
let g = {"name:":"aaa", "tel" : "111"};
let h = true;
</script>
</head>
<body>
<script type = "text/javascript">
//html 문서에 출력 메서드
document.write("<h1>a:"+a+ " /b:" +b+"</h1>");
document.write("<h1>"+c+"</h1>");
document.write("<h1>"+d+"</h1>");
document.write("<h1>"+e+"</h1>");
document.write("<h1>")
for(i=0;i<f.length;i++){
document.write(f[i]+",");
}
document.write("</h1>")
document.write("<h1> name:"+g.name+"/ tel:"+g.tel+"</h1>")
document.write("<h1>"+h+"</h1>");
if(h==true){
document.write("true");
}else{
document.write("false");
}
JS 파일에서 JS 변수 불러오기
JS 파일을 별도로 분리해 HTML 을 작성할 때 다음과 같이 하면 된다.
(위) 분리된 자바 스크립트 파일이고, 이름은 mystyle.js 이다.
(아래) 남아있는 HTML 코드이다. script 코드 안에 src 문법을 이용해 mystyle.js 파일에 링크를 걸어준다.
/**
*
*/
var a = 10;
let b = 20;
c= "hello";
d= 'abc';
let e = 2.34;
let f = [1,2,3,4,5];
let g = {"name:":"aaa", "tel" : "111"};
let h = true;
j = 3;<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "myjs.js"></script>
</head>
<body>
<script type = "text/javascript">
//html 문서에 출력 메서드
document.write("<h1>a:"+a+ " /b:" +b+"</h1>");
document.write("<h1>"+c+"</h1>");
document.write("<h1>"+d+"</h1>");
document.write("<h1>"+e+"</h1>");
document.write("<h1>")
for(i=0;i<f.length;i++){
document.write(f[i]+",");
}
document.write("</h1>")
document.write("<h1> name:"+g.name+"/ tel:"+g.tel+"</h1>")
document.write("<h1>"+h+"</h1>");
if(h==true){
document.write("true");
}else{
document.write("false");
}
for(i=1;i<10;i++){
document.write("<h4>"+j + "*" + i + "=" + j*i + "</h4>");
}
// for(i=1;i<10;i++){
// document.write(dan);
// }
</script>
</body>
</html>반응형
