Study, 2022
[Lab5] 자바스크립트 본문
자바스크립트 (JavaScript)
- 웹 페이지의 동작을 담당한다.
- 변수를 지정해 계산이 가능하다.
getElementById()
- id로 지정한 요소를 가지고 와 원하는 동작을 실행할 때 사용한다.
<script>
- 해당 태그 내에서 자바 스크립트 작성 가능
- <body> 내부 또는 <head> 내부 모두 작성 가능
document.write(contents)
- 해당 페이지에 contents 내용을 작성
alert
- 웹페이지에 알림창을 띄움
<script>
alert(5 + 6);
</script>
변수 설정
- <script> 태그 내에서 id를 호출할 때, 해당 id가 <script> 이전 코드에 존재해야 작동하는 듯
<p id="ex2" style="font-family: courier; color:royalblue"></p>
<script>
var num = 2021;
var name = "Winter";
var book = 'Book';
document.getElementById("ex2").innerHTML =
num + "<br>" + name + "<br>" + book;
</script>
array.toString()
- 배열 속 요소들을 모두 출력할 수 있다.
function
- 스크립트 태그 내부에서 함수를 만들 수 있다.
- input을 받을 때 id를 통해 변수로 사용할 수 있다.
<p>당신이 가장 좋아하는 숫자는?:</p>
<input id="num" value="0" />
<button onclick="myFunction()">Try it</button>
<p id="ex6"></p>
<script>
function myFunction() {
var num, result;
num = document.getElementById("num").value;
result = (num%2 == 0) ? "짝수를 좋아하는 군요!":"홀수를 좋아하는 군요!";
document.getElementById("ex6").innerHTML = result;
}
</script>
'웹 개발' 카테고리의 다른 글
| [Lab4-2] CSS Responsive (0) | 2021.01.10 |
|---|---|
| [Lab4-1] CSS Advanced (0) | 2021.01.10 |
| [Lab3] HTML CSS Basic (0) | 2021.01.09 |
| [에러] textarea lable 아래쪽에 위치하는 문제 (0) | 2021.01.09 |
| [Lab2] HTML Form/Graphics (0) | 2021.01.09 |
'웹 개발' Related Articles
more
Comments