JavaScript 1

DevInCafe

목차

  1. 기본 문법
  2. 조건문
  3. 반복문
  4. 함수
  5. 객체
  6. 생성자 함수, 프토토타입, new
  7. 내장 객체 
  8. jQuery
  9. 정규 표현식

1. 기본 문법

alert('Hello World')

Array.length

input

prompt('Message', 'Defstr')

Math.PI

Math.abs(-273)

함수 / 속성 / 변수 / 메서드

1. 기본 문법

alert('Hello World')

Array.length

input

prompt('Message', 'Defstr')

Math.PI

Math.abs(-273)

함수 / 속성 / 변수 / 메서드

함수

속성

변수

함수

속성

메서드

 

1. 기본 문법

생성자 함수 이름은 대문자

변수, 인스턴스, 함수, 메서드 이름은 소문자

여러 단어로 이루어진 식별자는 각 단어의 첫글자를 대문자로

1. 기본 문법

비교 연산자

'가방' > '하마'

1. 기본 문법

비교 연산자

'가방' > '하마'

false

1. 기본 문법

비교 연산자

alert( 30 > 20 > 10 )

1. 기본 문법

비교 연산자

alert( 30 > 20 > 10 )

alert( true > 10)

alert( 1 > 10 )

alert( false) 

1. 기본 문법

비교 연산자

alert( 30 > 20 && 20 > 10)

1. 기본 문법

비교 연산자

alert( 30 > 20 && 20 > 10)

alert( true && true)

alert( true)

1. 기본 문법

undefined

선언은 됐지만 할당되지 않은 변수

1. 기본 문법

자료형 검사

typeof

alert( typeof ('String') )

alert( typeof (273) )

1. 기본 문법

자료형 검사

typeof

alert( typeof (true) )

alert( typeof (function() { }) )

alert( typeof {})

alert( typeof (blacky) )

1. 기본 문법

숫자와 문자열 자료형 변환

alert( '52 + 273')

alert(52 + 273)

alert('52' + 273)

alert(52+ '273')

alert('52' + '273')

1. 기본 문법

숫자와 문자열 자료형 변환

alert( '52 + 273')

alert(52 + 273)

alert('52' + 273)

alert(52+ '273')

alert('52' + '273')

52273

325

52273

52273

52273

 

 

1. 기본 문법

숫자와 문자열 자료형 변환

숫자와 문자열 덧셈

문자열 우선!

1. 기본 문법

숫자와 문자열 자료형 변환

숫자와 문자열 뺄셈 / 곱셈 / 나눗셈 ??

1. 기본 문법

숫자와 문자열 자료형 변환

숫자와 문자열 뺄셈 / 곱셈 / 나눗셈 ??

숫자 우선!

1. 기본 문법

자바스크립트 false

5개

1. 기본 문법

자바스크립트 false

0

NaN

''

null

undefined

1. 기본 문법

자바스크립트 false

alert( '' == false)

alert( '' == 0)

alert( 0 == false)

alert( '273' == 273)

1. 기본 문법

자바스크립트 false

alert( '' == false)

alert( '' == 0)

alert( 0 == false)

alert( '273' == 273)

true

true

true

true

1. 기본 문법

자바스크립트 false

alert( '' === false)

alert( '' === 0)

alert( 0 === false)

alert( '273' === 273)

false

false

false

false

2. 조건문

짧은 조건문

true || alert( '범준' )

false || alert(' 명쥬')

2. 조건문

짧은 조건문

true || alert( '범준' )

false || alert(' 명쥬')

3. 반복문

while과 for 반복문 차이

3. 반복문

for in 반복문

배열 , 객체를 다룰 때

for( var i in array){
 
    ...
}

4. 함수

익명 함수

fun1();
var fun1 = function(){ alert('foo'); };
var fun1 = function(){ alert('bar'); };

4. 함수

선언적 함수

fun1();
function fun1(){ alert('foo'); };
function fun1(){ alert('bar'); };

4. 함수

선언적 함수


var fun1 = function(){ alert('foo'); };
function fun1(){ alert('bar'); };

fun1();

결과는..??

4. 함수

Hoisting

자바스크립트가 컴파일 될 때,

모든 선언문이 코드의 최상부로 갑니다.

 

 

변수의 선언보다 함수의 선언이 더 위로 갑니다.

4. 함수

Hoisting

Why?

4. 함수

Hoisting

재귀

recursion

4. 함수

매개 변수

부족하면?

넘치면?

4. 함수

가변 인자 함수 만들기

function love(){
    var length = arguments.length;

    if( length == 0){

    } else if (length == 1) {

    } else {

    }

}

4. 함수

가변 인자 함수 만들기

function love(){
    var length = arguments.length;

    if( length == 0){

    } else if (length == 1) {

    } else {

    }

}

arguments 는 모든 함수에 내장된 변수

4. 함수

가변 인자 함수 만들기

function love(){
    var length = arguments.length;

    if( length == 0){

    } else if (length == 1) {

    } else {

    }

}

arguments 는 모든 함수에 내장된 변수

4. 함수

IIFE

(function () {

    // ...
    // ...
    // ...
})();

scope 생성

캡슐화

 

4. 함수

Callback

function CallTenTimes(callback){
    for(var i = 0 ; i < 10 ; i++){
        callback();
    }
}

callTenTimes(function() {
    alert('범준이');
});

4. 함수

Callback

매개변수로 함수를 전달합니다.

어디에서 사용? 클로져에서 사용

4. 함수

클로져

function test(name){
    var output = 'Hello' + name + '..!';
}

alert(output);

지역 변수는 함수가 생성될 때 생성되고,

