Lpla 개발 블로그

JavaScript/기초

[JavaScript] 생성자 함수

자바스크립트 코드를 짜다 보면 비슷한 객체를 여러개 만들어야 하는 경우가 많다. 이 때 new 연산자와 생성자 함수를 이용할 수 있다. 생성자 함수는 일반 함수와 기술적으로 차이가 없기 때문에 이를 구별하기 위해 다음과 같은 규칙을 정해두고 있다. 함수의 첫 글자는 대문자 new와 함께 호출 function Member(name) { this.name = name; this.age = 29; } let member = new Member("Jin"); alert(member.name); // Jin alert(member.age); // 29 위 코드의 작동 원리는 다음과 같다. function Member(name) { // this = {}; 빈 객체가 임시로 만들어진다. // 새로운 프로퍼티를 th..

JavaScript/기초

[JavaScript] this (1)

자바스크립트에서 this는 매우 유연하게 쓸 수 있다. 메서드 내부에서 this를 사용하면 객체에 접근할 수 있다. let Jin = { 'name' : 'Jin', sayHello() { alert(this.name + " 안녕하세요."); } } let Yumi = { 'name' : 'Yumi', sayHello() { alert(this.name + " 안녕하세요."); } } Jin.sayHello(); // Jin 안녕하세요. Yumi.sayHello(); // Yumi 안녕하세요. 하지만 위 코드는 sayHello()가 Jin과 Yumi에 중복 작성되었기 때문에 깔끔하지 않다. 다음처럼 줄여 쓸 수 있다. let Jin = {'name' : 'Jin',} let Yumi = {'name' :..

JavaScript/기초

[JavaScript] 프로퍼티와 메서드와 리터럴

자바스크립트 공부를 하다 보니 프로퍼티와 메서드, 리터럴이라는 용어를 자주 접한다. 이를 짧게 정리해보았다. 프로퍼티 : 키(Key)와 값(Value)로 이루어진 객체(Object)의 일부 let member = { 'name' : 'Jin', 'age' : 30, 'country' : 'italy' } member는 객체 'name', 'age', 'country' 는 키 'Jin', 30, 'italy' 는 값 'name' : 'Jin', 'age' : 30, 'country' : 'italy' 는 프로퍼티이다. let member = { 'name' : 'Jin', 'age' : 30, 'country' : 'italy', sayHello() { alert("안녕하세요."); } } member.s..

JavaScript/기초

[JavaScript] 객체 (2)

계산된 프로퍼티 let color = prompt("색상을 정하세요."); let select = { [color]: "좋아요.", // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다. }; alert( select.blue ); // color에 "blue"이 할당되었다면, 5가 출력됩니다. 단축 프로퍼티 function info(name, age) { return { name, // name : name 과 같다. age // age : age 와 같다. }; } let user = info("Jin", 29); alert(user.name); // Jin 프로퍼티 조회 let user = { name: "Jin", age: 29, region: "Seoul", gender: "Man" }..

JavaScript/기초

[JavaScript] 자료형 종류

숫자형(number) – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용 bigint – 길이 제약 없이 정수를 나타낼 때 사용 문자형(string) – 하나 혹은 그 이상의 문자로 만들어진 문자열을 나타낼 때 사용 불린형(boolean) – true, false를 나타낼 때 사용 undefined - 할당되지 않은 값 null – 알 수 없는 값 객체형(object) – 복잡한 데이터 구조를 표현할 때 사용 심볼형(symbol) – 객체의 고유 식별자를 만들 때 사용

JavaScript/기초

[JavaScript] 함수 정리(2)

함수 선언식 vs 함수 표현식 vs 화살표 함수 1) 함수 선언식 함수를 선언과 동시에 정의한다. function sayHello() { alert('Hello'); } 2) 함수 표현식 변수를 선언하고 변수에 함수를 할당한다. 이후 변수를 호출하면 함수가 실행된다. let sayHello = function() { alert('Hello'); }l 1) 함수 선언식 함수 선언식은 스크립트의 위치와 상관 없이 어디서든 사용할 수 있다. let region = 'Busan'; if (region == 'Busan') { welcome(); // 1번 실행 -> 고향이 같네요. function welcome() { alert('고향이 같네요.'); } welcome(); // 2번 실행 -> 고향이 같네요...

JavaScript/기초

[JavaScript] 함수 정리(1)

함수 선언 function name(parameters) { // 내용 } 함수 호출 function sayHello() { alert( '안녕하세요!' ); } sayHello(); 지역 변수 함수 안에서 선언한 변수는 해당 함수 안에서만 호출 할 수 있다. function sayHello() { let message = "안녕하세요!"; alert( message ); } sayHello(); alert( message ); // ReferenceError: message is not defined 전역 변수 함수 밖의 변수를 함수 안에서 호출 할 수 있다. let userName = 'Minsu'; function sayHello() { let message = 'Hello, ' + userName..

JavaScript/기초

[JavaScript] 중첩 반복문 빠져나오기

반복문을 사용하다보면 중첩 반복문을 한번에 빠져나와야 하는 경우가 흔히 발생한다. 일반적으로 반복문을 빠져나올 때 break를 쓰지만 반복문을 한 번 밖에 빠져나오지 못하는데, 이때 사용하는 것이 Label(레이블)이다. label: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { let input = prompt(`(${i},${j})의 값`, ''); // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다. if (!input) { break label; } console.log(input, i, j); } } alert('완료!'); label 자리에 다른 이름을 넣어도 된다.

JavaScript/기초

[JavaScript] 논리연산자

1. || (OR 연산자) 인수 중 하나라도 true라면, true를 반환한다. alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false 반환 값이 true면 그 값을 반환하고, 피연산자가 모두 false면 마지막 피연산자를 반환한다. alert( 1 || 0 ); // 1 alert( null || 0 || 1 ); // 1 alert( undefined || null || 0 ); // 0 2. && (AND 연산자) 두 인수 모두 true라면, true를 반환한다. alert( true && true ); // true aler..

웹디자인기능사

웹디자인기능사 실기 공개문제 - Green복지재단 (2)

저번 시간에는 그린복지재단의 헤더 부분을 제작했습니다. 이번 시간에는 바로 그 아래 Slide 영역을 제작하겠습니다. 임시로 쓸 이미지 3장을 준비해두시고 진행하면 됩니다. 이번 목표는 아래와 같은 가로 슬라이드를 완성하는 것입니다. 결과물 지시사항 B. Slide는 웹디자인기능사 시험의 꽃이라고 할 수 있는 부분입니다. 완성된 디자인에서 가장 눈에 띄는 영역이기 때문에 디자인에 많은 신경을 써야 하며, 자바스크립트의 활용과 이해도를 측정할 수 있기 때문이죠. 따라서 슬라이드 영역을 무사히 제작하는데 성공했다면 8~90%의 합격이라고 해도 과언이 아닙니다. 유형은 크게 세 가지로, 1. 가로 슬라이드(좌,우), 2. 세로 슬라이드(상하), 3. 페이드 인 아웃입니다. 난이도는 셋 다 비슷하고 다만 어떤 ..