[JavaScript] 기초

개요
1. 웹 프론트엔드의 3요소
  1. HTML : 웹 문서의 구조
  2. CSS : 웹 문서의 스타일시트
  3. JAVASCRIPT : 웹 문서의 이벤트 처리
2. 자바 스크립트란?
  1. 인터프리터 방식의 스크립트 언어로, 웹 문서에서 일어나는 사용자의 이벤트들을 처리하는 동적 문서를 의미한다. 인터프리터 방식이기에 수행 속도가 빠르다.
  2. 인라인, 내부, 외부 방식을 혼용할 수 있으며, 소스코드가 웹에 공개되어있기 때문에 보안에 취약하다.
변수와 자료형
1. 변수
  1. var : 모든 자료형을 하나의 형태로 받고 인터프리터가 타입 추론을 하여 자료형을 판단한다. 중복선언으로 발생하는 소통의 혼선으로, 최근에는 사용하지 않을 것을 권하고있다.
  2. let : var와 유사하지만 중복 선언이 불가능하다.
  3. const : 상수 변수. 선언하면서 할당해야하며, 재할당이 불가능하다. (console에 typeError 발생)
    
    중복 선언 재할당
    
    var O O
    
    let X O
    
    const X X
2. 범위
  1. 전역변수 : script 요소 사이에서 다른 scope에 들어가지 않고 가장 바깥에 선언된 변수. 만약 scope 안인데 선언하지 않고 할당을 하는 경우, 전역변수 취급을 한다.
  2. 지역변수 : 전역변수와 동일한 이름의 지역변수가 생성되는 경우 this.를 붙여 해당 지역변수를 선택한다는 사실을 명시한다.
3. 자료형
  1. String : 문자열
  2. Number : 숫자로만 이루어진 자료형은 타입 추론을 통해 Number 데이터로 취급한다. 다만 사용자가 입력한 값은 숫자 형태여도 String으로 인식한다.
  3. boolean : true, false. false처럼 보이는 공백, null 등을 뺀 나머지는 모두 true 취급을 한다.
  4. object : 배열, 객체 등
  5. function : 함수. 어떠한 한 기능을 구현하는 집합.
  6. undefined(초기화가 안된 변수)
  7. 주의 : 변수의 타입은 자동으로 자바스크립트가 해석하지만, input 등 사용자가 입력하여 나온 결과값은 모두 String으로 인식한다. 따라서 아스키 코드 등 여타 다른 방식을 사용하려면 조건을 달아줘야한다.
입출력
1. 입력
  1. window.confirm('질문'); //확인 : true, 취소 : false로 반환.
  2. window.prompt('질문'); //입력을 받아 값을 반환. 취소 시 null 값을 반환.
  3. //요소.속성;(id, className, innerHTML/innerText, ...) //직접 값 변경
  4. //선택한 input 요소.value;//이것들도 입력이라고 봐야하나?
2. 출력
  1. window.alert('경고창');
  2. window.console.dir(하위 속성 등 볼 내용);
  3. window.console.log('console에 찍을 내용');
  4. document.write('화면에 출력할 문구');
  5. 선택한요소.innerHTML/innerText = '해당 요소에 출력할 내용';

배열

배열의 선언

배열도 var, let, const 중 하나로 선언한다. 자료형에 상관없이 하나의 배열에 담을 수 있다.

var arr1 = new Array(2);//배열 객체의 생성자 함수
var arr2 = new Array('red', 'blue');

var arr3 = [];
var arr4 = ['red', 'blue'];

크기를 지정할 수도 있고, 지정하지 않아도 선언 가능하다. 크기를 넘어가도 자바의 List처럼 추가 가능.

자주 사용하는 메소드

