개인 공부용 블로그

1. for 문 특징 배열을 반복문으로 순회해 값과 인덱스에 접근해야 하는 경우 for 또는 forEach문 사용 arrayList, array는 for문을 사용하면 성능면에서 빠르다. 단점 for문의 로직이 간단하지 않을 경우 코드 분석이 어려울 수 있다. For-each문은 For문 보다 얼마나 빠를까? 2. forEach문 문법 array.forEach( function( currentElement, index, array ){ }); currentElement : 처리할 현재 요소 index: 처리할 현재 배열 요소의 인덱스 array: forEach()를 호출한 배열 반환값: undefined 특징 자신의 내부에서 반복문 실행 배열의 경우 forEach문 사용 인덱스에 접근할 수 있다. 배열을 ..

See the Pen continue, break by limhaneul2244 (@limhaneul2244) on CodePen. continue문이란? 해당 조건문 블록을 빠져나와 아래 명령문을 실행하지 않고, 다음 반복문 실행 절차를 수행한다. continue문을 사용하게 되면 for문의 조건식이 i < 10으로 되어 있지만 if문에서 i === 5와 같게 되면 해당하는 조건만 제외하고 다음에 이어지는 반복문은 진행하게 된다. break문이란? break; 적어준 곳에서 해당 조건문 블록과 그 밖의 반복문 자체를 빠져나온다. for문이 돌면서 if문의 조건식을 만났을때 (즉, 5와 같아질때 그 조건식을 빠져나온다.) 그래서 for문의 조건식을 i

백틱 키보드 위치는 숫자 1번 옆에 있다. 그래서 백틱을 왜 사용해? 백틱을 사용하면 줄바꿈 기호 없이 줄바꿈 가능 데이터 유형을 연결하기 위해 +기호를 붙이지 않아도 된다. 데이터 유형 보러가기 사용 방법 백틱으로 감싸서 사용했을 경우 +로 연결하지 않아도 된다. 변수를 넣기 위해서는 ${ }를 사용한다. '' 과 혼동하지 않도록 한다. Template literals - JavaScript | MDN 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문 developer.mozilla.org

정규식은 / /사이에 넣는다. / / ! 정규표현식에 사용된 패턴이 대소문자를 구분하지 않도록 i를 사용함 (i를 삭제하면 대소문자를 구분함) ^ 처음시작하는 부분부터 일치한다는 표시 * 0 또는 그 이상의 문자가 연속될 수 있다는 것을 의미함 정규표현식과 관련한 정리 내용 보기 1. [ ] 대문자 A 부터 z 까지 찾을 문자의 범위를 지정한다. [A-z] /[A-z]/.test('s'); //true 2. ＼ (역슬래쉬) 특수문자 포함 및 모든 문자 /\S/ .test('t'); //true /\S@/ .test('t'); //false /\S@/ .test('t@'); //true ＼S -> 문자의 하나를 뜻함 이메일의 경우 예시로 abdc@abc.com 으로 작성 시 정규식은 abdc@abc.com..

기본 문법 document.getElementById(" ").addEventListener("click", function() { //실행할 함수 }); 문법 예시 document.getElementById("myBtn").addEventListener("click", function() { document.getElementById("demo").innerHTML = "Hello World"; }); => id가 myBtn 가 click 되면 addEventListener 안의 함수를 실행(id가 demo인 HTML에 Hello World로 바꿔) 시켜라. addEventListener 의 종류 종류 설명 click 클릭했을 때 발생 change 변동이 있을 때 발생 focus 포커스를 얻었을 때 발..

결과 계산하기 switch문 switch문 --> if문으로 바꿔보기 더하기 연산자는 숫자가 문자열로 바뀌기 때문에 parseInt를 써서 숫자로 변환해야 한다. 빼기, 곱하기, 나누기는 문자열이 숫자로 바뀌기 때문에 parseInt를 쓰지 않아도 된다고 한다. (하지만 헷갈리기 때문에 써주는게 나을것 같다...ㅎㅎ) 계산기 초기화 See the Pen 계산기 만들기 by limhaneul2244 (@limhaneul2244) on CodePen. 연관글 계산기 만들기1/2

계산기 만들어보다가 if문 코드 중첩을 줄이는 방법은 따로 빼서 작성하는게 나을 것 같아서 작성함. [JavaScript] 계산기 만들어보기 중첩을 제거하는 방법 1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 삽입 !operator인데 수정이 안되었네요! 2. 분기점에서 짧은 절차부터 실행하게 if문을 작성한다. 1번 절차에서 짧은 절차는 numOne이다. if 문 안으로 이동함과 동시에 operator는 값이 비어있어야 하므로 !를 없앤다. 3. 짧은 절차가 끝난 뒤 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다. retur문이 나온 뒤에는 else를 사용하지 않아도 된다. 4. else를 제거한다(이때 중첩 하나가 제거됨). 5. 다음 중첩된 분기점이 나..

순서도 만들기 계산기 모양 코딩하기 7 8 9 + 4 5 6 - 1 2 3 / C 0 = x **readonly는 읽기 O, 쓰기 X 숫자와 연산자를 저장할 수 있는 변수를 만들고, 각 버튼마다 동작할 수 있도록 addEventListener를 달아준다. let numOne = ''; let operator = ''; let numTwo = ''; const $operator = document.querySelector('#operator'); const $result = document.querySelector('#result'); //저장한 값을 화면에 출력하기 위한 변수 document.querySelector('#num-0').addEventListener('click', () => {}); do..

조건 조건1. 3글자인가? 조건2. 제시어가 비어 있는가? 조건3. 첫 제시어의 마지막 글자와 새로운 단어 첫 글자가 일치하는가? (바나나 -> 나머지) 조건4. prompt를 취소했을 때 실행이 되지 않게 하였는가? HTML5 1번째 참가자 제시어: 입력 JavaScript const numberOfPeople = parseInt(prompt('참가 인원이 몇명인가요?')); const $button = document.querySelector('button'); const $input = document.querySelector('input'); const $word = document.querySelector('#word'); const $order = document.querySelector('#..

See the Pen [Java Script] 끝말잇기 by limhaneul2244 (@limhaneul2244) on CodePen. 사용자와 상호작용하는 세가지 함수 1. prompt 기본 형식 prompt('사용자에게 표시할 메시지'); prompt('몇 명이 참가하나요?'); //prompt만 사용했을 경우 입력창에 숫자를 기입하면 휘발성으로 날아가기 때문에 변수를 통해 값을 저장해준다. const number = parseInt(prompt('몇 명이 참가하나요?'),10); prompt 에 숫자를 기입해도 string으로 인식하기 때문에 parseInt를 사용해 숫자로 바꿔주었다. 2. alert 메시지를 사용자에게 알릴 때 사용함 기본형식 alert('사용자에게 표시할 메시지'); 3. c..