사라질 때 사라집니다.

지역 변수를 남겨 두고 싶을 때 클로져를 사용합니다.

4. 함수

클로져

for ( var i = 0 ; i < 3 ; i++) {
    setTimeout(function(){
        alert(i);
    }, 0);
}

4. 함수

클로져

for ( var i = 0 ; i < 3 ; i++) {
    setTimeout(function(){
        alert(i);
    }, 0);
}

3, 3, 3

4. 함수

클로져

for ( var i = 0 ; i < 3 ; i++) {
    (function(closed_i){
        setTimeout(function(){
            alert(i);
        }, 0);
    })(i);
}

1, 2, 3

자세한 부분은 다음 기회에...

4. 함수

eval()

var x = 10;
var y = 20;
var a = eval("x * y") + "<br>";
var b = eval("2 + 2") + "<br>";
var c = eval("x + 17") + "<br>";

var res = a + b + c;

200
4
27

4. 함수

eval()

var x = 10;
var y = 20;
var a = eval("x * y") + "<br>";
var b = eval("2 + 2") + "<br>";
var c = eval("x + 17") + "<br>";

var res = a + b + c;

쓰지 마세요.

5. 객체

Object

alert( typeof ([]) )

5. 객체

Object

alert( typeof ([]) )

5. 객체

Object

메서드

for in

for ( var key in obj){

    var output += key + ' : ' + obj[key] + '\n';

}

5. 객체

Object

with

var output = '';
with( obj ){
    output += 'name: ' + name;
    output += 'age: ' + age;
    output += 'class: ' + class;
}

5. 객체

Object

with

var output = '';
with( obj ){
    output += 'name: ' + name;
    output += 'age: ' + age;
    output += 'class: ' + class;
}

이것도 쓰지 마세요.

6. 생성자 함수, 프로토타입, new

생성자 함수

객체를 생성하는 함수.

function Tree(name) {
  this.name = name;
}

var theTree = new Tree('Redwood');

생성자 함수

객체를 생성하는 함수.

function Tree(name) {
  this.name = name;
}

var theTree = new Tree('Redwood');

instance

6. 생성자 함수, 프로토타입, new

프로토타입

생성자 함수로 만들어지는 인스턴스들이 같은 함수를 가질 때.

(메모리를 절약한다.)

function person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

6. 생성자 함수, 프로토타입, new

String 객체

7. 내장 객체

charAt(position)

concat(args)

indexOf(searchString, position)

replace(regExp, replacement)

slice(start, end)

split(separator, limit)

substr(start, count)

substring(start, end)

toLowerCase()

toUpperCase()

String 객체

7. 내장 객체

charAt(position)

concat(args)

indexOf(searchString, position)

replace(regExp, replacement)

slice(start, end)

split(separator, limit)

substr(start, count)

substring(start, end)

toLowerCase()

toUpperCase()

"Hello BJ, I love you".

String 객체

7. 내장 객체

메서드 체이닝

"Hello BJ, I love you!"
        .toLowerCase()
        .substring(0,15)
        .split(' ')

Array 객체

7. 내장 객체

메서드 체이닝

var array = [0112, 0119, 85, 93];

var sum = 0;
var output = '';

array.forEach(function(element, index, array){
    sum += elememt;
    output += index + ': ' + element + '\n';
});

Array 객체

7. 내장 객체

메서드 체이닝

var array = [0112, 0119, 85, 93];

var output = array.map(function(element){
    return element * element;
});

JSON 객체

7. 내장 객체

JSON.stringify()

JSON.parse()

JSON 문자열 / JavaScript 객체

객체 보조 메서드

7. 내장 객체

Object.keys()

객체의 속성을 배열로 리턴

마지막 챕터

조금만 힘내요~

8. jQuery

getElementsById(id)

getElementsByClass(class)

getElementsByName(name)

8. jQuery

document.querySelector('.test')

document.querySelectorAll('.test')

document.body.innerHTML += '<h1>리얼돌</h1>'

8. jQuery

jQuery는 아닌

Document 객체의 메소드

(DOM 조작 관련)

8. jQuery

후손 선택자

자손 선택자

$(document).ready(function(){
    $('body *').css('color', 'red');
    $('body > *').css('color', 'green');
});

8. jQuery

.is()

$(document).ready(function(){
    $('h1').each(function(){
        if( $(this).is('.sangildong')){
            $(this).css('background', 'purple');
        }
    })
});

8. jQuery

.addClass()

.removeClass()

.toggleClass()

8. jQuery

.attr()

$(document).ready(function(){
    var src = $('img').attr('src)';

    alert(src);
})

8. jQuery

.attr()

$(selector).attr(name, value);

$(selector).attr(name, function(index, val){});

$(selector).attr(object);

Homework

1. url 형식의 string인지 검사하는 함수를 만드세요.

2. email 형식인지 검사하는 함수를 만드세요.

3. 전화번호 입력값을 바르게 바꾸는 함수를 만드세요.

(000-0000-0000 이나 000.0000.0000는 0000000000 로 변환)

4. 조건에 맞는 비밀번호 형식인지 검사하는 함수를 만드세요.

(적어도 한개씩의 특수문자, 문자, 숫자를 포함하고, 같은 문자가 4개 이상 반복되지 않음)

5. 조건에 맞는 아이디 형식인지 검사하는 함수를 만드세요.

(공백, 한글, !@#$,.가 포함되지 않음)

 

if 조건문은 최소한으로 사용하세요.

정규표현식을 사용하세요.

JavaScript 1

By Ming Kim

Made with Slides.com

JavaScript 1

  • 698

More from Ming Kim