메소드	의미	반환값	원본 보존 여부
.indexOf('요소')	요소의 인덱스를 반환	요소의 인덱스	보존
.concat(배열, 배열,...)	배열에 배열들을 결합	배열	보존
.reverse()	역순으로 바꿈	배열	덮어쓰기
.sort()	오름차순으로 정렬	배열	덮어쓰기
.push(추가할 요소)	끝에 요소를 추가	배열의 크기	덮어쓰기
.pop()	끝 요소를 제거	제거된 요소	덮어쓰기
.unshift(추가할 요소)	시작에 요소를 추가	배열의 크기	덮어쓰기
.shift()	시작 요소를 제거	제거된 요소	덮어쓰기
slice(인덱스1, 인덱스2)	인덱스 이상 인덱스 미만 추출	배열	보존
splice(인덱스,제거 수,추가값)	인덱스부터 제거하고 추가한다	제거된 배열	덮어쓰기
.join('구분자')	구분자로 배열의 요소들을 합친다. 구분자가 없다면 ', '로 구분	하나의 문자열	보존

함수
1. 함수와 메소드 : 독립적으로 작동하면 함수. 객체나 특정 요소의 함수 속성은 메소드.
2. 함수의 종류
  1. 선언적함수 : 함수를 선언할 때 이름으로 선언하는 방법. 이름만으로 여러 곳에서 호출이 가능하다.
  2. 익명함수 : 함수를 선언할 때 이름 없이 기술하는 방법. 선언한 곳 외에서 사용할 수 없다.
```
function test(){//선언적 함수
	//코드들...
}

window.onload = function(){//익명 함수
	//코드들...
}
```
3. 매개변수
```
function test(a) {
    console.log(a);
}
```
  1. 정의해둔 매개변수보다 많이 전달 가능, 적게 전달하면 남은 자리는 undefined.
  2. 매개변수들은 arguments 배열 : for(var i in arguments)
  3. this : 현재 요소객체를 함수의 매개변수로 전달
4. return 반환값; 함수를 호출한 곳에 전달할 값.

객체

객체란?
1. key:value의 형태로 여러 속성을 하나의 변수에 저장할 수 있는 데이터타입.
```
var 변수명={
	속성명 : 속성값,
	속성명 : 속성값,
	속성명 : 속성값,
	...
}
```
2. 메소드 속성
  1. 객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다. 보통 익명 함수로 작성.
```
var student = {
    name: '박한별',
    age: 20,
    group: 'A',
    study: function(subject){//study는 student의 메소드 속성
    	area.innerHTML=this.name+'은 '+this.name+'살이며 '+this.group+'반이다.<br>';
    }
}
```
3. 속성에 접근
  1. 객체명.속성명
  2. 객체명['속성명'] : 단 속성명에 특수문자나 공백이 포함될 경우 '속성명' 형태로 저장하고, 불러올때도 ['속성명']의 형태만 가능하다.
  3. '속성명' in 객체명
  4. with(객체명){ /*변수는 다른 객체를 참조하지 않는 경우 with에 기술한 객체의 속성으로 취급한다.*/}
  5. 속성의 추가 : 객체명.속성명 = '값'; 중복된 속성명은 값을 덮어쓰기. with는 읽기 전용.
  6. 속성의 제거 : delete(객체명.속성명);
4. 반복문
  1. 접근할 때 숫자형태의 인덱스가 존재하지 않기 때문에, for in문만 사용할 수 있다.
```
for (var key in student) {
	area.innerHTML += student[key] + '<br>';
}
```
5. 생성자 함수
  1. ```
  var student0 = new Student('박한별', 20, 'B');
  var student1 = new Student('윤새봄', 22, 'A');
  var student2 = new Student('한예림', 21, 'C');
  
  var students = [student0, student1, student2];
  
  function Student(name, age, group){
  	this.name = name;
      this.age = age;
      this.group = group;
  }
```

객체 기본제공 속성

공통

속성 의미

.className 클래스명을 가리킴

.close 해당 객체를 닫음

문자열

자주 쓰는 속성

속성 의미

.length 해당 문자열의 길이

자주 쓰는 메소드

메소드	의미
.toUpperCase() / .toLowerCase()	전부 대문자/소문자로 변환
.indexOf('key')	해당 문자가 처음 등장하는 인덱스
.substring(start_index, end_index)	시작인덱스 이상 끝인덱스 미만의 문자열 반환
.split('구분자')	구분자를 사용해 문자열을 나누어, 배열 형태로 반환

