Web/JavaScript 검색 결과

64개 발견
  1. 미리보기
    2015.06.13 - Palpit

    [javascript] 39. 실수(Mistakes) - 자바스크립트 강좌 JS / CSE

  2. 미리보기
    2015.06.13 - Palpit

    [javascript] 38. 좋은 지침(Bset Practices) - 자바스크립트 강좌 JS / CSE

  3. 미리보기
    2015.06.13 - Palpit

    [javascript] 37. Style Guide - 자바스크립트 강좌 JS / CSE

  4. 미리보기
    2015.06.13 - Palpit

    [javascript] 36. Strict Mode - 자바스크립트 강좌 JS / CSE

  5. 미리보기
    2015.06.13 - Palpit

    [javascript] 35. 끌어올리기(Hoisting) - 자바스크립트 강좌 JS / CSE

  6. 미리보기
    2015.06.13 - Palpit

    [javascript] 34. 디버깅(debugging) - 자바스크립트 강좌 JS / CSE

  7. 미리보기
    2015.06.13 - Palpit

    [javascript] 33. 에러 - try/catch 문(Error - try / catch throw) - 자바스크립트 강좌 JS / CSE

  8. 미리보기
    2015.06.13 - Palpit

    [javascript] 32. 정규표현식(regular expression) - 자바스크립트 강좌 JS / CSE

조회수 확인
JavaScript Common Mistakes




1. Accidentally Using the Assignment Operator

 자바스크립트 프로그램은 프로그래머가 비교 연산자(==) 대신에 할당 연산자(=)를 실수로 사용하는여서 예상치 못한 결과를 만들기도 합니다.

 아래 구문은 false를 반환합니다:

1
2
var x = 0;
if (x == 10)
cs
 


 다음 아래 구문은 true를 반환합니다:


 

1
2
var x = 0;
if (x = 10)
cs



 다음 아래 구문은 false를 반환합니다:


 

1
2
var x = 0;
if (x = 0)
cs





2. Expecting Loosely Comparison

 일반적인 비교에서 데이터 타입은 문제가 되지 않습니다. 아래 구문은 true를 반환합니다:

1
2
3
var x = 10;
var y = "10";
if (x == y)
cs

 


 엄격한 비교에서 데이터 타입은 문제가 됩니다. 아래 구문은 false를 반환합니다:


 

1
2
3
var x = 10;
var y = "10";
if (x === y)
cs

 


 switch 구문에서 엄격한 비교를 사용하는데서 빼먹 일반적 실수입니다:

  아래 switch 구문은 알림창을 보입니다:



 

1
2
3
4
var x = 10;
switch(x) {
    case 10alert("Hello");
}
cs



  아래 switch 구문은 알림창을 보이지 않습니다:


 

1
2
3
4
var x = 10;
switch(x) {
    case "10"alert("Hello");
}
cs




3. Confusing Addition & Concatenation

 추가(Addition)은 숫자를 추가하는데 관련된 것입니다.

 연결(Concatenation)은 문자열을 추가하는데 관련된 것입니다.

 자바스크립트에서 두 연산자는 + 연산자와 동일합니다.

 이러한 성질 때문에, 숫자에 숫자를 더할 때, 숫자를 문자와 더할 때와 다른 결과를 가져옵니다:

1
2
var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"
cs

 



 두 변수를 더할 때, 결과를 예상하기 힘듭니다:


 

1
2
3
4
5
6
7
var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15
 
var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"
cs



 

4. Misunderstanding Floats

 모든 숫자는 64-bits 부동 소수점으로 저장됩니다.

 모든 프로그래밍 언어는 정확한 부동소수점 값의 차이를 갖습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
 
    </body>
</html>
 
 
cs
 



 

 










5. Breaking a JavaScript String

 자바스크립트는 구문을 두 라인으로 분리하는 것을 허용합니다:

1
2
3
 
var x =
"Hello World!";
cs
 
 

6. Misplacing Semicolon

 세미콜론을 빼트린다면, 아래 코드 블럭은 x 값에 상관없이 실행 될 것입니다:

1
2
3
4
if (x == 19);
{
    // code block  
}
cs



7. Breaking a Return Statement

 아래 두 예제는 같은 결과를 반환합니다:
1
2
3
4
function myFunction(a) {
    var power = 10  
    return a * power
}
cs
 
