강의노트

 아래주소의 github에 업로드된 예제코드를 다운받아 실습 할 수 있습니다.
 환경설정에 관한 정보는 여기를 참조해주세요.

 레포지토리에서 C_Javascript폴더를 참고해주십시오.

1. 선언: <script>...</script>에 코딩합니다.
   또는 <script src="script.js"> </script>로 로딩 합니다.
   또는 이벤트 속성에 속성값으로(onclick="javascript") 입력합니다.
   type속성을 <script type="text/javascript">...</script>으로 사용합니다. type속성이 지정되어 있지 않으면 javascript로 간주합니다.
   
2. 수행: 위에서 부터 수행합니다.
   • 아직 로딩되지 않은 객체를 불러온다던가, 준비되지 않은 작업을 수행할 수 없습니다.
   • 실행중에 에러가 발생하면, 다음 줄을 수행하지 않고, 중단합니다.
   • function은 수행하지 않습니다. 호출되었을 때, 수행합니다.
3. 입력: 모든 라인은 세미콜론(;)으로 마무리되어야 합니다.
4. 주석: // (한줄 주석), 또는 /* */ (여러줄 주석)을 사용할 수 있습니다.

환경설정

환경1 : 브라우저

로그 출력

console.log("안녕하세요.");
console.log("안녕하세요.", "반가워요!");

예제는 버튼을 눌렀을 때, 로그를 출력합니다. F12를 눌러서 로그를 확인합니다.

경고 메시지 출력

alert('경고버튼 입니다.')

예/아니오 입력

if(confirm('확인하셨습니까?')){
  console.log('확인되셨습니다.');
}else{
  console.log('취소합니다.');
}

문장 입력

prompt('이름을 입력하세요:')

환경2 : Node.js

 Node.js는 javascript runtime환경을 구축하고, 서버를 개설해주는 어플리케이션입니다. 아래 링크에서 다운로드 받습니다.

 Extension(ctrl + shift + x)에서 vscode와 Node.js를 연결해 줄 code runner를 설치합니다.

 (option)단축키 설정(Command Palette(ctrl + shift + p)에서 "keyboard shortcuts"검색)에서 "code runner.run"항목의 단축키를 F5로 교체합니다.

 실습파일(.js)에서 우상단 Run Code(F5) 실행

기초문법

변수

변수의 선언

 ※ 모든 변수는 초기화이전에 'undefined'라는 상태를 갖습니다.
 ※ hoisting: 변수의 선언이 스코프scope의 최상단에 끌어올려지는 현상(초기화X)

 // 아직 선언되지 않았다. hoisting.
console.log(what, typeof what); // 출력: undefined 'undefined'

var what = '20'; // 선언
console.log(what, typeof what); // 출력: 20 string

what = null; // null 입력
console.log(what, typeof what); // 출력: null 'object'
    

변수의 타입

 ※ 원시타입과 참조타입의 구분은 "직접 저장하는가" vs" 저장된 주소를 가리키는가" 입니다. 임베디드 개발이 아니라면 크게 의미가 없을 수도 있습니다. 일례로 typeof null은 object로 출력되지만 고치지 않고 있습니다.

 ※ 특수문자(이스케이프 문자:위키) : (\n) 줄바꿈, (\") 큰따옴표, (\')작은 따옴표...

typeof

 변수 타입을 알고 싶을 때, typeof를 사용합니다.

typeof(변수명); 또는
typeof 변수명;

연산자

 Bit와 관련하여 2진법 문서를 참고하십시오.

제어문

응용[배열]

반복문

for (var i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

myArray.forEach(function (element) {
  console.log(element);
});

다중배열

var myArray = [[배열1], [배열2]];

myArray[배열#][순번#] = 값;

복사

var newArray = oldArray;
var newArray = [...oldArray]; // 전개연산자 spread operators

함수

문법(syntax)

function 함수이름([전달인자]) {
  내용;
  return [리턴 변수];
}

[리턴 받을 변수] = 함수이름([전달인자]);

function max(a, b) {
  if (a > b)
    return a;
  else
    return b;
}

 함수는 기능을 하나로 묶어서 호출이 되었을 때, 기술된 내용을 수행합니다.

• 전달인자(Argument)는 여러개이거나 생략될 수 있습니다.
• 전달인자는 넘겨주는 순서가 중요합니다.
• 리턴(retnrun)은 한개 또는 생략만 가능합니다.
• 리턴이 수행되면, 그 행에서 함수가 종료되고, 호출한 함수로 돌아갑니다.

함수객체

 함수란 하나의 코드 덩어리이고, 어딘가에 저장되어 있을 것 입니다. '어딘가'를 변수로 갖고, 동작방식만 함수와 같이 수행한다면 함수도 변수와 같이 취급할 수 있게 됩니다.

 함수를 변수처럼 저장하고 사용할 수 도 있습니다. 아래 예시에서, myfunc은 이미 선언된 함수입니다. myVarFunc에서 myfunc를 마치 변수처럼 저장하였습니다. 마지막으로 myVarFunc()을 함수처럼 호출하면서 사용할 수 있습니다.

function myfunc(argu) { ... };
var myVarFunc = myfunc;
myVarFunc(argu);

즉시 실행

 다음과 같이 선언하면, 선언과 동시에 실행이 됩니다.

(function func1(arg1) {
  console.log(arg1);
})("즉시 실행");
    

익명함수

 함수의 가장 큰 목적은 재사용성에 있습니다. 이 때, 호출을 위해서 함수이름이 필요합니다. 만약 한번만 쓰이는 함수라면, 굳이 함수의 이름을 작성하지 않아도 됩니다. 호출 방식은 다음과 같습니다.

(arg1, arg2, ...) => { ... }

var myfunc = (e) => { console.log(e); };

가변인자

 입력 인자의 갯수가 고정되어있지 않을 때(예:log함수) 다음과 같이 설졍할 수 있습니다.

function func1(...arguments) {
  arguments.forEach((arg) => console.log(arg));
}

기본제공 함수

 Javascript가 기본적으로 제공하는 메소드(method, =function함수)를 이용한 예제