SOCO

[변수] 어플리케이션을 실행하게 되면 어플리케이션마다 쓸 수 있는 메모리가 할당됨 초반의 메모리는 텅 비어있는 박스로, 어플리케이션마다 쓸 수 있는 제한된 수의 박스를 할당 받음. 자바스크립트에서 변수를 선언할 수 있는 키워드는 딱 하나! let임 이것은 ES6에 추가됨. let name = 'js' let을 통해 name이라는 변수를 정의하게 되면, 한 가지의 박스를 가리킬 수 있는 포인터가 생기게 됨. name이라는 변수가 가리키고 있는 메모리에 js라는 값이 저장됨. 변수명 메모리 name ------(포인터)------> js name ='javascript' 추후에 name의 변수가 가리키고 있는 메모리에 다른 값(javascript)을 넣어서 저장할 수 있음 [scope] block scope..

[기초 용어] 1. API API는 Application Programming Interface의 약자임. 이 중 웹 API는 자바스크립트 언어 자체에 포함된 것이 아니라 브라우저가 제공하는, 브라우저가 이해할 수 있는 함수를 말함. 2. console.log console APIs, 그중에 log라는 함수를 이용해서 우리가 원하는 메세지를 console창에 출력할 수 있음 node.js를 이용해서 (웹 브라우저 없이) console창에 출력되는 걸 볼 수 있음. 그것은 node.js와 웹 APIs 모두 console에 관한 API가 있는 것임 API의 interface가 둘 다 동일함 console은 언어 자체에 포함되어 있는 아이는 아니지만 통상적으로 많이 쓰이는 아이라서 node.js와 웹의 API..

html, css, js를 인터넷 강의로 공부하면 바로바로 적용할 수 있어서 흥미를 잃지않는다는 장점이 있다. 하지만 개념을 제대로 익히고 적용을 하는 것이 아니다보디 그냥 넘어가게 되는 부분들이 있었다. 특히 제로초님 강의에서 스코프와 클로저 문제를 배우면서 스스로의 부족한 점을 많이 느꼈다. 찾아보니 드림코딩 엘리님께서 자바스크립트 기초강의를 올려주신 게 있어서 해당 강의 내용을 정리해보고자 한다. 1. 라이브러리의 등장 자바스크립트 사용에 관한 표준사항이 통일되지 않았던 과거에는, 개발자들이 다양한 브라우저에서 동작하는 웹페이지를 만드느라 고생하고 있었다. 웹시장이 증가하고 수요가 많아짐에 따라 많은 개발자들이 웹시장으로 들어왔고, 개발자들 사이에서 강력한 커뮤니티가 형성되었다. 이러한 커뮤니티 사..

1. 배열만들기 Array().fill() Array(45).fill()//undefined가 45개인 배열을 만듦 2. 배열과 반복문 : 배열명.map( () => {}) const candidate = Array(45).fill().map((element, index) => index+1); //undefined 45개로 구성된 배열을 앞에서 부터 각각 index+1로 바꿈 //(45) [undefined, undefined, ---, undefined] //(45) [1,2,3,4,---,45] 3. 랜덤으로 겹치지 않게 숫자 뽑기 (vs 야구게임과 비교) (1) 야구게임 1~9까지 있는 배열에서 랜덤으로 하나씩 뽑아서 옮기고 삭제하기를 반복 const pull = Array(9).fill().ma..

내가 한 실수 console창에 "4" == 4가 true로 나옴 "4" !==4도 true로 나옴 그래서 Number('"4" ) !== 4로 비교하는 코드를 짬 내가 실수한 부분은 ==와 대응하는 건 !=이고, ===와 대응하는 건 !==이라는 걸 놓침 ===와 !==는 자료형까지 비교하는 것임 "4" == 4 : true "4" === 4 : false "4" != 4 : false "4" !== 4 : true

베스킨 라빈스 31게임 도전 고민 1. 숫자를 어떻게 받아야할까 방법1)input 3개를 만든다 방법2) 채택 input 1개를 만든다사용자에게 각 숫자 사이에 쉼표를 입력하라고 한다.사용자에게서 받은 문자열을 쉼표를 기준으로 split함으로써 배열 형태로 만든다 고민 2. 앞 순서 사람과의 중복 확인 방법1) 앞 순서의 사용자가 입력한 모든 값을 저장하는 배열을 만든다. : push 해당 차례의 사용자가 입력한 값이 배열내에 포함되어있는지 확인한다. : includes 방법2) 1~31까지의 숫자가 들어있는 배열을 만든다 : Array(31).fill().map 앞 순서의 사용자가 입력한 모든 값을 배열에서 제외한다 : splice 해당 차례의 사용자가 입력한 값이 배열내에 포함되어있지 않은지 확인한다..

1. form 태그 button이 달린 input 태그는 form으로 감싸주는 것이 추세라고 한다. 확인 이 경우 input 태그에 바로 이벤트를 다는 것이 아니라 form 태그에 이벤트를 달아준다. 2. submit 이벤트 (1) form안에 있는 button을 누르면 submit이벤트가 호출된다. 확인 (2) event.preventDefault() : 기본동작 막기 submit 이벤트는 호출되는 경우 페이지가 새로고침된다. 확인 (3)event.target[index] : form안에 있는 태그들을 개별적으로 부르는 방법 확인 event.target[0]는 event가 target하는 form 태그의 첫번째 태그인 input 태그를 의미한다. (4) 추가 : submit은 모든 버튼에 다 적용됨 f..

1. document.querySelector(' ') 와 textContent, value (1) JavaScript에서 태그 선택하기 cf. CSS설명도 함께 확장자를 .html로 한 상태에서 CSS와 JavaScript를 쓰는 경우 CSS는 안에 넣고 JavaScript는 (2)textContent, value textContent와 value 태그의 내부값을 나타낸다. 버튼 버튼 2. document.querySelector(' ') + innerHTML innerHTML은 HTML 태그가 나오는 경우 이를 태그로 인식해서 반영한다 document.createTextNode(' ')는 따옴표 안의 내용을 text로 인식하고 document.createElement(' ')는 따옴표 안의 내용을 태..

1. readonly : 읽기 전용 2. input type input과 input type="text"의 차이가 무엇일까? 웹 상으로는 똑같이 구현되는 것 같은데.... 3. box넓이 설정시 border을 기준으로 *{box-sizing : border-box} 4. 불리언으로 형 변환시 false가 되는 data 0, NaN, undefined, null, '' => if문의 조건식 작성시 유용함 왜냐면 if문의 경우 조건식이 true일 때 실행되기 때문이다! 5. value, textContent tag의 내용값을 불러올 때! document.querySelector('input').value document.querySelector('button').textContent 6. 형변환 consol..

예시. function test() { let result =''; if (a) { if(!b) { result='c'; } } else{ result='a'; } result +='b'; return result; } 함수해석 1단계 result라는 변수를 undefined로 먼저 설정! 2단계 case1. a가 참이면, b가 거짓일 때 : result변수는 'c'가 되고, case2. a가 참인데 b가 참일 때 : result 변수는 여전히 비어있고, case3. a가 참이 아닐 때 : result변수는 'a'가 된다. 3단계 case1. result= 'cb' case2. result= 'b' case3. result= 'ab' ---------------------------- if문 중복 줄이기..