1
2
3
4
function myFunction(a) {
    var power = 10  
    return a * power;
}
cs
 
 
 자바스크립트는 구문을 두 라인으로 분리하는 것을 허용합니다.

 아래 예제 또한, 위의 두 예제와 같은 결과를 반환합니다:

1
2
3
4
5
function myFunction(a) {
    var 
power = 10  
    return a * power
}
cs
 
  그러나, 아래 예제처럼 리턴 구문을 두 라인으로 나누면 다른 결과를 초래합니다:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var
power = 10;
return
a * power;
}
</script>
 
    </body>
</html>
 
 
cs

 











 위 예제는 아래처럼 인식을 하기 때문입니다:


 

1
2
3
4
5
6
7
 
function myFunction(a) {
    var
    power = 10;  
    return;
    a * power;
}
cs



 

8. Accessing Arrays with Named Indexes

 많은 프로그래밍 언어는 이름 index 배열을 제공합니다.

 이름 index 배열은 associative 배열(또는 hash)라고 부릅니다.

 자바스크립트는 이름 index된 배열을 제공하지 않습니다.

 자바스크립트에서는 숫자 index된 배열을 사용합니다.

1
2
3
4
5
6
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
cs
 


 객체는 이름 index를 사용합니다.


 배열에 접근할 때, 이름 index를 사용하면, 자바스크립트는 배열을 표준 객체로 재정의합니다.


 자동적으로 재정의 한 후, 배열 메소드와 속성은 undefined나 부정확한 결과를 낳습니다:



 

1
2
3
4
5
6
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
cs





9. Ending an Array Definition with a Comma

 마지막 원소에 콤마를 넣지 않습니다.


 

1
2
3
points = [40100152510]; // Incorrect
 
points = [40100152510]; // Correct
cs




10. Ending an Object Definition with a Comma

 마지막 원소에 콤마를 넣지 않습니다.



1
2
3
person = {firstName:"John", lastName:"Doe", age:46,} // Incorrect
 
