1. 자바스크립트 시작해보기
바닐라 자바스크립트
프레임워크나 라이브러리를 사용하지 않는 순수한 자바스크립트를 의미한다.
바닐라 자바스크립트 = 순수 자바스크립트
브라우저 종류가 너무나 다양하다. 동작되는 방법도 조금씩 다르다.
호환성 문제, 사용의 편리성 문제 등으로 인해 순수하게 자바스크립트만을 사용하는 것이 개발에서 어려움
jQuery와 같이 별도의 라이브러리를 함께 사용해서 개발하는 게 일반적인 환경이었음
하지만, 이러한 개발 환경도 시간이 지나면서 많이 변하게 됨
=> React.JS, Vue.Js
이러한 프레임워크는 순수 자바스크립트를 기반으로 하는 프레임 워크
순수 자바스크립트 코드를 표방하는 바닐라 자바스크립트가 근래에 많이 사용하게 됨. 자바스크립트 작성하는 방법
- HTML 문서에서 자바스크립트를 작성하는 방법(내부 자바스크립트 방법)
<body>
<script>
document.write("Hello, Javascript!")
</script>
</body>- 외부 자바스크립트 방법
=> 확장자는 반드시 js 파일을 하나 만들어 주고, ex) main.js
<body>
<script src="main.js"></script>
</body>- 인라인 자바스크립트 방법
=> 이벤트 속성을 이용하는 방법
<button onclick='document.write("Hello,Inline Javascript")'>인라인 자바스크립트</button>자바스크립트 작성법 정리
자바스크립트 코드를 작성하고 실행하는 방법에는 크게 3가지의 방법이 있습니다.
내부(internal) 자바스크립트 방법
내부 자바스크립트 방법은 HTML 문서 내부에서 script 태그의 콘텐츠(contents) 영역에 자바스크립트 코드를 작성하는 방법을 말합니다.
index.html
...(생략)...
...(생략)...외부(external) 자바스크립트 방법
외부 자바스크립트 방법은 HTML 문서 외부에 별도의 확장자(js)를 가진 자바스크립트 파일을 만들어서 작성하는 방법을 말합니다.
이때, 생성한 자바스크립트 파일과 HTML 문서를 script 태그를 이용해서(src 속성) 반드시 연결해야 합니다.
main.js
document.write('Hello, External Script!');
index.html
...(생략)...
...(생략)... ❗주의외부 자바스크립트 방법을 사용할 때는 내부 자바스크립트 방법과 혼합해서 사용하지 않도록 해야합니다.
예를들어서 아래와 같은 코드는 잘못된 사용 방법입니다.
index.html
...(생략)...
...(생략)...인라인(inline) 자바스크립트 방법
인라인 자바스크립트 방법은 이벤트 속성을 HTML 속성으로 사용해서 자바스크립트 코드를 작성하는 방법을 말합니다.
여기서 이벤트 속성은 나중에 배우게 되는 자바스크립트의 핵심 개념인데, 간단한 예시로 웹 페이지에서 마우스를 클릭하는 행위는 클릭이 발생할 때마다 ‘click’ 이벤트가 발생됩니다.
이러한 click 이벤트는 HTML의 onclick 속성으로 체크할 수 있고, 이때 자바스크립트 코드를 작성하면 클릭이 발생할 때 자바스크립트 코드가 실행됩니다.
index.html
...(생략)...
inline script ...(생략)... ❓버튼을 누르면 버튼이 사라지는 이유인라인 자바스크립트 방법으로 작성된 예제 코드를 실행하면 버튼을 클릭하는 순간 버튼이 사라지고 ‘Hello, Inline Script’ 문자열이 보이게 됩니다.
이는 document.write() 라는 자바스크립트 코드가 body 태그 안의 내용을 전부 지우고 소괄호() 안에 추가된 문자를 body 태그 안에 새롭게 추가하는 기능을 하기 때문입니다.
주석 처리하는 방법
자바스크립트 =>
1. 주석 남기는 방법: //
- 여러줄 주석 남기는 방법:
/
여러 줄 주석
여러 줄 주석
/
주석 단축키: cmd +/
여러줄 주석 단축키: option+shift+a 구간 지정 후에, 한꺼번에 주석 처리하는 방법
