본문 바로가기

728x90
반응형

Javascript

(133)
Vue - script에 추가 Vue를 스크립트에 추가하는 방법 1. 직접 Vue.js 파일을 받아 script 구문 추가하기 직접 경로를 설정해 script src에 넣어서 사용 2. CDN을 사용하여 script 구문 추가하기 해당 script 구문을 추가하고 사용 Vue사용해보기 CSS .active { color : red; } HTML {{ msg }} SCRIPT 실행결과 CSS로 active클래스의 글자색을 변경함 아이디가 app인 div 생성, 내부에 Vue Active클래스 값을 가지는 div생성, 해당 데이터의 msg 문장을 출력 새로운 Vue 객체 생성 -> element명 : app => msg : Hello Vue! , active : true 값을 가짐 active 값이 false 일 경우 active 클래스..
[Javascript] 배열 내장 함수 정리(indexOf, findIndex, find) indexOf는 내가 원하는 텍스트 위치를 알려준다. const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; const index = animals.indexOf('사자'); console.log('사자의 위치는 : ' + index); 하지만 indexOf의 경우 대상이 객체이거나, 특정 대상의 값으로 찾는 것이 아닌 어떤 조건을 가지고 찾을 경우 값을 찾을 기 어렵다. 이럴 때 findIndex를 사용한다. findIndex는 파라미터 값으로 함수를 넘겨준다. 특정 조건을 확인하여 그 조건이 일치하면 일치하는 원소가 몇 번째인지 알려주는 함수다. const todos = [ { id: 1, text: '자바 입문', done: true }, { id: 2, text:..
[Javascript] 배열 내장 함수 정리(forEach, map) forEach 구문 일반 for문 사용 const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; for (let i = 0; i < animals.length; i++) { console.log(animals[i]); } forEach 사용 const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; function print(animal) { console.log(animal); } animals.forEach(print); forEach 및 익명 함수 사용 const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; animals.forEach(function(animal) { console.log(animal)..
[Javascript] 변수와 상수 변수 : let 키워드 이용하여 선언 상수 : const 키워드 이용하여 선언 ** var 키워드는 권장하지 않는다 ** 주요 차이점으로 var는 똑같은 이름으로 여러 번 사용할 수 있다. let과 사용하는 범위가 다른데 이것은 나중에 별도로 정리할 예정이다. 아래는 let 과 var의 차이에 대한 예시다. let a = 1; if (a + 1 === 2) { let a = 2; console.log("if문 안의 a 값은 " + a); } console.log("if문 밖의 a 값은 " + a); var a = 1; if (a + 1 === 2) { var a = 2; console.log("if문 안의 a 값은 " + a); } console.log("if문 밖의 a 값은 " + a); let과 co..
[Javascript] 비구조화 할당(객체 구조 분해) function hello(name) { console.log('Hello' + name); } hello('kwkim'); 결과 : Hello kwkim! 위와 같은 방식을 es6 이상부터는 아래와 같은 방식으로 사용할 수 있다. function hello(name) { console.log(`Hello ${name}!`); } hello('kwkim'); 결과 : Hello kwkim! 다른 예시 const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' }; const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' }; function print(hero..

728x90
반응형