localStorage와 sessionStorage 로컬 스토리지와 세션 스토리지는 자바 스크립트에서 사용되는 웹 스토리지 옵션입니다. 이 두 가지 기능은 웹 브라우저에서 키와 값으로 이루어진 데이터를 저장하는 데에 사용됩니다. 쿠키와의 차이점 웹 브라우저에 데이터를 저장하는 것이 쿠키와 유사하다고 생각할 수 있지만 다음과 같은 차이점이 존재합니다. 쿠키와 달리 네트워크 요청 시 서버로 전송되지 않는다 개발자가 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다 쿠키와 달리 HTTP 헤더를 통해 객체를 조작할 수 없다 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다 제공하는 프로퍼티와 메서드 공통 프로퍼티 localStorage.length 및 sessionStorage.length: 스토리지..

async 함수 async와 await이라는 문법을 사용하면 프로미스를 더 편하게 사용할 수 있습니다. async 는 function 앞에 위치합니다. async function fnc(){ return 0; } 함수 앞에 async를 붙이면 그 함수는 항상 프로미스를 반환합니다. async function fnc() { return 'hello'; } fnc().then(alert); 명시적으로도 프로미를 반환할 수 있습니다. async function fnc() { return Promise.resolve(1); } fnc().then(alert); 위 두 개의 코드의 결과는 같습니다. 즉, async가 붙은 함수는 반드시 프로미스를 반환해 프로미스가 아닌 returun값은 프로미로 감싸 반환합니다...

