2023. 8. 8. 19:53ㆍLang/JavaScript
JS를 React 공부하는김에 다시 복습하려한다.
JS는 웹 페이지를 동적인 페이지로 만들기 위해 고안된 언어다.
사용빈도는 스마트폰이 등장하면서 급격하게 늘었다고 한다.
1. JS 사용방법
JS를 사용하기 위해서는 크게 두가지 방법이 있다.
첫번째는 html안에다가 <script>태그를 써서 사용하는 방법이 있고
두번째는 외부에 js파일을 만들어 import하는 방법이 있다.
첫번째 방법 즉, html내부에 쓰는 경우에는 주로 body태그 속 가장 하단에 적는 경우가 일반적이다.
JS는 html에 접근하기 위해 document를 쓰고 html 속 요소에 접근하기위해 querySelector(요소명)을 쓴다.
<body>
<h1 style="color: blue;">배경색 바꾸기</h1>
<button onclick="yellow()">노란색</button>
<button onclick="back()">돌아가기</button>
<script>
function yellow(){
//yellow함수가 실행되면 배경색이 노란색으로, 글자색이 파란색으로 변경
document.querySelector('body').style.backgroundColor = 'yellow';
document.querySelector('body').style.color ='blue';
}
function back(){
document.querySelector('body').style.backgroundColor = 'white'
document.querySelector('body').style.color = 'black'
}
</script>
</body>
</html>위에 코드는 버튼을 누르면 배경색과 글자색을 바꾸는 함수를 JS로 정의하고 있다.
<script>태그 안에서 document.querySelector('body').style.backgroundColor = 'yello';로
해당 문서에 body라는 태그의 css를 바꾸도록 하고 있다.
여기서 일반적인 css문법이 sneak방식(ex_background-color)인것에 반해
JS는 camel식(ex_backgroundColor)으로 쓰고 있다는 것을 주의해야한다.
2. 출력
JS는 출력을 3가지방식으로 할 수 있다.
- document.write()
첫번째는 write()를 이용해서 웹페이지 상에 직접 출력하는 것이다
html문서에 작성하는 것과 같으므로 document로 접근해줘야한다.
<script>
document.write('안녕하세요')
document.write('<h1>segnohong의 블로그입니다.<h1/>')
</script>write()안에 태그를 입력하면 그대로 태그가 적용된 상태로 웹에 출력된다는 것을 알 수 있다.
- console
두번째는 console창에 출력하는 것이다.
console창에 출력하려면
1) console.log() : 가장 일반적으로 쓰이는 출력문이다. 주로 개발과정에서 간단한 확인용으로 쓴다.
2) console.warn() : 해당 출력문을 쓰면 경고표시와 함께 노란 배경으로 출력된다.
3) console.error() : 해당 출력문을 쓰면 X표시와 함께 빨간 배경으로 출력된다.
- alert()
세번째는 알림창으로 출력하는 것이다.
알림창으로 출력하면 웹페이지가 작동했을 때 가장먼저 페이지 상단에 알림창을 통해을 보여준다.
'Lang > JavaScript' 카테고리의 다른 글
| JavaScript 기본편(4) - 함수 (0) | 2023.08.25 |
|---|---|
| JavaScript 기본편(3) - 기본문법 (0) | 2023.08.24 |
| JavaScript 기본편(2) - 실행위치 (0) | 2023.08.24 |