Math
1. 강제형변환(문자->숫자) : 사용자가 입력한 값은 String 형태로 받으므로 산술연산 시 숫자 형태로 바꿔줄 필요성이 있다.
  1. Number(문자열)
  2. parseInt(문자열)
  3. parseFloat(문자열) //소수점이 없는 경우 나온다.
  4. 숫자인지 문자인지 판별하는 방법
```
var inputNum = document.getElementById('numOrNot').value;

if(inputNum / inputNum == 1)
	alert('숫자입니다.');
else
	alert('숫자가 아닙니다.);
    
//==는 자료형 비교 없이 내부의 내용이 일치하는지 판별, ===는 자료형까지 비교
if(inputNum===Number(inputNum))
	console.log('숫자입니다.');
else
	console.log('숫자가 아닙니다.);
```
2. 자주 쓰는 메소드
  
  메소드 의미
  
  .abs('숫자들') 절댓값
  
  .random() 0~0.999... 무작위 수 반환
  
  .round / .floor / .ceil 반올림 / 버림 / 올림
  
  .sqrt(루트씌울 수) 루트

Date

현재

var now = new Date();//현재 날짜 및 시간

var date1 = new Date(년, 월, 일, 시, 분, 초, 밀리초);
var date2 = new Date(2021,11,25);//월은 0부터 시작 : 2021,0,1 == 2021년 1월 1일

자주 쓰는 메소드

메소드	의미	반환
.getFullYear()	년도 반환	Number형
.getMonth()+1	월 반환	Number형
.getDate()	일 반환	Number형
.getDay()	요일 반환	일요일 == 0
.getHours()/Minutes()/Seconds()	시/분/초	Number형

window : 최상위 객체. 생략 가능.
1. window.open('url','tab name','style');
2. window.setTimeout(함수, 시간(ms));
3. window.setInterval(함수, 시간(ms));
객체 모델

BOM(Browser Object Model) : 브라우저 창과 관련된 객체

window
navigator : appVersion, language, platform 등의 속성이 있다.
location : 주소와 관련된 객체(url). host, href=현재주소, port, protocol 등의 속성이 있다.

메소드 속성 의미

location.assign('url') 해당 url로 이동

location.replace('url') 현재 페이지를 해당 url로 교체

location.reload() 현재 페이지 새로고침

screen : 사용자 스크린의 정보를 가진 객체.

속성
width / height	모니터의 너비, 높이
availWidth/availHeight	스크린의 너비, 높이
pixelDepth	컬러 해상도
window.outerWidth/Height는 현재 브라우저 창의 너비,높이

History : 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장

속성	의미
history.length	History 리스트에 들어있는 url의 개수
history.back()	history 리스트의 이전 url
history.forward()	history 리스트의 다음 url
history.go(이동할 수)	리스트에서 해당 값만큼 옮긴 페이지 주소로 변경

DOM(Document Object Model) : html 문서의 요소와 관련된 객체
1. document
  1. 요소객체 접근 메소드
    1. document.getElementById('검색할id'); : id는 하나만 존재하므로 요소객체 하나만 반환.
    2. document.getElements.... -> 여러개를 한번에 검색. 선택된 요소들이 배열에 담겨서 반환된다.
```
var h3Tags = document.getElementsByTagName('h3');
for(var i in h3Tags)
	h3Tags[i].style.background='yellow';
```
  2. DOM TREE 구조 : 계층 구조로 상위 노드에서 하위 노드로 파생.
    1. 노드 종류
      1. 문서 노드 : 최상단 노드로 모든 노드에 접근하기위한 시작점.
      2. 요소 노드 : HTML 요소를 의미. HTMLElement 객체를 상속한 객체로 구성. 요소에는 어트리뷰트와 텍스트 노드가 붙어있다.
        
        텍스트 노드가 없는 노드 : 시작 태그만 존재해서 cotent부가 없는 요소 노드
      3. 속성 노드(Attribute Node) : HTML 요소의 attribute를 의미
      4. 텍스트 노드 : HTML 요소의 content를 의미
      5. 주석 노드 : HTML의 comment를 의미
    2. 노드 구조
      1. 요소들 사이에는 부모)
      2. 노드 삭제 : 지울 요소객체명.remove()
    3. 노드 트리
      1. 루트 노드(root node) : 가상 상위 노드.
      2. 부모 노드(parent node)
      3. 자식 노드(child node)
      4. 조상 노드(ancestor node)
      5. 자손 노드(descendant node)
      6. 형제 노드(sibling node)
      7. .firstchild / .lastchild : 첫번째/마지막 자손을 가리킴

