02. html에서 JavaScript 사용하기!
1) html에서 JavaScript 사용하는 태그 <script>
<body>
<script>
</script>
</body>
-body 태그 안에 script태그를 이용해서 자바스크립트를 사용할 수 있다.
2) JavaScript를 이용해보자!
<body>
<div></div>
<script>
var div = document.querySelector("div") // html 속 div태그를 가져와 div라는 변수에 넣어줌
var h1 = document.createElement("h1") // 자바스크립트에서 html요소를 만들어 h1이라는 변수에 넣어줌
h1.innerText = "hello" // h1 에 hello라는 텍스트를 넣어줌
div.append(h1) // div라는 변수에 변수 h1을 넣어줌
</script>
</body>
=>결과
3) JavaScript로 로그인,회원가입 창을 만들어보자!!
<로그인 창>
<body>
<div></div>
<script>
var div = document.querySelector("div")
var h1 = document.createElement("h1")
var inputId = document.createElement("input")
var inputPw = document.createElement("input")
var btn = document.createElement("button")
var br = document.createElement("br")
h1.innerText = "Login 창 만들기"
btn.innerText = "로그인"
inputId.setAttribute("type","text")
inputId.setAttribute("placeholder","ID")
inputPw.setAttribute("type","password")
inputPw.setAttribute("placeholder","*****")
div.append(h1)
div.append(inputId)
div.append(br)
div.append(inputPw)
div.append(btn)
</script>
</body>
=>결과
<회원가입 창>
<body>
<div></div>
<script>
var div = document.querySelector("div")
var h1 = document.createElement("h1")
var inputId = document.createElement("input")
var inputPw = document.createElement("input")
var inputPwc = document.createElement("input")
var btn = document.createElement("button")
var br = document.createElement("br")
var br2 = document.createElement("br")
h1.innerText = "회원가입 창 만들기"
btn.innerText = "로그인"
inputId.setAttribute("type","text")
inputId.setAttribute("placeholder","ID")
inputPw.setAttribute("type","password")
inputPw.setAttribute("placeholder","*****")
inputPwc.setAttribute("type","password")
inputPwc.setAttribute("placeholder","*****")
div.append(h1)
div.append(inputId)
div.append(br)
div.append(inputPw)
div.append(br2)
div.append(inputPwc)
div.append(btn)
</script>
</body>
=>결과
'JavaScript' 카테고리의 다른 글
| JavaScript #3 함수의 이해, 일급,평가,일급함수와 고차함수 (2) | 2022.10.12 |
|---|---|
| JavaScript 별찍기 과제 (0) | 2022.10.07 |
| JavaScript #2 조건문의 이해, 반복문의 이해 (0) | 2022.10.07 |
| Javascript #1 변수의 이해, 자료형, 연산자 (0) | 2022.10.03 |
| <1주차> JavaScript #1 (1) | 2022.05.29 |