person = {firstName:"John", lastName:"Doe", age:46// Correct
cs




11. Undefined is Not Null

 자바스크립트에서, null은 객체를 위한 것이고, undefined는 변수, 속성, 메소드를 위한 것입니다.


 

 

1
2
3
if (myObj !== null && typeof myObj !== "undefined")  // incorrect
 
if (typeof myObj !== "undefined" && myObj !== null)  // correct
cs

 


 




12. Expecting Block Level Scope

 자바스크립트는 각 코드 블럭의 새 범위를 만들지 않습니다.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
for (var i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i;
</script>
 
    </body>
</html>
 
 
cs


 




다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript Best Practices

 



1. Avoid Global Variables

 전역 변수 사용을 최소화 합니다.

 

 위 해당사항은 모든 데이터 타입, 객체, 함수를 포함합니다.


 전역 변수와 함수는 다른 스크립트에서 덮어쓰여 질 수 있습니다.


 


2. Always Declare Local Variables

 함수에서 사용하는 모든 변수는 지역 변수로 선언되어 집니다.


 지역 변수는 var 키워드로 선언되어져야 합니다. 그렇지 않으면 전역 변수가 되버립니다.


 


3. Declarations on Top

 모든 선언부를 각 스크립트의 상단에 위치시키는 것은 좋은 코딩 지침입니다.

 원하지 않는 전역 변수를 피할 수 있는 좋은 방법입니다.

 좀 더 깔끔한 코드를 만들고, 원하지 않는 재 선언을 줄일 수 있는 가능성을 제공합니다.


1
2
3
4
5
6
7
8
9
10
var firstName, lastName;
var price, discount, fullPrice;
 
firstName = "John";
lastName = "Doe";
 
price = 19.90;
discount = 0.10;
 
fullPrice = price * 100 / discount;
cs

 


 



4. Never Declare Numbers, Strings, or Booleans as Objects

 숫자, 문자열, 부울 값을 객체로 선언하면 실행속도를 느리게 하고, side effect를 내게 됩니다:



 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <body>
    <p id="demo"></p>
 
<script>
var x = "John";              // x is a string
var y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = x===y;
</script>
 
    </body>
</html>
 
cs



 

 






5. Don't Use new Object()

 - new Object()를 사용하는 대신 {}를 사용하세요.

 - new String()을 사용하는 대신 ""를 사용하세요.

 - new Number()을 사용하는 대신 0를 사용하세요.

 - new Boolean()을 사용하는 대신 false를 사용하세요.

 - new Array()을 사용하는 대신 []를 사용하세요.

 - new RegExp()을 사용하는 대신 /()/를 사용하세요.

 - new function()을 사용하는 대신 function() {}를 사용하세요.



 

1
2
3
4
5
6
7
8
 
var x1 = {};           // new object
var x2 = "";           // new primitive string
var x3 = 0;            // new primitive number
var x4 = false;        // new primitive boolean
var x5 = [];           // new array object
var    x6 = /()/;         // new regexp object
var x7 = function(){}; // new function object
cs






6. Beware of Automatic Type Conversions

 숫자가 우연적으로 문자열이나 NaN으로 변환되는 것을 주의합니다.


 변수는 다른 데이터 타입을 갖을 수 있고, 이 타입을 다른 데이터 타입으로 바꿀 수 있습니다:


 

1
2
var x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number
cs



 수학적 연산자를 사용하여, 자바스크립트는 숫자를 문자열로 변환 할 수 있습니다:


 

1
2
3
4
5
6
7
8
var x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
var x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
var x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
var x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
var x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
var x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
var x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number
 
cs




 뺄셈을 문자열에 사용하면, 에러를 생성하진 않으나, NaN을 반환합니다.


 

1
2
 
"Hello" - "Dolly"    // returns NaN
cs




7. Use === Comparison

 == 비교 연산자는 항상 비교 전에 해당 타입에 맞게 변환합니다.


 === 연산자는 값과 타입의 비교를 강요합니다.


 

1
2
3
4
5
6
7
0 == "";        // true
1 == "1";       // true
1 == true;      // true
 
0 === "";       // false
1 === "1";      // false
1 === true;     // false
cs





8. Use Parameter Defaults

 함수에 인자값을 빼트리고 호출했다면, 빼트린 인자값은 undefined로 설정됩니다.


 Undefined 값은 코드를 빠져나오게 합니다. 기본(default) 값을 인자 값에 할당해주는 것은 좋은 습관입니다.


 

1
2
3
4
5
function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}
cs




다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

JavaScript Style Guide and Coding Con-ventions

 



1. JavaScript Coding Conventions

  코딩 관습(Coding convention)은 프로그래밍을 위한 스타일 준수(Style Guideline) 입니다.

   - 변수나 함수의 명명 규칙, 선언 규칙

   - 여백, 들여쓰기, 주석의 사용 규칙

   - 프로그래밍 원리


  코딩 관습은 품질을 보증합니다:

   - 코드의 가독성 향상

   - 코드 유지보수가 쉽다





2. Variable Names

 W3Schools에서는 카멜표기법(camelCase)를 사용하여 식별자 이름을 짓습니다.


 모든 이름은 문자로 시작합니다.


 

1
2
3
4
5
6
7
firstName = "John";
lastName = "Doe";
 
price = 19.90;
tax = 0.20;
 
fullPrice = price + (price * tax);
cs

 





3. Spaces Around Operators

 항상 연산자 주위와 콤마 뒤에 여백을 줍니다.


1
2
var x = y + z;
var values = ["Volvo""Saab""Fiat"];
cs

 




4. Code Indentation

 항상 코드 블럭 내에서는 들여쓰기를 합니다.



 

1
2
3
function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
cs





5. Statement Rules

 간단한 구문의 일반적 규칙:

  - 항상 간단한 구문의 마지막에 세미콜론을 붙입니다.


 

1
2
3
4
5
6
7
8
var values = ["Volvo""Saab""Fiat"];
 
var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};
cs




 복잡한(복합의) 구문의 일반적 규칙:

  - 첫 라인의 끝에 괄호를 열어줍니다.

  - 여는 괄호 전에 공백을 사용합니다.

  - 새로운 라인에 닫는 괄호를 넣어줍니다.

  - 복합문의 끝에 세미콜론을 붙이지 않습니다.


   함수:

 

1
2
3
function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
cs


   반복문:

 

1
2
3
for (i = 0; i < 5; i++) {
    x += i;
}
cs



   조건문:

 

1
2
3
4
5
6
 
