본문 바로가기

웹 개발/javascript13

[TIL] 객체(Object)의 기초: 객체에 접근, 객체 추가, 삭제, in 연산자, for ... in 문, Object.keys, Object.entries 2021년 3월 9일 화요일 객체란 무엇인가? 객체는 키와 값의 쌍으로 이루어진 집합이다. 중괄호(curly bracket)으로 묶는다. let person = { name: 'James', //name은 key, 'James'는 value(값)이다. name: 'James'를 property라고 한다. age: 20 }; property는 객체의 상태를 나타내는 값이다. property의 구분은 쉼표(,)이다. key는 value에 접근할 수 있는 식별자 역할을 한다. 이미 존재하는 키를 중복 선언하면 나중에 선언한 property가 먼저 선언된 property를 덮어준다. let foo = { name: 'Steve', name: 'James' }; console.log(foo); // { name:.. 2021. 3. 9.
[TIL] 배열(Array) 메소드: length, push, pop, shift, unshift, Array.isArray, indexOf, includes, concat, join, slice javascript의 배열에 대해 정리해 보자 배열은 무엇인가? 한 마디로 순서가 있는 값이다. let arr = [ 1, 2, 3, 4, 5]; 대괄호(square bracket)를 이용해 element들을 그 안에 넣고, comma로 각 element를 구분한다. 배열에는 원본이 수정되는 메소드가 있고, 원본이 수정되지 않는 메소드가 있다. 기존의 배열을 수정하는 메소드: push, pop, shift, unshift 기존의 배열을 수정하지 않는(원본유지) 메소드: slice, split, join, concat 배열의 길이를 알기 위해서는 length를 사용하면 된다. let arr = [ 1, 2, 3, 4, 5]; arr.length; //5 push, pop, shift, unshift: pu.. 2021. 3. 9.
[TIL] Math 메서드: Math.abs, Math.floor, Math.ceil, Math.round, Math.sqrt, Math.random, Math.max, Math.min, Math.pow 정리 2021.3.4(목) 어제 오늘 코플릿 문제를 풀면서 Math의 메서드인 Math.abs, Math.floor 를 접하게 되었다. 그래서 이 참에 Math 메서드 중 자주 사용되는 Math.abs, Math.floor, Math.ceil, Math.round, Math.random, Math.max, Math.min, Math.pow, Math.sqrt를 간단히 정리해 보아야겠다. 자료는 이웅모 님의 자바스크립트의 탁월한 저서 "모던 자바스크립트 Deep Dive"와 mdn 문서를 참고하였다. Math.abs(): 인수로 전달받은 숫자의 절대값을 반환한다. 절댓값은 반드시 양수 혹은 0이어야 한다. Math.abs(-1); // 1 Math.abs('-1'); // 1 Math.abs([-1]); // .. 2021. 3. 4.
[TIL] 문자열(String) 메소드: length, indexOf, substring, slice, split, includes, toLowerCase(), toUpperCase(), 2021.3.3 str[index] : 한 글자씩 index의 글자를 가져온다. let str = 'hello world'; console.log(str[0]); //h console.log(str[1]); //e console.log(str[100]); //undefined concatenating strings: + 연산자를 통해 string 타입과 다른 타입을 +연산자를 통해 concat할 경우 string 타입으로 변환된다. let str1 = 'hello'; let str2 = 'world'; console.log(str1+str2); //helloworld console.log(1+'1'); // 11 console.log(str1+'3'); hello3 str.length: 문자열의 전체 길.. 2021. 3. 3.
[TIL]javascript 조건문, 비교연산자, 논리연산자 2021.3.3 조건문을 하기 전에 먼저 알아야 할 것이 있다. 바로 비교연산자, 논리연산자이다. 기본적인 조건문은 if(조건1) { //조건1이 참일 때 실행문 } else if(조건2) { //조건2가 참일 때 실행문 } else { //모두 아닌 경우 실행문 } 이때 if나 else if 안의 ( ) 안에 boolean타입을 판단하는 조건이 와야 한다. 예를 들면 num1 초과 = 이상 2021. 3. 3.
javascript 함수 작성일: 2021.3.2 함수는 기능을 묶는 단위이다. function add(x,y) { return x + y; } add(3,4); //7 함수를 선언할 때 키워드 function을 써준 후 함수명(add)을 쓴다. 다음에 ( ) 안에 매개변수(parameter)을 넣어준다. 매개변수가 없으면 안 써도 된다. 그다음에 { }로 실행문을 작성한다. 반환문 return: 함수는 키워드 return와 반환값으로 이루어진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있다. function multiply(x,y) { return x * y; } let result = multiply(2,5); //함수를 호출하면서 값을 result에 할당한다. 함수 호출은 표현식이다 console.log(resul.. 2021. 3. 2.
javascript 변수와 타입 작성일: 2021.3.2 1. 변수(variable) 하나의 값을 저장하기 위해 확보한 메모리 공간 또는 메모리 공간을 식별하기 위해 붙인 이름 다시 말해 값의 위치를 가리키는 이름, 상황에 따라 변할 수 있는 값이다. 변수의 선언(declaration): 키워드 let, const. var를 쓴 후 변수명을 적고 세미콜론을 붙인다. 변수의 할당(assignment): let num; //변수의 선언 num = 1; //변수의 할당, 변수 num에 1를 할당한다 let num = 2; //변수의 선언과 할당을 한번에 할 수 있다. 2. 타입(Type) 자바스크립트에는 7개의 데이터 타입을 제공한다. number: 숫자, 정수, 실수 구분없이 하나의 숫자 타입만 존재 string: 문자열, 작은따옴표(' .. 2021. 3. 2.
validation check(유효성 검사) 2 3. 이벤트 연결 전체적인 javascript 파일에 대한 flow를 생각해 보면 1) 엘리먼트 변수를 선언한다. 2) 이벤트 핸들러를 생성한다. id 체크 핸들러 함수 생성 password 체크 핸들러 함수 생성 password re 체크 핸들러 함수 생성 email 핸들러 함수 생성 회원가입 버튼 핸들러 함수를 생성 3) 유효성 검증 함수를 생성한다. 4) 시각적 피드백 함수를 생성한다. 5) 엘리먼트와 이벤트 핸들러를 연결한다. 이벤트 핸들러를 생각해 보자. 지금까지 많이 해보았던 것이 버튼을 클릭했을 때 이벤트가 발생하는 것이었다. 마우스의 이벤트는 다음과 같은 것이 있다. Click - 사용자가 마우스를 클릭했을 때 발생 DblClick - 사용자가 마우스를 더블 클릭했을 때 발생 MouseDo.. 2021. 2. 26.
validation check(유효성 검사) 1 유효성 검사(Validation Check) : 보통 홈페이지에 회원가입할 때 기본적으로 유효성 검사를 하게 됩니다. 유효성 검사란 사이트가 원하는 조건에 반드시 그 형식을 맞추어서 입력한 것을 검사하는 것을 말합니다. 예를 들어 id를 입력할 때는 8자 이상, 한글 입력은 안되고 오직 영문자(소문자, 대문자)와 숫자만을 사용해야 한다른 것이 있습니다. 비밀번호와 비밀번호 확인란이 동일해야 한다. 회원가입 버튼을 누를 때 유효성 검사를 모두 하는 것이 아닌 id와 password, confirm password, email를 사용자가 입력할 때 조건이 안맞을 때는 시각화 효과를 css로 구현한다. 모든 조건에 맞은 경우에는 회원가입에 성공했습니다 라는 alert창을 띄운다. 만약 조건중 하나라도 맞지 않.. 2021. 2. 26.
array 내장 함수를 통해 findShortestWord 문제 해결하기 문제: 배열을 입력받아 배열에서 가장 짧은 길이를 가진 문자열 요소를 리턴 입력: arr _ 임의의 요소가 담긴 배열 출력: string 타입을 리턴해야 합니다. 주의 사항 반복문(for, while) 사용은 금지됩니다. 같은 길이의 요소가 있다면 배열의 앞쪽에 있는 요소를 리턴해야 합니다. 배열에는 문자열 외에 다른 요소들이 있을 수 있습니다. 빈 배열을 입력받은 경우, 빈 문자열을 리턴해야 합니다. 주어진 배열에 문자열이 없는 경우, 빈 문자열을 리턴해야 합니다. 입출력 예시 let output = findShortestWord([4, 'two', 2, 'three']); console.log(output); // --> 'two' 문제 풀이 설명 [4, 'two', 2, 'three']로 arr가 .. 2021. 2. 23.

티스토리툴바