본문 바로가기

🌌 | WEB DEV/Vanilla JS44

JS_문법 (10)_대화창 대화창에 사용자와 상호작용할 수 있는 함수들에 대해서 알아보자! prompt() 사용자로부터 문자열 입력을 받는 함수이다. 이를 parseInt()와 같은 함수로 형변환하여 활용할 수 있다. prompt("대화창 메세지"); const num = prompt("이름을 입력하세요"); const num = parseInt(prompt("숫자를 입력하세요")); alert() 사용자에게 경고창을 띄우는 함수이다. alert("대화창 메세지"); alert("Hello!"); confirm() 사용자로부터 Y/N을 받는 함수이다. confirm("대화창 메세지"); const yesNo = confirm(num+" 명이 맞습니까?"); //script의 변수를 활용할 수 있다. 2022. 7. 26.

JS_문법 (9)_이벤트 웹페이지에 어떠한 이벤트가 발생했을 때 그에 대해 사용자가 상호작용을 할 수 있게 하는 것에 대해서 알아보자. 예전에는 태그에 직접 속성으로 에벤트를 추가하는 방식도 있었지만, 최근에는 JS를 HTML과 분리하기위해서 addEventListener()를 사용하는 방식을 선호한다. 이벤트 등록 대상 요소.addEvenListener(이벤트명, 리스너함수(콜백함수)) 이벤트명은 click, intput, focus, mousehover 등을 이야기한다. 리스너함수는 말그대로 '함수'를 넣어주면 된다. 따라서 인수 자리에 함수를 정의해주거나 정의한 함수의 이름을 넣어준다. (함수의 이름이 아닌 "함수명()"의 형태를 넣어주면 반환값이 들어가므로 정상작동X) 이벤트 삭제 대상 요소.removeEvenListen.. 2022. 2. 24.

JS_문법 (8)_DOM CRUD 파헤치기 Create Read Update Delete HTML 찾기 - doucument.getElementById(id명) : id로 찾기 - doucument.getElementsByTagName(태그명) : 태그로 찾기(배열로 반환) - doucument.getElementsByClassName(클래스명) : 클래스로 찾기(배열로 반환) - document.querySelector(css 선택자) : css 선택자로 찾기(최초등장 하나만 반환) - document.querySelectorAll(css 선택자) : css 선택자로 찾기(모든 요소. 배열 형태의 객체(유사배열)로 반환) (인수로 css 선택자를 전달한다. ' . '(class), ' # '(id), ' * '(all), (tag는 prefix.. 2022. 2. 24.

JS_문법 (7)_DOM / BOM DOM Document Object Model의 약자이다 Document = HTML 전체 코드 Object = HTML 태그 DOM은 객체를 가져와서 변수에 넣고 변수or메서드를 이용해 추가, 변경, 삭제 등의 제어를 하는 것을 말한다. (한줄요약) document라는 객체가 만들어지고 그 안의 여러가지 것들을 제어하는 것 웹브라우저 동작 과정 | 1 | HTML파일 가져오기 | 2 | 가져온 HTML파일을 파싱하여 DOM tree 생성 (태그를 기반으로 하여 분석!) CSS 정보 파싱하여 CSSOM tree 생성 | 3 | DOM/CSSOM tree를 기반으로 Render tree 생성 | 4 | Render tree를 기반으로 렌더링을 한다. 웹브라우저 동작과정 & JS 이번에는 JS가 첨가된 경우.. 2022. 2. 23.

JS_문법 (6)_promise 메서드(catch, finally, all, race 등 ) catch 메서드 기본적으로 예외상황을 처리한다. 만약 failCallback이 정의되어 있지 않을 때에는 reject 시에 catch 메서드 호출된다. (예외상황으로 인식) const func = new Promise( (resolve, reject) => { //성공, 실패 함수인수로 받기 setTimeout(() => { //비동기 함수 실행 let num = 10 if (num > 11) { resolve(num)//successCallback } else { reject("error")//failCallback } }, 1000); } ) func .then((item) => { //successCallback console.log('success', item) }) .catch((err) =>.. 2022. 2. 20.

JS_문법 (5)_동기/비동기 처리 동기적 처리 요청을 보낸 후, 해당 요청에 응답 받아 다음 동작 실행 (한 줄 완료 후 다음 줄 처리) 비동기 처리 요청 보낸 후, 응답에 상관없이 다음동작 실행 (한 줄 완료 상관없이 다음 줄 처리) 비동기적 처리? 대부분의 언어는 동기적 처리를 지향한다. JS의 경우에는 실행이 오래 걸리면 기다릴 필요없이 다음으로 넘어가도록 비동기처리가 가능하게 되어 있다. 정리하면 JS는 기본적으로 동기적 처리 일부 기능 비동기적 처리 추가 제공 비동기 처리 지원 기능 Rest API 요청 파일 / DB 처리 타이머, 암호화 / 복호화 비동기 예시 setTimeout 함수 setTimeout(functoin, milliseconds) - millisecons : ms 만큼 기다리기 - function : ms만큼 .. 2022. 2. 18.

JS_문법 (4)_Scope JS의 Scope에 대해서 알아보자! 3가지 종류가 있는데 다음과 같다. 1. 전역 (Global) scope : 코드 전체 범위 2. 함수 (Function) scope : 함수 내에서의 범위 3. 블록 (Block) scope : { } 중괄호로 이뤄진 블록 내에서의 범위 다른 언어와 달리 블록 scope가 있다! 전역 scope 외부에서 선언된 변수or함수 모든 코드에서 사용이 가능하다. 이때 블록까지도 적용이 가능하다. let a = 1; { console.log(a) } console.log(a) >>> 1 //블록 안에서 출력 1 //블록 밖에서 출력 전역변수는 블록 안의 블록까지도 적용이 된다. let a = 1; { let b = 2; console.log(a) { console.log(a.. 2022. 2. 17.

JS_문법 (3)_호이스팅 호이스팅 이슈 Hoisting = 끌어올린다 일반적인 언어 = 함수, 변수를 선언 후 사용이 가능 JS = 선언 전에 사용을 해도 에러를 내지 않는다...! 예시 1. var 키워드 var은 let과 같은 변수를 선언에 쓰이는 키워드이다. 하지만 같은 이름의 변수를 재선언해도 오류가 나지 않는다. var a = 1; var a = 2; console.log(a) >>> 2 ====================== let a = 1; let a = 2; console.log(a) >>> SyntaxError: Identifier 'a' has already been declared 호이스팅이 일어나는 예시 console.log(a) a = 10; console.log(a) var a = 1 console... 2022. 2. 16.

JS_문법 (2)_구조 분해 할당2, Rest-Spread 파라미터 변수 값 교환하기 let a = 1; let b = 2; [a, b] = [b, a] //대괄호로 해야 가능 console.log(a, b) >>> 2 1 다른 언어에 비해서 교환하는 것이 간결하다. 한 번에 여러 값 할당 let a = 1; let b = 2; [a, b] = [3, 4] console.log(a, b) >>> 3 4 파이썬의 튜플처럼 여러 값을 할당하는 것은 위처럼 써주면 가능하다. function data(){ return [1, 2] } let [a,b] = data() console.log(a, b) >>> 1 2 함수의 리턴값을 배열로 지정하는 것도 여러 값을 할당시키는 데에 이용가능하다. 문자열 분리 파이썬에도 있는 .split() 함수! let data = 'Hello my.. 2022. 2. 15.

이전 1 2 3 4 5 다음

티스토리툴바