if (time < 20) {
    greeting = "Good day";
else {
    greeting = "Good evening";
}
cs








6. Object Rules

 객체 선언에 따른 일반적 규칙:

  - 객체 이름의 동일한 라인에 여는 괄호를 추가합니다.

  - 속성과 속성 값 사이에 콜론과 여백을 입력합니다.

  - 마지막 속성- 값 쌍에서는 콤마를 붙이지 않습니다.

  - 마지막에 새로운 라인을 추가하여 닫는 괄호를 추가합니다.

 

 

1
2
3
4
5
6
var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};
cs




7. Line Length < 80

 가독성을 위해 한 라인의 80개의 문자를 넘어서는 것을 피합니다.


 자바스크립트 구문이 한 라인에 들어 맞지 않는다면, 연산자나 콤마 뒤에 개행을 하는 것이 최선의 방법입니다.


 

1
2
document.getElementById("demo").innerHTML =
    "Hello Dolly.";
cs





8. Naming Conventions

 항상 모든 코드에 같은 명명 관습(Naming convention)을 가져야 합니다:

  - 변수와 함수이름은 카멜표기법(camelCase)으로 작성합니다.

  - 전역변수는 대문자로 작성합니다.

  - 상수는 대문자로 작성합니다.






9. Loading JavaScript in HTML

 외부 스크립트 파일을 로딩하기 위한 간단한 문법입니다:

 

1
<script src="myscript.js">
cs





10. Accessing HTML Elements 

 "untidy"한 HTML 스타일을 사용하는 결과로 자바스크립트는 에러를 도출할 수도 있습니다.

 아래 두 자바스크립트 구문은 다른 결과를 가져올 것입니다:

1
2
3
var obj = getElementById("Demo")
 
var obj = getElementById("demo")
cs
 

 

11. File Extensions

 HTML 파일은 .html 확장자를 갖습니다.
 CSS 파일은 .css 확장자를 갖습니다.
 JavaScript 파일은 .js 확장자를 갖습니다.



12. Use Lower Case File Names

 대부분의 웹 서버(Apache, Unix)는 파일 이름에 case sensitive 합니다.
 
 london.jpg는 London.jpg로 접근할 수 없습니다.

 다른 웹 서버들(Microsoft,IIS)는 case sensitive하지 않습니다.

 london.jpg는 London.jpg로 접근할 수 있습니다.

 


다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

JavaScript Use Strict

 use strict ​선언은 자바스크립트 코드가 'strict mode'로 실행되야 한다는 것을 의미합니다.


 



1. The "use strict" Directive

 strict mode에서는 선언되지 않은 변수를 사용 할 수 없습니다.


 자바스크립트 1.8.5 버전에서 새로이 나왔습니다.



 

2. Declaring Strict Mode

 strict mode는 "use strict";를 자바스크립트 파일의 처음이나 함수에 추가함으로써 선언합니다. 


 자바스크립트 파일의 시작에 선언하면, 전역 범위가 됩니다.


 함수안에 선언하면, 지역 범위가 됩니다.



 전역 선언:


1
2
3
4
5
6
7
"use strict";
x = 3.14;       // This will cause an error
myFunction();   // This will also cause an error
 
function myFunction() {
    x = 3.14;
}
cs


 

 지역 선언:


1
2
3
4
5
6
7
x = 3.14;       // This will not cause an error. 
myFunction();   // This will cause an error
 
function myFunction() {
   "use strict";
    x = 3.14;
}
cs











3. The "use strict"; Syntax

 strict mode 선언을 위한 문법은 예전 버전의 자바스크립트와 비교되어 설계되었습니다.


 숫자 식 (4 + 5;)이나 문자 식("John Doe";)을 자바스크립트 프로그램에서 컴파일 하는 것은 Side effect를 내지 않습니다.


 그냥 존재하지 않는 변수로 간단히 컴파일 되고 사라집니다.


 


4. Why Strict Mode?

 Strict mode는 안전한(secure) 자바스크립트를 작성하기 쉽게 해줍니다.


 Strict mode는 이전에 적용되었던 실제 에러들 사이의 안 좋은 문법을 바꿔줍니다.


 일반적인 자바스크립트에서, 변수 이름의 오타는 새로운 전역 변수를 생성합니다.


 strict mode에서는, 이러한 문제는 에러를 던지고(throw), 전역 변수를 생성하는 우연적인 일을 불가능하게 합니다.


 


