본문 바로가기

js47

JS_기본 문법 (12)_문자열에 사용되는 연산자들 문자열에 사용되는 연산자들에 대해 알아보자! 1. 비교 연산자 연산자 의미 x == y 값이 같음 x === y 자료형과 값이 같음 x != y 값이 다름 x !== y 자료형 또는 값이 다름 x = y 사전 순 상으로 y가 먼저 오거나 같음 console.log('1' == 1, '1' === 1); >> true false == 은 자료형을 고려하지 않지만 ===은 자료형을 고려한다. 따라서 ===과 !==을 권장한다! console.log( 'A' >> true true false 비교 연산자를 이용할 경우 사전 상의 순서를 고려한다. 이때 대문자가 소문자보다 빠르다. 숫자 문자열의 비교.. 2023. 2. 26.

JS_기본 문법 (11)_템플릿 문자열 JS에서 문자열 내의 일정한 틀(template)을 이용하는 방법에 대해 알아보자. 변수에 저장된 값을 삽일할 수 있다. let name = 'KASSID' let month = 11 let day = 23 console.log(`${name}님의 등록일은 ${month}월 ${day}일 입니다.`) -------- KASSID님의 등록일은 11월 23일 입니다. 함수값을 바로 활용할 수 있다. let num = 3; let getTwice = (x)=>{ return x * 2 } console.log(`${num}의 두 배는 ${getTwice(num)}`) -------- 3의 두 배는 6 2022. 11. 23.

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.

나의 첫 웹사이트 만들기_(3) 코드 🔽 https://github.com/Bluishhot-Star/WEB/tree/master/Firstpage 이번에는 JS를 처음으로 적용시켜보았다. 아직 react나 vue를 다뤄보지 않아서 vanilla JS로만 구현을 해볼 예정이다. 그 처음으로 스크롤을 한 번에 올려주는 버튼을 만들어보았다. Back-to-top 버튼 화살표 아이콘은 FontAwesome에서 가져왔다. https://fontawesome.com/icons 화살표 뒤의 둥근 원에는 position: fixed 를 적용해서 문서의 흐름을 벗어나게 하였고, z-index: 999로 최상단에 위치하도록 했다. 버튼::after에는 다음과 같이 적용을 해주어서 아이콘을 적용했다. #backtotop::after{ content : .. 2022. 2. 25.

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.

이전 1 2 3 4 5 6 다음

티스토리툴바