3일만에 끝내는 HTML, CSS, JS 기초

자바스크립트에서 저지르기 쉬운 실수 자바스크립트 에서 일반적으로 발생하기 쉬운 실수 에 대해 알아 보겠습니다. 비교 연산자 (comparison operator, == ) 대신에, 할당 연산자 (Assignment Operator, = ) 를 if 문 내에서 사용하여 오류가 나는 경우입니다. 원래는 아래와 같이 비교 연산자로 비교하여야 하며, myAge == 20 은 false 가 되어야 합니다. var myAge = 40; if (myAge == 20) 그런데 아래와 같이 할당 연산자로 잘못 사용하면, myAge = 20 에서 20 은 true 이므로, if 문의 조건식은 true 가 되어 버립니다. var myAge = 40; if (myAge = 20) switch 문에서는 엄격 비교 (strict..

자바스크립트 코딩 규칙 자바스크립트 프로젝트에 동일한 코딩 규칙 (coding conventions) 을 일괄 적용하는 것이 좋습니다. 코딩 규칙은 프로그래밍을 위한 스타일 가이드라인 (style guidelines) 입니다. 일반적으로 다음과 같은 내용을 포함합니다. 변수나 함수에 대해 이름 부여 (Naming) 와 선언 (declaration) 에 대한 규칙 화이트스페이스 (white space), 들여쓰기 (indentation), 그리고 주석처리 (comments) 의 사용에 대한 규칙 프로그래밍 관행 (practices) 과 원칙 (principles) 코팅 규칙은 팀내에서 따라야 할 규칙으로 문서화 될 수도 있습니다. 변수의 이름 (variable Names) 은 변수와 함수의 식별 이름으로,..

자바스크립트 호이스팅과 스트릭트 모드 호이스팅 (Hoisting) 은 자바스크립트의 기본 기능으로서, 선언 (declarations) 을 맨 위로 이동 시킵니다. 자바스크립트의 선언은 호이스트 됩니다. 자바스크립트 에서는, 변수는 먼저 사용된 다음에 선언 될수도 있습니다. 다른 말로는, 변수는 선언되기 전에 사용될 수도 있습니다. 이것을 이해하려면 "호이스팅 (hoisting)" 이라는 용어를 이해해야 합니다. 호이스팅은 자바스크립트의 기본 기능으로서 선언을 현재의 스크립트나 함수의 맨 윗 부분으로 이동시킵니다. 그렇지만 자바스크립트는 초기화 (Initializations, 초기 값을 할당하는 것) 는 호이스트 하지 않습니다. 자바스크립트는 단지 선언만 호이스트 하고, 초기화는 호이스트 하지 않습니다. ..

자바스크립트 디버깅 디버거 (debugger) 없이 자바스크립트 코드를 쓴다는 것은 매우 어렵습니다. 코드에 구문 에러나, 논리적 에러 들은 진단 하기도 매우 어렵습니다. 어떤 때는 자바스크립트 코드에 에러가 있을 때 조차도 아무 것도 발생하지 않을 수 있습니다. 에러 메시지도 없고 어디에서 에러를 찾아야 할지 암시 조차 없을 수도 있습니다. 프로그래밍 코드에서 에러를 찾는 것을 코드 디버깅 (code debugging) 이라고 합니다. 디버깅은 쉽지는 않습니다. 그러나 다행히도 대부분의 브라우저 들은 내장된 디버거 (a built-in debugger) 를 가지고 있습니다. 내장된 디버거 들은 켜고 끌수가 있고, 에러를 사용자에게 보고하도록 할 수 있습니다. 디버거로 일시 중단점 (breakpoints..

자바스크립트 에러 처리 try 문은 코드 블록에 에러 (errors) 가 있는지 테스트 하게 합니다. catch 문은 에러를 처리할 수 있게 합니다. throw 문은 사용자 정의 에러 (custom errors) 를 생성하게 합니다. finally 문은 try ... catch 의 결과에 상관없이, 항상 실행되어야 하는 코드를 정의 합니다. 자바스크립트 코드를 실행할 때 다양한 에러가 발생할 수 있습니다. 에러는 프로그래머가 만든 코딩 에러일 수도 있고, 잘못된 입력값에 기인하거나, 다른 예측할 수 없는 것에 의해 발생할 수도 있습니다. try 블록 안에 어떤 에러가 있다면, catch 블록에서 그 에러를 잡아내고 처리하기 위한 코드를 실행합니다. try 문은 코드가 실행되는 동안에 에러가 있는지 여부를..

자바스크립트 정규 식 정규 식 (regular expression) 은 일련의 문자들 (characters) 인데, 검색 패턴 (search pattern) 을 형성합니다. 텍스트에서 데이터를 검색할 때, 무엇을 찾는지 표현하기 위해 이 검색 패턴 (search pattern) 을 사용할 수 있습니다. 정규 식 (regular expression) 은 단일 문자 일수도 있고, 좀더 복잡한 패턴일 수도 있습니다. 정규 식 (Regular expressions) 은 텍스트 검색 및 텍스트 교체 연산 (text replace operations) 에 사용될 수 있습니다. /pattern/modifiers; var myText = "조선 중기의 무신이었던, General Lee Sun-Shin은 1545년 탄생..

자바스크립트 자료형 변환 String() 은 자료형 (data type) 을 문자열 (String) 으로 변환하고, Number() 는 자료형을 숫자 (Number) 로 변환합니다. Boolean() 은 자료형을 불리언 (Boolean) 으로 변환합니다. 자바스크립트 자료형 (JavaScript Data Types) 에는 5 가지의 자료형이 있습니다. string문자열 number숫자 boolean불리언 object객체 function함수 그리고 객체에는 3 가지 형태가 있습니다. Object객체 Date날짜 Array배열 그리고 값을 가질 수 없는 자료형이 2 가지가 있습니다. null널 값 undefined정의되지 않음 typeof 연산자는 변수, 객체, 함수 또는 식 (expression) 의 자료..

자바스크립트 break 와 continue break 문은 루프를 빠져 갑니다. continue 문은 루프에서 한번의 반복을 건너 뜁니다. break 문에 의해 카운트 다운이 중지됩니다. break 문은 switch() 문의 밖으로 나가는데 사용될 수도 있고, 루프 에서 빠져 나가는데도 사용됩니다. break 문은 루프를 부수고 루프의 다음에 있는 코드를 계속 실행합니다. break 문에 의해 카운트 다운이 중지됩니다. 10에서부터 짝수만 카운트 다운 합니다. 10, 8, ... continue 문은, 지정한 조건이 발생하면, 루프 내에서 한번 반복하는 것을 건너 뜁니다. 그리고는 루프 내에서 다음의 반복을 계속 합니다. 10에서부터 짝수만 카운트 다운 합니다. 10, 8, ... [광고] Udemy 동..

자바스크립트 Loop 문 매번 값만 조금씩 바꾸어 가면서, 같은 코드들을 계속 반복하고자 할 때, Loop 를 사용할 수 있습니다. Loop 는 배열과 함께 사용되는 경우가 많습니다. Loop 에는 종류가 많은데, 자바스크립트 에서도 여러가지의 Loop 를 지원합니다. for 루프 : 코드들을 여러번 반복합니다. for/in 루프 : 객체의 프로퍼티를 반복합니다. while 루프 : 조건이 true 인 동안에만 코드들을 반복합니다. do/while 루프 : while 과 동일하게, 조건이 true 인 동안에만 코드들을 반복합니다. for 루프의 구문은 아래와 같습니다. for (식 1; 식 2; 식 3) { 실행될 코드들; } 식 1 은 루프 내의 코드가 시작되기 전에 실행됩니다. 식 2 는 루프 내의 ..

자바스크립트 Switch 문 switch 문은 여러개의 조건으로 분기하여 각기 다른 실행을 할 때 사용됩니다. switch(수식) { case 1: 실행할 코드; break; case 2: 실행할 코드; break; case n: 실행할 코드; break; default: 위의 어떤 경우에도 해당하지 않을때 실행할 기본 코드; } switch 수식을 계산한 후, 각 case 의 값과 비교하여, 일치하는 경우가 있으면 그 코드들이 실행됩니다. 일치하는 것이 하나도 없으면, default 의 코드들이 실행됩니다. 예를 들면 getDay() 라는 함수는 요일을 반환하는데, 0 부터 6 까지의 숫자로 요일을 반환합니다. 즉 0 은 일요일, 1 은 월요일, 2 는 화요일 ... 이런 식입니다. 그래서 이들 숫자들..