5. Not Allowed in Strict Mode

 변수의 선언 없이 변수를 사용하는 것은 허용하지 않습니다.



1
2
"use strict";
x = 3.14;                 // This will cause an error (if x has not been declared)
cs

 




 변수, 함수, 인자를 삭제하는 것은 허용하지 않습니다.

 


1
2
3
"use strict";
x = 3.14;
delete x;                 // This will cause an error
cs




 속성을 한 번 이상 선언 하는 것은 허용하지 않습니다.


1
2
"use strict";
var x = {p1:10, p1:20};   // This will cause an error
cs




 인자 이름을 중복하는 것은 허용하지 않습니다.



1
2
"use strict";
function x(p1, p1) {};    // This will cause an error
cs



 

 

 

 8진수와 확장문자(escape character)는 허용하지 않습니다.


 읽기 전용 속성을 쓰는 것을 허용하지 않습니다.

 

 이 밖에 여러가지 제약을 strict mode 에서 제공합니다.

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

JavaScript Hoisting

 끌어올림(Hoisting)은 자바스크립트의 선언부를 상단에 위치시키는 기본적인 행위 입니다.


 



1. JavaScript Declarations are Hoisted

 자바스크립트에서, 변수는 사용되기 전에 선언되어야 합니다.


 예제 1과 예제 2는 같은 결과를 냅니다:




 예제 1:


1
2
3
4
5
6
7
 
x = 5// Assign 5 to x
 
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     // Display x in the element
 
var x; // Declare x
cs

 




 예제 2:

 
1
2
3
4
5
var x; // Declare x
x = 5// Assign 5 to x
 
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     // Display x in the element
cs



 








2. JavaScript Initializations are Not Hoisted

 자바스크립트는 단지 선언만 끌어올립니다. 초기화가 아닌.

 

 예제 1과 예제 2는 다른 결과를 냅니다.


  예제1: 



1
2
3
4
5
var x = 5// Initialize x
var y = 7// Initialize y
 
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y
cs

 





  예제2:


 

1
2
3
4
5
6
7
 
var x = 5// Initialize x
 
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y
 
var y = 7// Initialize y
cs


 



 예제2에서 y에 대한 출력은 undefined로 나타납니다.


 이러한 이유는 y가 초기화되는 것을 끌어올리지 않았기 때문입니다.


 

 예제3은 예제 2과 같은 결과를 냅니다:



1
2
3
4
5
6
7
var x = 5// Initialize x
var y;     // Declare y
 
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y
 
y = 7;    // Assign 7 to y
cs




3. Declare Your Variables At the Top !

 끌어올림은 알려지지 않은 혹은 간과하는 행위 중 하나 입니다.


 개발자가 끌어올림을 이해하지 못 한다면, 프로그램은 버그(에러)를 갖게 됩니다.


 버그를 피하기 위해서는 항상 모든 변수를 상단부의 시작에 선언하시길 바랍니다

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript Debugging



1. JavaScript Debugging
 자바스크립트 코드는 디버거(debugger) 없이는 작성하기 힘듭니다.

 문법적(Syntax) 에러나 논리적(logical) 에러를 포함한 코드는 진단(diagnose)하기 힘듭니다.

 자바스크립트 코드가 에러를 가지고 있을 때, 아무일도 일어나지 않습니다. 에러 메세지 또한 없습니다.

 


2. JavaScript Debuggers
 프로그래밍 코드의 에러를 찾는 것은 코드 디버깅이라 부릅니다.

 디버깅은 쉽지 않습니다. 그러나 현대 브라우저는 내장된 디버거를 가지고 있습니다.

 디버거를 사용하여 중단 점을 설정할 수 있습니다. 그리고 코드가 실행되는 동안 변수를 검사할 수 있습니다.

 
3. The console.log() Method
 브라우저가 디버깅을 지원하면 console.log()를 사용하여 자바스크립트 값을 디버거 윈도우에서 확인 할 수 있습니다.


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html>
<html>
    <body>
 
    <h1>My First Web Page</h1>
 
    <p>
    Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.
    </p>
 
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
 
    </body>
</html
 
cs



 






4. Setting Breakpoints
 디버거 윈도우에서, 자바스크립트 코드의 중단점을 설정 할 수 있습니다.

 각 중단점마다, 자바스크립트는 실행을 멈추고, 자바스크립트 값을 검사 할 수 있습니다.

 값을 검사한 후에, 코드의 실행을 재게 할 수 있습니다.








