자바스크립트 1
자바 스크립트
스크립트 타입의 언어.(기계어로 번역이 되지 않고 실행이 되는 시점에 라인 단위로 번역이 이루어져 실행되는 언어)
- 문법적으로 비교적 까다롭지 않음 (문법이 안 맞으면 HTML처럼 실행은 되지만 비정상적으로 실행됨)
1. 자바 스크립트의 역할
- 태그 요소(Element)의 추가 및 삭제
- CSS 및 HTML 요소의 스타일 변경
- 사용자와 상호작용
- 다른 페이지로 데이터를 보낼 때 유일하게 사용할 수 있는 <form> 태그 (input, button 등등)의 유효성 검증
- 마우스나 키보드의 이벤트 처리 ( 이벤트가 발생 했을 때, 해당 스크립트를 실행하도록 하는 역할)
2. 기본 문법 (작성법)
- 대소문자 구분함
- 문장의 끝은 ';'이 온다. (생략은 가능하나 비추천)
- 큰 따옴표, 작은 따옴표 혼용 가능 ( 쌍은 맞추어서 사용)
자바 스크립트 작성 위치
1. HTML 태그의 속성 위치
2. HTML 문서 내부의 <script> </script> 태그 사이에 위치 (<head> 내부에도 가능, <body> 내부에도 가능, <body></html> 사이에도 가능)
3. 하나의 독립된 외부파일로 작성을 하여 포함시킴 <script src = "파일.js"></script> 로 추가 (단축으로, <script src = "파일.js"/>로 써도 됨
자바 스크립트 출력 방법 (HTML에 출력함)
1. document.write("출력내용(html 명령어)");
- <body>에 출력
- 출력 내용은 html 태그를 작성하여 스타일 등 적용
2. alert() 함수 사용.
3. innerHTML
4. 개발자 도구 (크롬에서는 f12) 콘솔에 출력
-console.log();
변수의 유형
1. 숫자 (정수, 실수)
2. 문자열
3. 객체(요소도 객체이다.)
4. boolean(true/false)
5. 배열
변수명 작성 규칙
1. 알파벳 대소문자, 밑줄, $ , 숫자사용
2. 문자, 밑줄, $로 시작
3. 대소문자 구분
4. 한글(유니코드) 가능 비추!
호이스팅(Hoisting)
변수 사용 이후에 변수의 선언이 나와도 정상적으로 실행되는 현상.
선언 없이 먼저 변수를 사용(대입,연산,출력 등) 하고 나중에 선언을 해도 정상 처리 됨.
-- 가급적 쓰지 말자.(가독성이 떨어진다)
연산자
문자열 연산자 : + 두 문자열을 붙여줌
산술 연산자 : +, -, /, *, %, ++, --
비교 연산자 : >, <, >=, <=, == , !=, ===(equal), !== (not equal)
조건 연산자 : 조건식 ? 참 : 거짓;
제어문
조건문 : if ~ else, switch~case
반복문 : while, for, for of (자바의 for each문, for each라는 함수는 따로 있다)
함수와 연계되는 변수의 위치
전역 변수
페이지 전체 영역에서 사용할 수 있는 변수
지역 변수
함수 내부 (중괄호 안)에서 선언된 변수
선언 시 전역변수와 구분하기 위해 var 대신에 let을 사용
상수
값을 변경할 수 없는 변수
const 변수명 = 초기값; --
이후...
변수명 = 값; --> 에러
무명함수(함수의 이름이 없는 함수, 기능만 정의 되어있음)
변수에 함수를 대입 ( var a = function)
반드시 호출 전에 작성 되어야함 (호이스팅 배제)
같은 이름으로 작성 된 일반 함수보다 우선 순위가 높음.
우선순위가 높은 함수만 호출이 된다.
(오버로딩 개념이 없기 때문에 의미없음)
태그에서 발생하는 이벤트 처리를 위한 기능을 할 때 많이 쓰임
참고 - NaN : Not a number
변수에 함수를 대입.
일반 변수에 정의된 함수를 대입
arguments 객체
함수 내부에 자동으로 생성되는 인자 저장 배열 객체.
arguments.length로 인자의 갯수를 구하고,
arguments[idx]로 각 위치의 값을 구할 수 있음.
배열
DOM/BOM (document of model / browser of model)
자바 및 C와는 다르게, 여러 가지 타입의 데이터가 한 배열에 다 들어갈 수 있다.
변수의 묶음. 타입 구분이 없다 (자료형의 구분이 없다), 크기 지정을 안함
생성 방식
1. var 배열명 = [값1, 값2, .. ];
2. var 배열명 = []; - 크기 지정 안된 배열 선언
3. var 배열명 = new Array(값,값,...); - 대괄호 말고 소괄호가 들어감.
4. 변수에 함수를 넣을 수 있듯이, 배열에도 함수를 넣을 수 있다.
배열 TIP.
체크버튼으로 체크하면, 그 value값들을 배열로 넣어서 활용하는 데 좋다.
배열 함수(메소드)
join()
배열의 원소를 문자열로 변환하여 연결
sort()
배열의 원소를 오름차순으로 변환.
반환값은 원본의 주소. ( -- 원본이 변경됨)
reverse()
배열의 원소를 역순으로 변환. (내림차순으로 바꿀 때, 유용)
참고.
'='을 사용하여 배열을 복사할 수 있음
원본의 주소가 복사되기 때문에 사본을 변경할 경우, 원본도 같이 변경이 됨 (shallow copy)
slice()
원본이 변경 되지 않음
배열의 부분 추출
추출한 내용으로 새로운 배열 생성.
slice(원하는 데이터 시작위치, 원하는 데이터 끝 위치 + 1);
배열의 값 전체를 복사하여 새 배열을 작성 할 때도 활용 가능
- 이 때 slice()로 인자를 넣지 않음.
splice()
원본을 변경시킴
원본에서 범위에 속한 원소를 추출하여 새로운 배열을 생성하고 원본에서는 제거.
원본에 새로운 원소를 추가.
배열의 스택화
자료구조의 가장 기본
1) 스택용 함수
배열.push(원소, 원소, ...);
배열의 끝에 새 원소를 추가.
배열.pop();
배열의 끝에 있는 원소를 추출하고 제거함.
배열.unshift(원소,원소,...);
배열의 시작에 원소를 추가함.
배열.shift();
배열의 시작에 있는 원소를 추출하고 제거함
push,pop/unshift,shift 의 차이
push,pop는 배열의 맨 뒤에서!
unshift,shift는 배열의 맨 앞에서!
배열의 foreach
배열의 처음부터 마지막까지 순회.
처음위치의 값부터 꺼내와서 동일한 처리를 할 경우 활용할 수 있는 함수.
foreach의 인자로 처리를 위한 함수를 입력함.