이벤트
1. 이벤트 타입 : 이벤트의 종류. ex) click, mousemove, scroll, ...
2. 이벤트 핸들러 : 해당 이벤트가 있을 때 작동하는 함수.
3. 이벤트 모델
  1. 고전 이벤트 모델
```
<button id="btn">버튼</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick=function(){
        //코드들...
    }
</script>
```
  2. 인라인 이벤트 모델
```
<button onclick="test();">버튼</button>
<script>
	function test(){
    	//코드들...
    }
</script>
```
  3. 표준 이벤트 모델 : 하나의 이벤트에 여러 핸들러를 등록할 수 있다. 원래는 하나의 이벤트 당 하나의 핸들러가 기본.
```
//요소객체.addEventListener('이벤트명', 이벤트핸들러);
var btn = document.getElementById('btn');
btn.addEventListener('click', function () { alert('나와라!') });
btn.addEventListener('click', function () { console.log('나와라!') });
```
4. 이벤트 타겟 : 이벤트가 발생하는 객체
  1. window.event.target; : window에서 이벤트가 발생한 타겟을 가리킴.
  2. function(e){ e.target; } : 매개변수를 이용하여 이벤트를 가리킴.
  3. function(){ this; } : 현재 이벤트를 가리킴.
5. 이벤트 해제 : return false를 통해 태그가 가지고있는 기본 이벤트 속성을 실행하지않고 정지.
```
<form action="test.do">
        <input type="password" name="userPwd" id="userPwd">
        <input type="password" id="checkPwd">
        <input type="submit" value="SUBMIT" onclick="return validate();">
</form>
<script>
	function validate(){
    	var userPwd = document.getElementById('userPwd').value;
    	var checkPwd = document.getElementById('checkPwd').value;
        if(userPwd != checkPwd){
            alert('두 비밀번호가 일치하지 않습니다.');
            return false;
        }
        
        alert('비밀번호 일치');
        return true;
    }
</script>
```
  1. 유효성검사할 선언적 함수를 만들고 두 요소객체의 value를 변수로 받아오기
  2. 비밀번호가 일치하지 않으면 false
  3. 일치하지 않는 경우, validate 함수에서 반환된 값을 통해 onclick에 "return false"를 전달
  4. onclick할 경우에 'input submit 타입인 요소객체의 기본 이벤트'인 submit이 false가 됨

'FRONT-END' 카테고리의 다른 글

[JSP] EL, 액션 태그, JSTL (1)	2022.02.16
[JQuery] 기초 (3)	2021.12.28
[HTML&CSS] 웹 문서 기본 제작 (0)	2021.12.13

밍밍씨

[JavaScript] 기초

'FRONT-END' 카테고리의 다른 글

티스토리툴바

속성	의미
.className	클래스명을 가리킴
.close	해당 객체를 닫음

메소드	의미
.abs('숫자들')	절댓값
.random()	0~0.999... 무작위 수 반환
.round / .floor / .ceil	반올림 / 버림 / 올림
.sqrt(루트씌울 수)	루트

메소드 속성	의미
location.assign('url')	해당 url로 이동
location.replace('url')	현재 페이지를 해당 url로 교체
location.reload()	현재 페이지 새로고침

	중복 선언	재할당
var	O	O
let	X	O
const	X	X

속성	의미
.length	해당 문자열의 길이

[JavaScript] 기초

'FRONT-END' 카테고리의 다른 글

관련글

티스토리툴바