Javascript를 이용해 간단한 여러 프로젝트를 해볼려고합니다. 아직 실력이 미흡해서 프로젝트의 퀄리티가 부족할 수 있습니다. 이점 참고해주세요! 게임설명 컴퓨터와 가위바위보 할 수 있습니다. 기능 컴퓨터와 가위바위보 대결 컴퓨터는 가위, 바위, 보 중 랜덤으로 하나를 선택한다. 사용자는 가위, 바위, 보 중 하나를 선택할 수 있다. 사용자가 하나를 선택하는 순간 컴퓨터가 선택한 값과 비교하여 결과를 출력한다. HTML html 코드는 간단하게 작성했습니다. 사용자 점수 : 0 컴퓨터 점수 : 0 CSS css는 flex를 이용하여 구현하였습니다. 모든 요소들을 가운데 정렬을 해주었고 버튼의 디자인을 간단하게 수정해주었습니다. body{ font-family: 'Lato', sans-serif; } ..
북마크리스트표시 이번에는 저번에 이어 북마크 바에 여러 아이템을 추가해보고 추가한 아이템 리스트들을 표시하는 기능까지 개발해보겠습니다. 먼저 html에서 class이름이 bookmark-bar인 요소 안에 class이름과 id값이 bookmark-item-add-btn인 div를 작성하고, 그 아래에는 새로운 북마크를 추가할 수 있는 입력폼과 추가버튼을 만들어주겠습니다. + 북마크 추가 이름 주소 취소 추가 그 다음, bookmark.js 파일을 만들어서 방금만든 최상위 div를 id를 통해 불러오겠습니다. 이 북마크도 마찬가지로, 한 번 추가한 북마크는 다음에 접속했을 때 추가된 상태여야 하기 때문에 로컬스토리지에 저장해야합니다. 배열을 하나 만들고, 만약 로컬스토리지에 이 배열의 값이 있으면 로컬스토..
이번에는 구글의 검색 결과 창으로 이동하는 기능을 개발해보겠습니다. 먼저 저번시간에 작성했던 html 코드의 today-info div태그아래에 다음 코드를 추가해줍니다. 코드를 저장하고 실행해보면 화면에 "검색어를 입력하세요"라는 글자가 적힌 input폼이 나타납니다. 이전에 검색했던 기록들이 나오면 input태그에 autocomplete속성을 off로 설정해줍니다. 이제 search.js라는 파일을 하나 만들고 위의 input요소를 가져오겠습니다. const searchInput = document.getElementById("search-input"); 그 다음, 우리는 이 input 폼에 검색어를 입력하고 엔터를 누르면, 그 값을 검색한 결과 페이지로 이동시켜야하는 기능을 만들어야하기 때문에, 우..
이번에는 실제 웹페이지를 개발해보겠습니다. 개발한 웹페이지는 크롬익스텐션으로 변환해, 크롬창을 열때마다 시작화면으로 사용하 수 있도록 함께 설정까지 할 예정입니다. 먼저 개발할 웹페이지를 살펴보겠습니다. 먼저 오늘의 날짜와 현재 시간을 나타내는 시계를 만들어보고, 검색어를 입력하면 검새 결과 페이지로 이동하는 기능도 만들고, api를 통해 명언 데이터를 받아와서 화면에 나타내보고 마지막으로 북마크를 추가하고 삭제하는 기능까지 개발해 볼 예정입니다. 참고자료 https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%..
저번시간에 배운 프로미스 객체에 대해 복습할 겸, 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성해보겠습니다. delay라는 함수를 작성하고, delay함수에서는 setTimeout 함수에서 사용할 매개변수를 받습니다. 프로미스 객체를 반환하고 resolve함수를 호출해주고, delay함수 아래에는 start함수를 생성하고 delay함수를 호출했습니다. delay함수의 인수로는 2000을 넘겨 2초동안 지연하게 해주고, then 메서드를 사용해, "대기"라는 단어를 출력합니다. const delay = (ms)=>{ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(); },ms); }); }; const start = () => { delay(..
비동기 처리 우리는 setTimeout 함수를 이용해 작업을 비동기적으로 처리했었고, setTimeout함수는 작성된 코드와 같이 콜백함수와 ms단위의 지연 시간을 매개변수로 입력받는 함수라고 배웠습니다. https://myeongsu0257.tistory.com/117 자바스크립트 - 비동기 처리 동기 동기란 하나의 작업이 실행되는 동안은 다른 작업을 수행하지 않는 방식으로, 다시 말해 하나의 작업이 종료될 때 까지 다른 작업을 실행하지 못하고, 앞선 작업이 끝나야 다음 작업을 할 myeongsu0257.tistory.com 지난시간에 작성했던 코드에서, 함수를 호출할 때 출력할 단어와, 단어를 출력하는 함수를 인수로 넘겨주도록 하겠습니다. const workA = (value, callback) =>..
동기 동기란 하나의 작업이 실행되는 동안은 다른 작업을 수행하지 않는 방식으로, 다시 말해 하나의 작업이 종료될 때 까지 다른 작업을 실행하지 못하고, 앞선 작업이 끝나야 다음 작업을 할 수 있는 순차적인 방식을 말합니다. 아래는 동기적인 코드의 예시입니다. console.log("a"); console.log("b"); console.log("c"); 결과를 보면 작성된 순서대로 실행결과 a,b,c가 출력됩니다. 이유가 바로 자바스크립트 코드가 동기적으로 처리 되었기 때문입니다. workA, workB, workC 3가지 함수가 실행 후 종료되기 까지 걸리는 시간이 각각 5초, 3초, 10초 라고 가정해보겠습니다. const workA = ()=>{ //5초 console.log("workA"); } ..
spread spread는 직역하면 확산, 퍼짐, 전파라는 뜻으로, 실제로 특정 배열의 요소나 객체의 프로퍼티 값들을 펼치는 역할을 합니다. 객체 spread에 대해 알아보기 위해 toy라는 객체를 선언 const toy = { type: "bear", price: 15000, }; 이번에는 color라는 키값을 갖는 프로퍼티를 추가해서 두 개의 객체를 생성 const blueToy = { type: "bear", price: 15000, color: "blue", }; const yellowToy = { type: "bear", price: 15000, color: "yellow", }; 작성한 객체들을 보면, 새로 추가한 객체들과 toy객체의 프로퍼티 중 type과 price값이 동일한 것을 볼 수 ..
forEach 우리는 배열의 모든 요소들에 접근하기 위해 for문을 사용했었습니다. let arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 이렇게 배열의 요소들에 접근하기 위해서는 for문을 사용할 수도 있지만, 자바스크립트에서는 배열의 내장함수를 이용해 더 간단하게 배열 요소에 접근할 수 있습니다. forEach라는 배열 내장함수를 사용해보겠습니다. forEach는 배열의 내장함수, 메서드이기 때문에 배열의 이름인 arr의 뒤에 점을 찍고 forEach()를 작성해줍니다. 그리고 매개변수로 함수를 전달할 수 있는데, 이 함수를 콜백함수라고 합니다. forEach의 괄호 안에 콜백함수를 화살표형 함수로..
배열 객체가 한 번에 여래개의 데이터 값들을 저장할 수 있는 자료형 이었다면, 배열은 순서가 있는 요소들의 집합, 여러개의 항목들이 모여 있는 리스트라고 할 수 있습니다. 배열생성 배열생성은 배열 생성자,배열리터럴로 생성할 수 있다. 배열생성자 배열 또한 생성자를 통해 배열을 생성할 수 있습니다, new라는 키워드를 사용해야합니다. let arr = new Array(); console로 확인해보면 배열은 []가 출력되는 것을 확인할 수 있습니다.(객체는 {}) 이번에는 배열에 값을 넣어보겠습니다. 이렇게 배열 생성자에 값을 할당할 때에는, 특정 요소를 넣으려면 여러개의 값을 넣고, 원하는 크기의 공간을 할당하려면, 원하는 공간의 크기를 괄호 안에 작성해주면 됩니다. 배열 리터럴 두번째 방법은 배열 리터..
이벤트버블링 아래의 코드는 각 태그에 해당하는 박스가 있습니다.(body> div > ul >li 순) 각 박스의 클릭이벤트가 발생하면 콘솔창에 기록됩니다. body div ul li body{ border : 1px solid; padding:30px; background-color:white; } div{ margin:30px; padding:30px; border : 1px solid; background-color: blue; } ul{ margin:30px; padding:30px; border : 1px solid; background-color: green; } li{ margin:30px; padding:30px; border : 1px solid; background-color: pink..
자바스크립트를 이용한 css style 제어 아래와 같은 코드가 있습니다. id를 이용해 html의 css을 scipt 안에서 바꿔보겠습니다. Box Red Green Blue script 태그안에 다음의 코드를 추가해줍니다. 주의하실점은 일반적으로 css를 작성할때 background-color:red; 와같이 대시를 사용하지만 script 안에서는 카멜케이스(camel case)로 작성해줍니다. 아니면 익숙한 방법으로 작성하실려면 대괄호를 이용해줍니다. box.style["background-color"]="blue"; 콘솔창에서 한번확인해보겠습니다. 콘솔창에 box.style을 입력해줍니다. 보시면 카멜케이스로 작성이 된 걸 알 수 있습니다. 여러속성을 동시에 적용할 수 도있습니다. border의 ..
DOM(Document Object Model) DOM이란 문서객체모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바크스립트 같은 스크립팅 언어가 쉽게 웹피이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 합니다. 다시말해 문서객체란 이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만든 것을 말합니다. DOM은 어떻게 생성되고 보여질까? DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이도 합니다. 따라..
저번글에서 promise에 대해 공부했습니다. async, await를 사용하면 promise의 then메소드를 chain형식으로 호출하는 것보다 가독성이 좋아집니다. async 아래와 같은 함수가 있다고 가정합시다. 이 함수 앞에 async라는 키워드를 붙여주게 되면 해당 함수는 항상 promise를 반환하게 됩니다. async function getName(){ return "Mike"; } console.log(getName()); promise를 반환하기 때문에 then을 사용할 수 있습니다. async function getName(){ return Promise.resolve("Tom"); } getName().then((name)=>{ console.log(name); }); 반환값이 prm..
promise란? promise를 실생활에 빗대어 설명하면 어느 한 상점에 손님이 물건을 요구하고 해당 상점은 물건을 제작합니다. 손님은 요구한 물건이 나오기 전까지 10초마다 물건의 완성여부를 묻는 행동을 한다고 가정했을 때, 상점측은 "아니요", "만들다가 실패했어요" 등의 대답을 할 수 있습니다. 이렇게 10초마다 물어보는 비효율적인 상황에서 효율적인 방법을 찾아보면 손님이 자신의 전화번호를 상점에 남기고 완성되거나 실패하면 결과를 자신의 번호로 알려달라고 하는것이 효율적이겠지요. 이런 행위를 promise라고 하고 js에서도 해당 기능을 하는 prmise 함수가 있습니다. promise사용법 const pr = new Promise((resolve,reject) => { // code } prom..
