[Javascript] 기본

소스 작성 방법

1. HTML 파일에 작성
   • HTML파일 어디에 작성해도 좋지만, 일반적으로 </body>태그 위에 작성.
   • <script></script> 태그 안에 작성해야 Javascript 코드라고 인식을 한다.
2. JS파일에 작성
   • .js 로 끝나는 파일 (ex: myScript.js)
   • html에 연결을 해줘야 한다.
     • <script src='myScript.js'></script>
     • 마찬가지로 html 어디에 작성해도 좋다.

documnet.write();

• 인자로 들어가는 문자열이 브라우저 화면에 표시된다.
• ex) document.write('안녕하세요');

console.log();

• 콘솔창에 출력
• ex) console.log('안녕하세요');

세미콜론 (;)

• 하나의 명령어가 끝났음을 의미
• 자바스크립트는 유연한 언어라서, 세미콜론을 입력하지 않고 줄바꿈만으로도
  하나의 명령어가 끝남으로 인식한다.
  • 다만 둘 이상의 명령어를 입력하고 세미콜론이 없으면 오류가 난다.

주석

• 컴퓨터가 인식하지 못하는 코드
• 방법1) // : 한 줄 주석
• 방법2) /* */ : 여러 줄 주석

변수(Variable)

• Variable의 앞 3글자 var키워드로 변수 선언을 한다.
• ES6 이후 let, const 키워드로도 변수를 선언할 수 있다.
• 변수 이름은 값이 뭘 의미하는지를 나타낸다.
• ex) var name = '홍길동';

Math.random();

• 0~1 사이의 임이의 실수(float)를 반환.

parseInt();

• 인자로 넣은 값을 정수로 변환해서 반환
  • 실수 타입, 문자열 타입, ... => 정수 타입

배열

• var arr = []; // 배열 선언 및 초기화(객체 생성)
• var arr = [1,2,3,4,5,6]; // 선언 및 값도 넣어서 초기화
• arr.push(7) // 배열의 마지막에 값 추가
• arr[0] // index로 배열의 값 반환
• arr.indexOf(0); // 값이 있으면 인덱스 반환. 없으면 -1 반환
  • 값이 있는지 없는지 판단이 가능
• arr.length; // 배열의 길이 반환
• arr.sort(); // 배열 정렬 (사전순)
• arr.sort((a,b) => a-b); // 배열 정렬 (오름차순)
• arr.sort((a,b) => b-a); // 배열 정렬 (내림차순)

DRY

• Don't Repeat yourself
• 프로그래밍에서 유명한 철학
• 반복되는 코드를 작성하지 마라.

반복문

for (var i = 0; i < 6; i++) {
	// 반복하려는 코드
}

DOM

• Document Object Model
• html 코드에 쉽게 접근하게 해준다.
• 화면을 구성하는 모든 것들에 접근하고 수정 등이 가능하다.
• var username = document.getElementById('username').value;
• document.getElementById('username').innerHTML = 'mike';
// html 태그 안에 문자 수정

String

• var str = '안녕하세요';
• if (str.length == 0) {} // 공백을 포함한 문자열의 길이 반환

함수(function)

• 명령어들의 모음
• 중복된 코드를 제거하여, 재사용하기 위함
• 함수 정의 방법
  • function 함수명(매개변수) { 코드블록 }

이벤트, 이벤트 핸들링

• 이벤트
  • 마우스 클릭, 키보드 누름, 값 변화, 페이지 로딩 ...
• 이벤트 핸들링
  • 어떤 이벤트가 발생하면 ~~를 하라고 실행시키는 코드.
  • javascript로 작성해 놓은 함수를 적용한다.
• 사용 방법
  • 사용하고자 하는 html 태그 안쪽에 이벤트=이벤트핸들링을 작성
    • <textarea 이벤트=이벤트핸들링></textarea>
    • ex) <textarea onkeydown='alarm();' ~~></textarea>