클로리셔 작은 공간

1. indexOf( ) - 찾고자하는 문자열의 위치 반환 2. slice( ) - 문자열에서 특정 부분 찾아서 새로운 문자열로 반환 3. substr( ) - 문자열에서 특정 부분 잘라냄 4. replace( ) - 문자열에서 특정 문자값 바꿔치기 5. split( ) - 문자열을 배열로 반환 1. 문자열.indexOf() - 찾고자하는 문자열의 위치 반환 const txt = "Hello World"; console.log(txt.indexOf("apple")); // -1 apple이란 단어를 찾기했을 때, 값이 없으면 -1을 반환한다. 만약 글자가 있다면 그 글자의 위치를 찾아서 숫자로 반환. indexOf는 단어가 있는지 없는지 확인할 때 사용을 많이 한다고한다. 2. 문자열.slice() - ..

자바스크립트에 미리 포함 된 함수를 내장함수라 한다. 배열에 사용하는 반복문 내장함수에는 forEach() / map() 이 있는데 알아보자. forEach() / map() 에는 파라미터(인자)값이 3가지가 들어간다. ex) forEach( el, idx, arr ) el : 반복 돌고있는 대상 idx : 순서값 arr : 배열자체 1. forEach() const colors = ["red", "green", "blue"]; colors.forEach((el, idx, arr) => { //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 ) console.log(el); //red green blue console.log(idx); // 0 1 2 console.log(arr)..

1. for() 반복문 1-1) 배열에서 for() 이용하기 // 배열에서 사용법 const colors = ["red","green","blue","aqua"]; for( let i=0; i < colors.length; i++ ){ console.log(colors[i]); //red green blue aqua } 1-2) 객체에서 for() 이용하기 // 객체에서 사용법 const classA = [ {name: "Chloe", age: 20, address: "Seoul"}, {name: "Andy", age: 25, address: "Busan"}, {name: "Jane", age: 18, address: "Daegu"}, ]; for(let num=0; num < classA.length;..

자바스크립트에서 연산자 공부할 때 +, -, /, * 등등 이해가 잘 가는데.. +=는 매번 헷갈렸다. 그래서 정리를 해보았다..! let num1 = 2; num1 = num1 + 2; console.log(num1); //num1은 2 + 2가 되어서 4가 나온다. //// 이것을 함축형으로 바꾸면 num1 += 2; // 자기자신 num1(초기값)에다가 2를 더한다는 의미 console.log(num1); //4 결국은 num1 + 2 라는 의미.. easy하네

※ 게터와 세터가 너무 이해가 안돼서 개인적으로 알아보기 쉽게 작성한 코드이니 정답이 아닐 수 있습니다. 혹시 더 좋은 설명 있으시면 코멘트 부탁드려요~ class User{ constructor(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; this.data = age; } get data(){ console.log('게터getter'); return this._newInstance; } set data(value){ console.log('세터setter'); this._newInstance = value; } } const chloe = new User( 'Chloe', 'Kim', 20 ) conso..

TypeScript [ 타입스크립트 ] Beginning - 터미널에서 node를 사용해서 자바스크립트로 컴파일 진행 방법 1. 터미널에서 "typeScript" 폴더를 만든다 - mkdir typeScript 입력 2. script.ts 타입스크립트 파일을 만든다. 3. script.js 파일안에 타입스크립트를 작성한 뒤, node script.ts 실행. * 타입스크립트 문법을 사용하고 터미널에서 node script.ts 실행하면 에러가 뜬다. 왜냐면 노드에서 타입스크립트를 다 이해할 수 없기때문이다 (브라우저 환경에서도 마찬가지) :: 그렇다면 어떻게?? 4. 터미널에 tsc script.ts를 실행한다. - script.js가 생성되면서 노드/브라우저에서 읽히는 자바스크립트로 변환된다. 여기서 ..

문장이 길어질 경우 '...' 표시가 되도록 설정하는 방법에 대해 정리한다. CSS를 이용해서 많이 사용하는데 간혹 스크립트를 써야할때 있어서 이왕 정리할때 다 정리하려고 한다. 1. CSS - 1줄 말줄임표 설정하기 p{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - 2줄 말줄임표 설정하기 p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; word-wrap: break-word; } See the Pen make Ellipsis using CS..

1. Rest Parameters [파라미터] : (...args) - 인자를 모두 배열 형태로 전달하는 파라미터 // * Rest 파라미터 사용하기 function printAll(...args) { //...args는 -> printAll('A', 'B', 'C')의 값이 담겨있는 배열 for (let i = 0; i < args.length; i++) { // printAll의 값이 length를 통해 3개의 배열이 i에 담긴다. console.log(args[i]); // 'A' // 'B' // 'C' } } printAll('A', 'B', 'C'); 2. for ( arg of args ) 사용한 더 간단한 작업방법 function printAll(...args) { // for ( arg ..

자바스크립트를 연습하다보면 생각보다 자주 사용되는 스크립트 중 하나인것 같다. 매번 찾았다가 이번에는 이해한것을 정리해서 올려놓으려고 한다. 01_ 자바스크립을 이용한 자식요소 찾기(childNodes) HTML aaa bbb ccc JS let parent = document.querySelector('#list-wrap') // 변수에 parent 요소를 저장 let allChildren = parent.childNodes; // 모든 자식들 찾아 변수에 담기 let first = parent.firstChild; // 첫번째 자식들 찾아 변수에 담기 let last = parent.lastChild; // 마지막 자식 찾아 변수에 담기 console.log(allChildren); console.l..