프로미스 객체란? 프로미스(Promise) 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 즉 비동기 함수의 실행 상태에 따라 각각의 함수를 호출하여 작업의 결과를 나타내는 것입니다. 예시 비동기적으로 이미지파일을 생성하는 createImageFile() 이라는 함수가 있을 때, 이 함수의 파라미터로는 (1)이미지 파일의 이름, (2)성공 시 호출할 함수, (3)실패 시 호출할 함수가 있습니다. function createImageFile(fileName, successCallBack, failureCallBack){ // 이미지 파일 생성중 if(success) successCallBack(fileName); else failureCallBack(fileName); } 프로미스가 나타..

동기와 비동기 동기 (Synchronous) 자바스크립트에서 코드는 기본적으로 작성한 순서에 따라 위에서부터 아래로 순차적으로 실행되는데, 이처럼 순차적으로 코드를 실행하는 것을 동기라고 합니다. console.log("1번"); console.log("2번"); console.log("3번"); 위 코드를 실행하면 결과는 1번 2번 3번 이 됩니다. 마트에서 계산을 하기위해 카운터에서 기다릴 때를 생각해보세요. 앞 사람의 계산이 끝나야 뒤의 사람의 계산이 시작됩니다. 동기도 이처럼 앞의 작업을 완료가 되어야 다음 작업을 실행할 수 있습니다. 자바 스크립트는 기본적으로 동기적으로 동작합니다. 동기적으로 동작하는 코드는 작성된 수서에 따라 작업이 진행되므로 작업의 흐름을 파악하기 쉽습니다. 그런데, 위와 ..

안녕하세요~ 드디어!! 자바 스크립트의 함수, 액션리스너를 사용하여 데이터 단위 변환기 프로젝트를 진행해보겠습니다. 진짜... 너무 쉬워서 한시간이면 다 만들거에요 HTML, CSS 소스 준비 깃허브, zip 파일 소스코드 복사 등 편하신 방법으로 소스를 준비해주세요. 깃허브를 가장 추천드립니다. 내가 깃허브를 잘 못다룬다! 싶으시면 ctrl+c, crtl+v 를 가장 추천합니다... https://github.com/hyeg0121/2WeeksStudy_JavaScript GitHub - hyeg0121/2WeeksStudy_JavaScript: 2동안 자바 스크립트의 함수와 이벤트, 객체를 공부하여 데이터 2동안 자바 스크립트의 함수와 이벤트, 객체를 공부하여 데이터 양 계산 웹페이지 만들기. Con..

안녕하세요!! 오늘은 체크박스나 셀렉트 등 다양한 HTML 폼 요소에 접근하여 속성을 바꾸는 방법에 대해 알아보도록 하겠습니다! 실습 준비 실습 전 다음 소스를 복사 붙여넣기 하여 HTML 파일과 JS 파일을 준비 해주세요! (두 개의 파일은 편의상 같은 디렉토리에 위치시켜 주세요) demo.html 이메일 주소 : == 이메일 선택 == naver.com gmail.com hanmail.net HTML 파일을 실행시키면 위와 같은 폼들이 보일 것입니다. 각각 코드로 구현된 부분은 다음과 같습니다. label : 텍스트 (이메일 주소 :) input type="text" : 텍스트 입력 필드 select : 콤보박스 option : 콤보박스의 옵션 input type="checkbox" : 체크박스 다음..

안녕하세요! 4번째 과제에서는 이번 시즌에 가장 중요하다고 볼 수 있는 DOM객체와 이벤트 처리에 대해 알아보도록 하겠습니다 DOM이란? DOM 이란 Document Object Model의 약자입니다. 번역하자면 문서 객체 모델인데요. 여기서의 문서는 HTML 문서를 말한다고 이해하시면 됩니다. document 위와 같은 HTML문서를 실행하고 개발자 모드에 들어가면 콘솔에 document가 출력되고, 펼쳤을 때 웹 문서의 소스를 볼 수 있습니다. 이를 통해 document는 웹 문서 자체를 가리키는 DOM요소 중 하나라는 것을 알 수 있습니다. document가 웹 문서 자체를 가리키기 때문에 수정 또한 가능합니다. document.write()를 활용해 문서를 수정해 보겠습니다. body 에는 h2..

이벤트란? 이벤트란 키보드에서 키를 누르는 것이나, 브라우저가 웹 페이지를 불러오는 것처럼 사용자가 행하는 동작을 이벤트라고 합니다. 하지만 이벤트는 웹 문서 영역 안에서 이루어지는 동작들만을 말하는 것이니 이 점 유의하시길 바랍니다. 마우스 이벤트 먼저 마우스를 동작하였을 때의 이벤트를 살펴보도록 하겠습니다. click : 사용자가 HTML 요소를 클릭할 때 이벤트가 발생합니다 dbclick : 사용자가 HTML 요소를 더블클릭 했을 때 이벤트가 발생합니다 mouseover : 마우스 포인터가 요소 위에 옮겨질 때 이벤트가 발생합니다 mouseout : 마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다 폼 이벤트 Form 은 로그인창이나 검색창처럼 정보를 입력하는 요소들을 말합니다. 폼 요소에 내용..

안녕하세요! 저번 함수 알아보기 게시물에 이어서 함수를 더 편리하고 간편하게 사용할 수 있는 방법들을 공부해 보겠습니다. 익명함수 익명함수는 말 그대로 이름이 없는 함수입니다. 전 게시글의 함수들은 모두 함수명을 표기하였습니다. 하지만 익명 함수는 이름 없이 선언할 수 있습니다. function(a, b){ return a + b; } 여기서 잠깐! 익명 함수는 이름이 없는데 어떻게 호출하고 실행할까요?? 익명함수는 함수 자체가 표현식이기 때문에 함수를 변수에 대입하거나 다른 함수의 매개변수로 사용할 수 있습니다. 말이 좀 어렵지만 다음 코드를 보면서 차근차근 이해해 봅시다. var sum = function(a, b){ return a + b; } console.log(sum(10, 5)); 실행결과 ..

안녕하세요! 첫 번째 과제에서는 자바 스크립트의 함수에 대해 공부하고자 합니다 ✏️ 함수란? 먼저 자바스크립트에서 함수란 하나의 동작을 하기 위한 코드 덩어리라고 설명할 수 있습니다. 함수를 정의하면 코드를 간결하게 사용할 수 있을뿐더러, 명령의 목적을 확실하게 구분할 수 있어 편리합니다. 함수를 사용하는 방법은 다음과 같습니다. 함수를 만들 때 이름을 붙이고 필요할 때 함수의 이름을 사용해 실행 1번과 2번을 각각 함수를 선언한다, 함수를 호출한다고 합니다. 함수의 기본형은 다음과 같습니다. function 함수명() { 명령 } 다음 코드를 보면서 함수를 선언하고 호출하는 방법을 알아봅시다. 실행결과 >> 11 addNumber() 함수를 정의하였습니다. addNumber() 함수는 3+8의 결과를 ..