본문 바로가기

Programming language/JavaScript

 (9)
JavaScript - [Map, for of 구문, Set, 전개연산자] Map 객체 - js에는 hashmap처럼 쓸수 있는 Map이라는 객체가 존재한다. - key와 value값을 가지며 key는 하나의 value값만을 가진다. 길이 - map의 길이는 size로 구할 수 있다. map.lenght는 0이다. 초기화 - map.clear() 키 제거 - map.delete(key) : 해당하는 키에 대한 value값이 제거 되고 map.has(key) 값이 반환된다. 키 참조 - map.get(key) : 해당하는 키에 대한 value값을 반환한다. 키값이 존재하는지 - map.has(key) : 해당하는 키가 존재하면 true, 존재하지 않으면 false를 반환한다. 키 set - map.keys() : 객체안에 존재하는 모든키들을 iterator 객체로 반환한다. 값 ..
Event - 1 [window, 이벤트 추가, 삭제, 취소] Window EventTarget 이라는 속성을 상속받는 형태이다. - 결국에는 event발생시 event관련 listener를 받아야 한다는 의미이다. - 이러한 eventTarget은 얼마든지 다양한 DOM객체가 될수있다. 현재 자바스크립트가 실행되고 있는 창을 말하며 브라우저에서는 각각의 탭을 window라는 객체로 표현한다. 즉, 브라우저의 탭하나가 window객체 하나라는 의미이다. 이벤트 추가 - addEventListener("이벤트 이름", 실행할 함수 ) eventTarget에 이벤트 발생시 실행될 함수를 추가한다. window에 탭을 닫은 이벤트 발생시 실행할 함수를 추가하고 싶다면 const listener = (event) => { event.preventDefault(); even..
ESLint 와 Prettier ESLint ESLint는 다양한 버전의 자바스크립트 문법을 잡아주는 확장 프로그램이다. VSCODE에서 사용가능하다. 재밌는 점은 코딩과정에서 여러가지 IDE에서 지원 할 것 같은 문법 체크를 해준다. 사실 React뿐만이 아니라 javascript로 사용되는 언어들은 전부 되는 것같다. Prettier - 아는 사람은 모두아는 코드 폼 펙터이다. - ctrl + s만 하면 알아서 코드가 보기 좋게 정렬된다. 혹은 몇까지 빠진 마침표나 사소한 문법실수들을 자동으로 보완해준다. 이 두개만있으면 사실 왠만한 IDE부럽지 않다. 이조합을 사용하기 위해서 VSCODE를 사용하는사람이 많을 거라고 생각한다. 매우 좋음 👍 가끔 두개가 안먹을 때가 있는데 그렇다면 위 사진에서Disable했다가 다시 Requrie..
JavaScript - 5 [EventListener, if else 구문] EventListener : 지정한 이벤트가 대상에 전달 될때마다 호출할 함수를 설정한다. DOM 객체 대부분에서 호출할수 있는 것같다. JS는 이벤트가 일어나면 이벤트이름에 해당하는 인자를 받는 함수들에 항상 보내준다. target.addEventListener("type", function); - 아래코드에서 addEventListener 부분에서 handClick이 handClick() 이렇게 적혀있었다면 "click" 이라는 이벤트를 기다리기전에 바로 함수를 실행한다. console.dir(document); // id가 title인 것을 찾을 때 let title = document.querySelector("#title"); // className이 title인 것을 찾을 때 let class..
JavaScript - [VScode에서 Debugging 하기] JavaScript는 VScode에서 작성해서 실제 chrome에 연결된 html, css, js 파일을 넘겨서 chorme에서 실행결과가 나온다. 하지만 원하는 순간에 코드 실행간 어떤일이 일어나는지 모르기때문에 Debugging이 어렵다. VScode에서는 JS를 Debugging하도록 도와주는 확장프로그램이 있다. 다운로드를 받는다. 위 버튼을 누르면 여러 언어들이 나오는데 그중 Chrome을 선택한다. { // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요. // 기존 특성에 대한 설명을 보려면 가리킵니다. // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요. "version": "0.2.0", "con..
JavaScript - 4 [js로 HTML, CSS 건드리기] CSS의 아이디 혹은 클래스를 지정해두고 js로 해당 클래스 혹은 아이디에 접근한다. id로 접근하는 방법 DOM (Document Object Module) - js에서는 html파일 전체에 대한 부분을 document라는 객체로 받는다. js에서 html파일에 접근할때는 document 객체를 사용해야한다. - html 파일에 해당하는 부분에 id를 넣어준다. html/css This works! #title { background-color: green; } const getTitle = document.getElementById("title"); getTitle.innerHTML = "Hi! From JS"; getTitle은 document(HTML)에서 title이란 아이디를 가진 요소를 가져..
JavaScript - 3 [Object, function] Object - js도 객체를 만들수 있는데, 자바나 파이썬 처럼 class를 만드는 것인데, 객체를 선언하는 거라고 생각하면된다. 객체 선언은 {} 다음과 같이한다. let 이름 = { 속성 : 값, 속성1 : 값1 } let 이름 = new Object(); : 이름이란 변수에 빈 객체를 선언하다. let doodreamInfo = { name : "Doodream", age : 27, gender : "Male", isHandsome : true } 객체 안의 값을 변경 할때, let doodreamInfo = { name : "Doodream", age : 27, gender : "Male", isHandsome : true } console.log(doodreamInfo); console.log..
JavaScript - 2 [변수선언, String, float, int, Array] 변수명 작성법 - 시작하기에 앞서 javaScript 의 변수명 작성은 CamelCase로 작성한다. CamelCase : daysOfWeek 와 같이 끊어서 표현할 변수이름을 대문자로 표기하는 방식이다. snake_case : days_of_week와 같이 밑줄을 섞어서 표현할 변수이름을 표기하는 방식이다. Variable - 자바 스크립트에서 변수는 파이썬과 상당히 비슷한 선언이다. - 자료형 선언도 없고 접근제어자도 없는것 같다. a = 17; b = a - 12; console.log(b); - 자바스크립트는 실행할 수 있으면 다 실행한다. 별로 좋지 않은 코드라도 말이다. 위코드는 변수의 선언을 이야기하지 않았음에도 돌아갔다. let - 변수의 선언은 let 키워드를 붙여 선언한다. - 사실 v..

티스토리툴바