: 객체 기반의 스크립트 언어
: HTML로 웹의 내용 작성, CSS로 웹 디자인, 자바스크립트로 웹의 동작을 구현
: 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측에서도 프로그래밍 가능
: 현재 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음.
: 동적이며 타입을 명시할 필요 없는 인터프리터 언어
: 객체 지향 프로그래밍과 함수형 프로그래밍 모두 표현 가능
: HTML의 내용, 속성, 스타일 변경 가능
: 이벤트 처리하고 사용자와의 상호작용 가능
HTML 내부에 JS 코드를 작성하는 방법
<script> document.getElementById("item").innerHTML = "Hello"; </script>
<head> 태그 내부나 <body> 태그 내에 위치하면 된다.
외부에 JS 파일을 생성하여 HTML 파일에 불러오는 방법
: script 태그 이용해 외부 JS 코드 불러올 수 있다.
<script src = "index.js"></script>
JavaScript와 HTML은 연결되어 있다. HTML을 불러올 수 있고 JavaScript에서 수정도 가능하다.
<document>
: js에서는 document를 이용해 작성한 HTML을 가져올 수 있다.
: document는 브라우저에 존재하는 객체이다.
: 웹페이지 전체는 document라는 객체로 정의되어 있다.
1. JS의 실행문은 세미콜론(;)으로 구분
2. JS는 대소문자를 구분
리터럴
: 직접 표현되는 값 그 자체
식별자
: 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미
만 사용 가능
※ JS에서 식별자는 숫자로 시작할 수 없다.
※ JS는 유니코드 문자셋을 사용.
< 식별자 작성 방식 >
1. 카멜 표기법
: 식별자가 여러 단어로 이루어진 경우 첫번째 단어는 모두 소문자로 작성, 그 다음 단어부터는 첫 문자만 대문자로 작성하는 방식
camelCase, globalNumber
2. Underscore Case 방식
: 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들을 (_)로 연결하는 방식
first_num, num_container_items
※ JS에서 하이픈(-)은 뺄셈을 위한 키워드로 식별자를 작성할 대 하이픈을 사용할 수 없다.
JS는 HTML 페이지에 변화한 결과들을 출력할 수 있는 여러 방법이 있다.
1. HTML DOM을 이용한 innerHTML 프로퍼티
: element 안의 HTML이나 XML을 가져온다.
2. innerText 이용
: element 안의 text 값들만을 가져온다.
<innerHTML과 innerText 차이>
element.innerText = "<div style = 'color:green'>innerText</div>"; element.innerHTML = "<div style = 'color: blue'>innerHTML</div>";
innerText는 html 코드가 문자열 그대로 element 안에 포함된다.
innerHTML은 입력된 HTML 태그가 해석되어 파란색 색상이 텍스트에 적용되어 innerHTML이라는 텍스트가 나타난다.
3. console.log()
: 웹 브라우저의 console 창을 통해 데이터를 출력한다.
4. window.alert()
: 웹 브라우저에 별도의 대화 상자 즉 경고창을 띄워 사용자에게 데이터 전달한다.
5. document.write()
: 웹 페이지가 로됭되면 가장 먼저 데이터를 출력하는 부분
: 테스트, 디버깅을 위해 사용
[JavaScript] JavaScript란?
자바스크립트(JavaScript)란?
: 객체 기반의 스크립트 언어
: HTML로 웹의 내용 작성, CSS로 웹 디자인, 자바스크립트로 웹의 동작을 구현
: 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측에서도 프로그래밍 가능
: 현재 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음.
JavaScript 특징
: 동적이며 타입을 명시할 필요 없는 인터프리터 언어
: 객체 지향 프로그래밍과 함수형 프로그래밍 모두 표현 가능
: HTML의 내용, 속성, 스타일 변경 가능
: 이벤트 처리하고 사용자와의 상호작용 가능
HTML에서 JavaScript 불러오기
HTML 내부에 JS 코드를 작성하는 방법
<head> 태그 내부나 <body> 태그 내에 위치하면 된다.
외부에 JS 파일을 생성하여 HTML 파일에 불러오는 방법
: script 태그 이용해 외부 JS 코드 불러올 수 있다.
JavaScript 사용하여 변경할 수 있는 것
JavaScript와 HTML은 연결되어 있다. HTML을 불러올 수 있고 JavaScript에서 수정도 가능하다.
<document>
: js에서는 document를 이용해 작성한 HTML을 가져올 수 있다.
: document는 브라우저에 존재하는 객체이다.
: 웹페이지 전체는 document라는 객체로 정의되어 있다.
JavaScript 기본 문법 및 용어
1. JS의 실행문은 세미콜론(;)으로 구분
2. JS는 대소문자를 구분
리터럴
: 직접 표현되는 값 그 자체
식별자
: 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미
만 사용 가능
※ JS에서 식별자는 숫자로 시작할 수 없다.
※ JS는 유니코드 문자셋을 사용.
< 식별자 작성 방식 >
1. 카멜 표기법
: 식별자가 여러 단어로 이루어진 경우 첫번째 단어는 모두 소문자로 작성, 그 다음 단어부터는 첫 문자만 대문자로 작성하는 방식
2. Underscore Case 방식
: 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들을 (_)로 연결하는 방식
※ JS에서 하이픈(-)은 뺄셈을 위한 키워드로 식별자를 작성할 대 하이픈을 사용할 수 없다.
JavaScript 출력 방법
JS는 HTML 페이지에 변화한 결과들을 출력할 수 있는 여러 방법이 있다.
1. HTML DOM을 이용한 innerHTML 프로퍼티
: element 안의 HTML이나 XML을 가져온다.
2. innerText 이용
: element 안의 text 값들만을 가져온다.
<innerHTML과 innerText 차이>
innerText는 html 코드가 문자열 그대로 element 안에 포함된다.
innerHTML은 입력된 HTML 태그가 해석되어 파란색 색상이 텍스트에 적용되어 innerHTML이라는 텍스트가 나타난다.
3. console.log()
: 웹 브라우저의 console 창을 통해 데이터를 출력한다.
4. window.alert()
: 웹 브라우저에 별도의 대화 상자 즉 경고창을 띄워 사용자에게 데이터 전달한다.
5. document.write()
: 웹 페이지가 로됭되면 가장 먼저 데이터를 출력하는 부분
: 테스트, 디버깅을 위해 사용
'Front-End > JavaScript' 카테고리의 다른 글