자바스크립트 특징
- HTML 문서에 내장 : 조각 소스 코드
- 스크립트 언어 : 인터프리터 실행, 컴파일이 필요 없다.
- 단순함 : C언어 구조 차용, 배우기 쉽다.
번역에 따른 분류
인터프리터
중간에 일정 프로그램이 컴퓨와 사람사이를 통역해준다.
처리속도가 느리다. 대용량 처리에 적합하지 않다. (server - client)
Visual Basic (visual studio ms), Python
컴파일
사람이 작성한 프로그램을 한꺼번에 번역해서 컴퓨터 처리할 수 있도록 하는 방식
처리속도가 빠르다. 대용량 작업에 적합하다. 소스 코드가 수정이 되면
처음부터 다시 컴파일 작업을 진해해야 한다. 서버를 내리고 작업을 진행해야한다.
C , C++ , C# , JAVA(두가지 요소를 다 가지고 있다.).....
웹 페이지에서 자바스크립트의 역할
- 사용자의 입력 및 계산
- 마우스와 키보드 입력은 오직 자바스크립트로만 가능
- 계산 가능
- 웹 페이지 내용 및 모양의 동적 제어
- HTML 태그의 속성, 컨텐츠, CSS 프로퍼티 값 동적으로 변경할 수 있다.
- 브라우저 제어
- 브라우저 윈도우 크기와 모양 제어
- 새 윈도우 열기/닫기
- 다른 웹 사이트 접속
- 히스토리 제어
- 웹 서버와의 통신
- 웹 애플리케이션 작성
- 캔버스 그래픽, 로컬/세션 스토리지 저장, 위치정보 서비스 등
자바스크립트 코드 작성이 가능한 위치
1. HTML 태그의 이벤트 리스너 속성에 작성(속성값으로 작성)
2. <script></script> 태그에 작성
3. 외부 자바스크립트 파일로 작성
4. URL 부분에 작성
1. HTML 태그의 이벤트리스너에 자바스크립트 코드 작성
ex) <img src = "img/apple.jpg" alt = "apple" onclick(이벤트리스너) = "this.src = 'img/banana.jpg'"(자스 코드)>
2. <script></script>태그에 자바스크립트 작성
<script></script> : js를 작성하는 태그
특징
<head> or <body> 내에 어디든 작성 가능
웹페이지 내에 여러번 삽입 가능
<!--02jstag.html-->
<html>
<head>
<title>script 태그에 자바스크립트 작성</title>
<script>
function over(obj){ obj.src = "img/kiwi.jpg"; }
function out(obj){ obj. src = "img/apple.jpg"; }
</script>
</head>
<body>
<h3>마우스를 올려보세요</h3>
<img src = "img/apple.jpg" alt = "apple" onmouseover = "over(this)" onmouseout = "out(this)">
</body>
</html>
3. 자바스크립트 코드를 별도의 외부 파일로 작성해서 사용하는 방법
자바스크립트 코드 파일 저장
- 확장자 : example.js 파일 형태로 저장.
- 별도의 파일로 저장할 시 <script>태그는 쓰지 않음.
여러 웹페이지에서 불러서 사용가능
- 웹 페이지마다 자바스크립트 코드를 작성해야하는 중복을 없앰.
- <script>태그의 src속성으로 파일을 불러 사용
- ex) <script src = "example.js"> 이곳에 자바스크립트 코드 추가 작성 가능 </script>
4. 링크의 href에 자바스크립트 코드 작성
<!--04atagjs.html-->
<html>
<head>
<title>URL에 자바스크립트 작성</title>
</head>
<body>
<h3>링크의 href에 자바스크립트 작성</h3>
<a href = "javascript:alert('클릭하셨나요?')">
클릭해보세요!</a>
</body>
</html>
자바스크립트내에서 HTML 콘텐츠 출력
자바스크립트내에서 HTML 콘텐츠를 웹 페이지에 직접 삽입
- 바로 브라우저 윈도우에 출력하기 위해.
- document.write()
- ex) document.write("<h3>Welcome!</h3>")
- document.writeln()
- 텍스트에 '\n'(빈칸(띄어쓰기) 하나 더 출력)을 덧붙여 출력
자바스크립트 다이얼로그
프롬프트 다이얼로그
prompt("메시지", "디폴트 입력값") 함수
사용자로부터 문자열을 입력받아서 리턴하는 역할
확인 다이얼로그
confirm("메시지") 함수
"메시지"를 출력하고 '확인/취소(OK/CANCEL)'버튼을 가진 다이얼로그가 출력됨
확인버튼을 누르면 true, 취소버튼을 누르거나 강제로 다이얼로그를 닫으면 false 리턴
경고 다이얼로그
alert("메시지") 함수
메시지와 확인 버튼을 가진 다이얼로그 출력.
메시지 전달을 위한 다이얼로그
자바스크립트 식별자
식별자 : 구분하는 이름, (변수, 함수 이름이 유일unique해야 한다.)
자바스크립트 프로그램의 변수, 상수, 함수의 이름, 이름짓는 규칙
식별자를 만드는 규칙
첫번째 문자 : 알파벳(A-Z, a-z), 언더스코어(_), $문자만 사용가능
두번째 이상 문자 : 알파벳, 언더스코어, 0~9, $ 사용가능
대소문자는 구분되어 다뤄짐
자바스크립트 예약어는 사용 불가 → false, if, for, null 등 예약어 사용 불가. (False, IF 등등 사용 가능 - 근데 비추)
자바스크립트 문장
문장 : 자바스크립트 프로그램의 기본 단위
문장과 문장을 구분하기 위해 세미콜론(;)을 사용함
한줄만 작성할 경우, 세미콜론 생략 가능
주석문
// 한 줄 주석
/*
여러줄
주석
*/
데이터타입
자바스크립트 언어에서 다루는 데이터 종류
자바스크립트는 특별히 자료형이 없어서, 자료형을 선언하지 않는다.
var a; 이런식으로 사용.
var의 자료형은 a에 대입되는 형식에 따라 자동으로 설정된다.
숫자 타입 : 정수(소수점 없는 자연수(314,0), 실수(소수점 포함 자연수(3.14, 0.0))
논리 타입 : 참, 거짓
문자열 타입 : (자바스크립트는 문자 한글자에 해당하는 자료형은 존재하지 않음)
ex) '좋은세상', 'a', "256"
문자열은 연산을 위해 사용하는 것이 아니라, 문자열 출력을 위해서 사용한다.
문자열1 + 문자열2 = 문자열1문자열2(이어서 출력)
객체 레퍼런스 타입 : 객체를 가리킴(주소로 접근)
null : 값이 없음을 표시하는 특수 키워드(쓰레기값, 의미 없는 값)
변수
자바스크립트 데이터 저장 공간
변수 선언 : 변수 이름을 정하고, 저장 공간 할당
자바스크립트에는 변수 타입이 없기에, 변수 타입(자료형, 데이터타입)을 선언하지 않는다.
변수에 저장되는 값에 대한 제약이 없다.
var 키워드로 변수를 선언하는 방법
ex)
var score; // score 변수 선언. 초기화를 하지 않으면 null값 대입.
var year, month, day; // year, month, day의 3개의 변수를 동시에 선언.
var address = "서울시 강동구"; //address 변수를 선언과 동시에 초기화
var 키워드 없이 선언도 가능하다.(비추천) ex) age = 21;
함수 안에 var 키워드 없이 변수를 선언하게 되면 전역변수로 선언된다.
지역변수와 전역변수
| 지역변수 | 전역변수 |
| 함수 내에 var 키워드로 선언 | 함수 밖에서 선언되거나, 함수 내에 var 키워드 없이 선언된 변수 |
| 선언된 함수 내에서만 사용 | 프로그램 전역에서 사용 |
+) 지역변수와 전역변수의 이름이 같다면?
var x;
function f(){
var x;
x=1; // 지역변수 x에 값이 1이 저장된다.
this.x=100; // 전역변수 x에 100이 저장된다.
}
자바스크립트의 상수
상수(literal) : 데이터값 그 자체.
| 상수 종류 | 특징 | 예 | |
| 정수 | 8진수 | 0으로 시작 | var n = 015; // (10진수 : 13) |
| 10진수 | var n = 15; | ||
| 16진수 | 0x로 시작 | var n = 0x15; // (10진수 : 21) | |
| 실수 | 소수형 | var height = 179.7; // 0.1234 | |
| 지수형 | var height = 1797E-1; // 1234E-4 | ||
| 논리 | 참 | true | var condition = true; |
| 거짓 | false | var condition = false; | |
| 문자열 | " " | var name = "kim'; | |
| ' ' | var name = 'kim'; | ||
| 기타 | null | 값이 없음 | var ret = null; |
| NaN (Not a Number) |
숫자가 아님 | var n =parseInt("abc") // NaN이 리턴됨 | |
자바스크립트 연산과 연산자 종류
| 연산종류 | 연산자 |
| 산술 | + - * / % |
| 증감 | ++ -- |
| 비트 | & | ^ ~ |
| 시프트 | >> << >>> |
| 대입 | = *= /= -= += &= ^= 등등등 |
| 비교 | > < >= <= == != |
| 논리 | && || ! |
| 조건 | ?:(대표적인 3항연산자) |
연산자 우선순위 : () {} [] 단항 이항 삼항 대입
'Front-end' 카테고리의 다른 글
| [JavaScript] 전역함수, 객체, 배열, Date, String, Math(+random 난수발생) (0) | 2024.08.30 |
|---|---|
| CSS 배치, 블록/인라인/인라인블록박스(display, position), 리스트/표/폼 꾸미기 (0) | 2024.08.01 |
| CSS 기본_ 셀렉터, 색/텍스트/폰트/박스/배경/커서 (0) | 2024.07.31 |
| CSS 스타일 시트 (0) | 2024.07.31 |
| [HTML5] 웹 폼 (0) | 2024.07.31 |