** JavaScript (자바스크립트) 란? **
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현함.
특별한 준비나 컴파일 없이 보통의 문자형태로 작성할 수 있고, 실행도 할 수 있음
* 자바스크립트의 특징
- 자바스크립트는 객체 기반의 스크립트 언어
- 자바스크립트는 동적이며, 타입(데이터)을 명시할 필요가 없는 인터프리터 언어
- 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 할 수 있음
* 자바스크립트를 사용하여 웹 프로그래밍에서 할 수 있는 일
- HTML 의 내용을 변경 할 수 있음
- HTML 속성을 변경 할 수 있음
- HTML 스타일을 변경 할 수 있음
* 자바스크립트 문법
- 실행문은 세미콜론 (;)으로 구분 (한 행에 한 문장씩 작성할 경우 세미콜론 생략 가능)
- 자바스크립트는 대소문자를 구분함
- 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용
사용예)
var javascript = 10;
var javaScript = 20; // javascript와 javaScript는 서로 다른 변수로 인식
var Script = 30; // 변수선언은 var키워드로 사용 할 수 있으므로 var는 동작안함
* 자바언어와 자바스크립트 특징 비교 *
| 특징 | 자바 언어 | 자바스크립트 |
| 언어 종류 | 소스파일을 컴파일하여 실행하는 언어 | 브라우저가 소스 코드를 직접 해석하여 실행하는 인터프리터 언어 |
| 실행 방식 | 자바 가상 머신 위에서 실행 | 브라우저 위에서 실행 |
| 작성 위치 | 별도의 소스 파일에 작성 | HTML 파일 안에 삽입 가능 |
| 변수 선언 | 변수의 타입을 반드시 선언 해야함 | 변수의 타입을 선언하지 않아도 사용 가능 |
* 식별자(identyfier)
식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미함
자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더바(_), $만 사용할 수 있음.
(숫자와 식별자를 구별하기 위해 숫자로 시작할 수 없음)
* 식별자 작성 방식 *
- Camel Case 방식
식별자가 여러 단어로 이루어질 경우 첫번 째 단어는 모두 소문자로 , 그 다음 단어부터는 첫 문자만 대문자로 작성하는 방식
- Underscore Case 방식 (자바스크립트에서 많이 사용)
단어들을 소문자로만 작성하고, 단어들은 언더바(_)로 연결하는 방식
사용예)
var firstVar = 10; //Camel Case 방식
Function my_first_func //Underscore Case 방식
{
var firstLocalVar = 20; //Camel Case 방식
}
cf) 자바스크립트에서 하이픈(-)은 뺄셈을 위해 예약된 키우드로 식별자를 작성 할때는 사용할 수 없음
* 키워드 - 미리 예약된 단어 즉 예약어라고 하여, 프로그램 내에서 식별자로 사용할 수 없음
* 주석 -웹 브라우저의 동작에 전형 영향을 미치지 않음 / 문법 - 1.한줄주석 : //주석문 | 2. 여러줄주석 : /* 주석문 */
* 자바스크립트 출력
- window.alert() 메서드
- HTML DOM요소를 이용한 innerHTML 프로퍼티
- document.write() 메서드
- console.log() 메서드 (보통 디버깅용)
- window.alert() 메서드 (가장 많이 사용) - 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달함
ex)
<script>
function alertDialogBox() { alert("확인을 누를때까지 다른 작업을 할 수 없어요!");
</script>
cf) window 객체의 모든 메서드나 프로퍼티를 사용할 때는 window 라는 접수사를 생략할 수 있음
- document.write()메소드
document.write()메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력함.
document.write()메소드는 대부분 테스트나 디버깅을 위해 사용됨
예)
<button onclick="document.write(4*5)">
-> //document.write 버튼을 누르면 20값이나오고 그 전의 body 는 날아감. (JAVASCRIPT 1208_2)
// 자바스크립트 html 는 head 실행 후 body 실행
- HTML DOM요소를 이용한 innerHTML 프로퍼티
document 객체의 getElementById()나 getElementsByTagName()등의 메서드를 사용하여 HTML요소를 선택함.
innerHTML 프로퍼티를 이용하면 선택된 HTML요소의 내용(content)이나 속성 (attribute)값을 손쉽게 변경할 수 있음.
버튼을 눌러보세요 -> alert창 뜸
버튼을 눌러보세요. -> document창 뜨고 그 전 body는 날아감
* 자바 스크립트 적용
HTML문서에 자바스크립트 코드를 적용하는 방법
1. 내부 자바스크립트 코드로 적용
2. 외부 자바스크립트 파일로 적용
- 내부 자바스크립트 코드 : (헤드 바디 모두 올 수 있음)
자바스크릷트 코드는 <script>태그를 사용하여 HTML문서안에 삽입할 수 있음
문법 :
<script>
document.getElementById("text").~~~
</script>
- 외부 자바스크립트 파일 : (헤드에 와야함)
자바스크립트 코드는 HTML문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입 할 수 있음
외부에 작성된 자바스크립트 파일은 .js확장자를 사용하여 저장함.
자바스크립트 파일(.js)을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함
** 예제1) 1208_4 <head>태그에 코드삽입 **
** 기본 타입 **
타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미함
기본타입은 원시 타입과 객체 타입으로 구분함
- 원시타입 : 숫자(number), 문자열(string), 불리안(boolean), 심볼(symbol), undefined / 심복타입은 익스플로러에서 지원하지 않음.
- 객체타입 : 객체(object)
예제) 자바스크립트의 데이터 타입은 마지막에 넣은 변수의 타입을 따라 결정된다.
var num = 10;
var myName = "홍길동";
var str;
- 숫자(number)
정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현함.
- 문자열(string)
문자열은 큰따옴표(" ")나 작은 따옴표(' ')로 둘러싸인 문자의 집합을 의미
예)
var firstStr = "이것도 문자열입니다.";
var secondStr = '이것도 문자열입니다';
var thirdStr = "나의 이름은 '홍길동'이야"; //따옴표속에 같은 종류의 따옴표 올 수 없다 (다른종류의 따옴표 사용해야함)
var fourthStr = '나의 이름은 "홍길동"이야';
- 불리언(boolean)
참(true)와 거짓(false)을 표현함.
var fisrtNum = 10;
var secondNum = 11;
document.getElementById("result").innerHTML = (fNum == sNum); //false
- typeof 연산자
피연산자의 타입을 반환하는 피연산자가 단 하나 뿐인 연산자이다.
typeof 10; /number 타입
typeof "문자열"; //sting 타입
typeof true; //boolean 타입
typeof undefined; //undefined 타입
typeof null; //object 타입
cf) 변수선언을 했지만 초기값세팅이 되지 않은 경우 -> undefined
- null과 undefined
null은 object타입이며, 아직 값이 정해지지 않은 것을 의미함
undifined란 null과는 달리 타입이 정해지지 않은 것을 의미함
undifined는 초기화되지 않은 변수나 존재하지 않은 값에 접근할때 반환됨
예)
var num; //초기화하지 않았으므로 undefined값을 반환함
var str; //object 타입의 null값
typeof secondNum; //정의되지 않은 변수에 접근하면 undefined 값을 반환함.
- 객체 (object)
기본타입은 객체이며, 객체란 실생활에서 우리가 인식할 수 있는 사물을 의미
객체는여러 프로퍼티나 메서드를 같은 이름을 묶어놓은 일종의 집합체
예)
var dog = {name:"해피", age:3}; //객체생성
document.getElementById("result").innerHTML = "강아지의 이름은" + dog.name + "이고, 나이는" + dog.age + "살 입니다.";
- 타입변환(type conversion)
자바스크립트는 타입검사가 매우 유연한 언어로 변수의 차입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있음.
예)
var num = 20; //Number 타입의 20
num = "이십" //String타입의 "이십"
var num; //한 변수에 여러번 대입할 수 는 있지만, 변수의 재선언은 할 수 없습니다. + 재선언문은 무시됩니다.
- 묵시적 타입 변환(implicit type conversion)
자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용. 즉, 문자열 값이 와야 할 곳에 숫자가 오더라도 알아서 숫자를 문자열로 변환.
예)
10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
"3" * "5"; // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.
1 - "문자열"; // NaN : Not a Number으로 정의되지 않는 값이나 표현 할 수 없는 값
// NaN은 number타입의 값으로0으로 나누거나, 숫자로 변환 할 수 없는 피연산자로 산술 연산을 시도하는 경우에 반환 되는 읽기 전용
- 명시적 타입 변환(explicit type conversion)
자바스크립트는 묵시적 타입 변환을 많이 사용하지만, 명시적으로 타입변환 방법 제공
명시적 타입 변환을위해 자바 스크립트가 제공하는 전역함수
.Number() .String() .Boolean() .Object() .parseInt() .parseFloat()
예)
Number("10"); // 숫자 10
String(true); // 문자열 "true"
Boolean(0); // 불리언 false
Object(3); //new Number(3)와 동일한 결과로 숫자3
- 불리언 값을 문자열로 변환
String()함수와 toString 메서드를 사용할 수 있음.
예제)
String(true); //문자열"true"
false.toString(); //문자열"false"
- 날짜를 문자열이나 숫자로 변환
String()함수와 toString()메서드를 사용, 날짜 (Date) 객체는 문자열과 숫자로 모두 변환 할 수 있는 유일한 타입
| 메소드 | 설 명 |
| getDate () | 날짜 중 일자를 숫자로 반환함.(1~31) |
| getDay () | 날짜 중 요일을 숫자로 반환함. ( 0(일요일)~6(토요일) ) |
| getFullYear () | 날짜 중 연도를 4자리 숫자로 반환함. (yyyy년) |
| getMonth () | 날짜 중 월을 숫자로 반환함. ( 1월(0) ~ 12월(11) ) |
| getTime () | 1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환함. |
| getHours () | 시간 중 시를 숫자로 반환함. (0~23) |
| getMinutes () | 시간 중 분을 숫자로 반환함. (0~59) |
| getSeconds () | 시간 중 초를 숫자로 반환함. (0~59) |
| getMilliseconds () | 시간 중 초를 밀리초 (millisecond) 단위릐 숫자로 반환함. (0~999) |
- 문자열을 숫자로 변환
Number()함수를 사용함, 문자열을 숫자로 변환해 주는 두개의 전역 함수를 별도로 제공
| 함 수 | 설 명 |
| parseInt() | 문자여을 파싱하여 특정 진법의 정수를 반환함. |
| parseFloat() | 문자열을 파싱하여 부동 소수점 수를 반환함. |
** 변수 **
- 변수의 선언과 초기화
데이터(data)를 저장할 수 있는 메모리 공간을 의미하여, 그 값이 변경될 수 있음.
var키워드를 사용하여 변수를 선언함.
선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류가 발생.
단, 선언되지 않은 변수를 초기화할 경우에는 자동으로 선언을 먼저 한 후 초기화를 진행.
선언된 변수는 나중에 초기화 할 수도 있고, 선언과 동시에 초기화 할 수 도 있습니다.
쉼표(,) 연산자를 이용하여 여러 변수를 동시에 선언하거나 초기화 할 수 있음.
예제)
var month // month라는 이름의 변수 선언
date = 25; //date라는 이름의 변수를 묵시적으로 선언
var month, date; //여러 변수를 한번에 선언
var hours =7, minutes = 15; //여러변수를 선언과 동시에 초기화
month = 10, date = 5;
- 변수의 타입과 초기값
변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수 도 있음.
한 변수에 다른 타입의 값을 여러 번 대입할 수는 있지만, 한 번 선언된 변수를 재선언 할 수는 없음.
- 변수의 이름
변수의 이름은 식별자이며, 변수의이름
영문자(대소문자), 숫자, 언더바(_), $만 사용할 수 있음.
숫자와의 구분을 빠르게 하기 위해 숫자로는 시작할 수 없음.
대소문자를 구분하며, 자바스크립트 언어에서 예약된 키워드는 이름으로 사용할 수 없음.
** 연산자 **
| 산술연산자 | +, -, *, /, % 연산자 우선순위 1순위는 소괄호 |
| 대입연산자 | =, +=, -=, *=, /=, %= |
| 증감연산자 | ++, -- (전치, 후치) |
| 비교연산자 | >, >=, <, <= == (값이 같으면 참을 반환), ===(값이 같고 타입이 같으면 참을 반환), != (값이 같지 않으면 참), !== (값이 같지 않거나, 타입이 다르면 참) |
| 논리연산자 | &&, ||, ! |
| 기타연산자 | 문자결합, 삼항, 쉼표, delete, typeof, instanceof, void연산자 - 문자결합 1) 피연산자가 둘 다 숫자이면, 산술 연산인 덧셈을 수행 2) 피연산자가 하나라도 문자열이면, 문자열 결합을 수행 - 삼항 : 표현식 ? 반환값1 : 반환값2 - 쉼표 : 여러 변수를 동시에 갱신할 경우 - delete : 객체의 프로퍼티 또는 배열의 요소등을 삭제함(삭제 성공시 true, 실패시 false) 배열의 요소 삭제시 - 배열의 요소만 삭제하고, 배열의 크기 유지(크기 줄이지 않는다.) |
typeof - 피연산자의 타입을 반환함
instanceof - 피연산자의 객체가 특정 객체의 인스턴스인지 아닌지를 확인함.
void - 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만을 반환.
** 예제) 1108_5 숫자 타입 **
** 예제) 1108_6 **
** 예제) 1108_7 **
링크를 동작하지 않습니다. -> 선택시 아무 효과 X
링크를 동작하지 않지만 HTML문서 배경은 변경됩니다. -> 선택시 배경 변경
소스 ↓
'수업끄적끄적_7MONTH > JavaScript' 카테고리의 다른 글
| 12/14 수업 (31일차) (0) | 2023.12.14 |
|---|---|
| 12/13 수업 (30일차) _ for in 문 / label 문 / 배열 / 함 (0) | 2023.12.13 |
| 12/12 수업 (29일차) (0) | 2023.12.12 |
| 12/11 수업 (28일차) _ (1) | 2023.12.11 |