5. The debugger Keyword
 debugger 키워드는 자바스크립트의 실행을 멈추고, 디버깅 함수를 호출 합니다.

 키워드는 디버거에서 중단 점을 설정하는 것과 같은 기능을 합니다.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html>
<html>
<head>
</head>
 
    <body>
 
    <p id="demo"></p>
 
    <p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>
 
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
 
    </body>
</html>
 
cs




 










6. Major Browsers' Debugging Tools
 일반적으로, F12 버튼으로 브라우저의 디버깅을 활성화 할 수 있습니다.


Chrome

  • Open the browser.
  • From the menu, select tools.
  • From tools, choose developer tools.
  • Finally, select Console.

Firefox Firebug

Internet Explorer

  • Open the browser.
  • From the menu, select tools.
  • From tools, choose developer tools.
  • Finally, select Console.

Opera

Safari Firebug

Safari Develop Menu

  • Go to Safari, Preferences, Advanced in the main menu.
  • Check "Enable Show Develop menu in menu bar".
  • When the new option "Develop" appears in the menu:
    Choose "Show Error Console".

[ 출처: W3Schools ]


다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript Errors - Throw and Try to Catch

 try 문은 에러가 있는 블럭의 코드를 테스트 하기 위함입니다.

 catch 문은 에러를 처리합니다.

 throw 문은 커스텀(custom) 에러를 만듭니다.

 finally 문은 결과에 상관없이 try, catch문 후에 실행되는 문입니다.



1. Errors Will Happen!
 자바스크립트 코드를 실행 할 때, 다른 에러가 발생합니다.

 에러는 프로그래머에 의해서 만들어진 에러가 있을 수도 있고, 잘못된 입력 값에 의해서, 예견할 수 없는 에러들이 있을 수 있습니다:




 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
 
    </body>
</html>
 
cs



 

 






2. JavaScript try and catch


 자바스크립트 try / catch 문은 쌍으로 사용 됩니다:

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}






3. JavaScript Throws Errors
 에러가 발생 하면, 자바스크립트는 일반적으로 멈추고, 에러 메시지를 생성합니다.

 기술적 용어로는 이렇게 표현합니다: 자바스크립트가 에러를 던졌다(Throw).







3-1. The throw Statement
 ​예외(Exception)는 자바스크립트 문자열, 숫자, 부울 값, 객체에 사용될 수 있습니다::

 

1
2
3
 
throw "Too big";    // throw a text
throw 500;          // throw a number
cs

 






4. Input Validation Example
 아래 예제는 입력 값 검사 예제입니다. 입력 값이 잘못되면, 예외를 던집니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
    <body>
 
    <p>Please input a number between 5 and 10:</p>
 
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">Test Input</button>
    <p id="message"></p>
 
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try { 
if(x == "")  throw "is Empty";
if(isNaN(x)) throw "not a number";
if(x > 10)   throw "too high";
if(x < 5)    throw "too low";
}
catch(err) {
message.innerHTML = "Input " + err;
}
}
</script>
 
    </body>
</html>
 
 
 
 
cs

 







 






5. The finally Statement 

 

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
finally {
    Block of code to be executed regardless of the try / catch result
}


예제:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!DOCTYPE html>
<html>
    <body>
 
    <p>Please input a number between 5 and 10:</p>
 
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">Test Input</button>
 
    <p id="message"></p>
 
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try { 
x = Number(x);
if(x == "")  throw "is empty";
if(isNaN(x)) throw "is not a number";
if(x > 10)   throw "is too high";
if(x < 5)    throw "is too low";
}
catch(err) {
message.innerHTML = "Input " + err;
}
finally {
document.getElementById("demo").value = "";
}
}
</script>
 
    </body>
</html>
 
 
 
 
cs




 

 



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript Regular Expressions




1. What Is a Regular Expression?
 정규 표현식(Regular expression)은 검색 패턴의 형태의 일련의 문자의 연속입니다.
 => A regular expression is a sequence of characters that forms a search pattern.

 문자열 데이터를 검색 할 때, 어떤 것을 검색할 지에 대한 검색 패턴을 사용합니다.

 정규 표현식은 단일 문자 혹은 더 복잡한 패턴 일 수 있습니다.

 검색 패턴은 문자열 검색, 문자열 변환 작업에 사용됩니다.



 문법:

/pattern/modifiers;



 예제:

 

1
var patt = /w3schools/i
cs







 /w3schools/i 는 정규 표현식입니다.

 w3schools는 패턴입니다.(검색에 사용할)

 i는 수식어입니다.







2. Using String Methods
 자바스크립트에서, 정규 표현식은 2개의 문자열 메소드에서 주로 사용됩니다: search(), replace()

 search() 메소드는 일치하는 식에 대해 검색하고, 일치하는 위치를 반환합니다.

 replace() 메소드는 패턴이 일치하는 곳의 문자열을 변환하여 반환합니다.


2-1. Using String search() With a Regular Expression



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <body>
 
    <p>Search a string for "w3Schools", and display the position of the match:</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <p id="demo"></p>
 
<script>
function myFunction() {
var str = "Visit W3Schools!"
var n = str.search(/w3Schools/i);
document.getElementById("demo").innerHTML = n;
}
</script>
 
    </body>
</html>
 
 
cs

 



 

 


 



2-2. Using String search() With String
 search 메소드는 검색 인자 값으로 문자열을 허용합니다. 문자열 인자 값은 정규 표현식으로 변환됩니다:

 

1
2
3
 
var str = "Visit W3Schools!";
var n = str.search("W3Schools");
cs





2-3. Use String replace() With a Regular Expression

  


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <body>
 
    <p>Replace "microsoft" with "W3Schools" in the paragraph below:</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <p id="demo">Please visit Microsoft!</p>
 
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"W3Schools");
document.getElementById("demo").innerHTML = txt;
}
</script>
 
    </body>
</html>
 
 
 
cs

 









2-4. Using String replace() With a String


 replace() 메소드는 검색 인자 값으로 문자열을 허용합니다.


 

1
2
3
 
var str = "Visit Microsoft!";
var res = str.replace("Microsoft""W3Schools");
cs










3. Regular Expression Modifiers

 

ModifierDescription
iPerform case-insensitive matching
gPerform a global match (find all matches rather than stopping after the first match)
mPerform multiline matching

 

 [ 출처: W3Schools ]





4. Regular Expression Patterns 


ExpressionDescription
[abc]Find any of the characters between the brackets
[0-9]Find any of the digits between the brackets
(x|y)Find any of the alternatives separated with |

 [ 출처: W3Schools ]






 Metacharacters 는 특별한 의미를 지닌 문자입니다:

MetacharacterDescription
\dFind a digit
\sFind a whitespace character
\bFind a match at the beginning or at the end of a word
\uxxxxFind the Unicode character specified by the hexadecimal number xxxx

 [ 출처: W3Schools ]




 Quantifiers는 수량을 나타냅니다::
 

QuantifierDescription
n+Matches any string that contains at least one n
n*Matches any string that contains zero or more occurrences ofn
n?Matches any string that contains zero or one occurrences of n
 [ 출처: W3Schools ]







5. Using the RegExp Object


 자바스크립트에서, RegExp 객체는 미리 정의된 속성과 메소드의 정규 표현식 객체 입니다.






5-1. Using test()
 test() 메소드는 RegExp 식 메소드 입니다.

 이 메소드는 문자열의 패턴을 검색하고, 참, 거짓 값을 반환합니다.



 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <body>
 
    <p>Search for an "e" in the next paragraph:</p>
 
    <p id="p01">The best things in life are free!</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <p id="demo"></p>
 
<script>
function myFunction() {
text = document.getElementById("p01").innerHTML; 
document.getElementById("demo").innerHTML = /e/.test(text);
}
</script>
 
    </body>
</html>
 
cs














5-2. Using exec()
 exec() 메소드는 RegExp 식 메소드 입니다.

 이 메소드는 특정 패턴으로 된 문자열을 찾아서, 찾은 문자열을 반환합니다.

 아무것도 발견되지 않으면, null을 반환합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!DOCTYPE html>
<html>
    <body>
 
    <p>Search for an "e" in the next paragraph:</p>
 
    <p id="p01">The best things in life are free!</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <p id="demo"></p>
 
<script>
function myFunction() {
text = document.getElementById("p01").innerHTML; 
document.getElementById("demo").innerHTML = /e/.exec(text);
}
 
</script>
 
    </body>
</html>
 
cs







  



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다