Javascript를 이용해 간단한 여러 프로젝트를 해볼려고합니다. 아직 실력이 미흡해서 프로젝트의 퀄리티가 부족할 수 있습니다. 이점 참고해주세요! 게임설명 컴퓨터와 가위바위보 할 수 있습니다. 기능 컴퓨터와 가위바위보 대결 컴퓨터는 가위, 바위, 보 중 랜덤으로 하나를 선택한다. 사용자는 가위, 바위, 보 중 하나를 선택할 수 있다. 사용자가 하나를 선택하는 순간 컴퓨터가 선택한 값과 비교하여 결과를 출력한다. HTML html 코드는 간단하게 작성했습니다. 사용자 점수 : 0 컴퓨터 점수 : 0 CSS css는 flex를 이용하여 구현하였습니다. 모든 요소들을 가운데 정렬을 해주었고 버튼의 디자인을 간단하게 수정해주었습니다. body{ font-family: 'Lato', sans-serif; } ..
localStorage local storage는 웹 브라우저에 데이터를 저장할 수 있는 기능으로, 이 로컬스토리지를 사용하면, 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있습니다. 이 로컬 스토리지는 보통 사용자의 로그인 정보나 설정 등을 저장하기 위해 사용됩니다. 예를들어, 사용자가 웹 페이지에서 로그인 정보를 입력해 로그인을 성공했다면, 해당 아이디를 로컬스토리지에 저장해, 사용자가 다음에 다시 동일한 페이지에 방문했을 때, 아이디 정보를 불러와서 이전에 입력했던 정보를 유지할 수 있습니다. 로그인과 비밀번호를 입력할 수 있는 input태그와 로그인버튼을 만들어보겠습니다. 로그인 그다음 js파일에서 input태그에 입력된 아이디와 비밀번호의 값을 가져와보겠습니다. const id..
API란 API란 Application Programming Interface로, "컴퓨터나 컴퓨터 프로그램 사이의 연결"이라고 나와있습니다. 클라이언트와 서버의 통신 API에 대해 이해하려면, 먼저 클라이언트와 서버의 데이터 통신 즉, 우리가 웹이나 앱을 이용할 때 어떻게 원하는 데이터를 요청하고 받을 수 있는지를 먼저 이해해야합니다. 커피숍과 클라이언트-서버 통신 이러한 과정은 우리가 커피숍에 가서 커피를 주문하고 마시는 과정을 떠올려보면 쉽게 이해할 수 있습니다. 1. 손님이 바리스타에게 원하는 커피를 주문 2. 바리스타는 주문받은 커피를 만들기 위해 필요한 원두를 파악하고, 창고에서 원두를 선택 3. 바리스타는 창고에서 선택한 원두를 가져옴 4. 선택한 원두로 커피를 제작하고, 완성된 커피를 손님..
동기 동기란 하나의 작업이 실행되는 동안은 다른 작업을 수행하지 않는 방식으로, 다시 말해 하나의 작업이 종료될 때 까지 다른 작업을 실행하지 못하고, 앞선 작업이 끝나야 다음 작업을 할 수 있는 순차적인 방식을 말합니다. 아래는 동기적인 코드의 예시입니다. 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값이 동일한 것을 볼 수 ..
스코프 스코프(Scope)는 직역하면 범위 라는 뜻으로, 자바스크립트에서는 우리가 변수 또는 함수를 생성할 때, 해당 변수 또는 함수가 갖게 되는 유효범위를 뜻합니다. 자바스크립트의 스코프에는 여러 종류가 있습니다. 이 중에서, 전역스코프와 지역스코프에 대한 내용 먼저 살펴보겠습니다. 전역 스코프와 지역 스코프 전역 스코프는 영어로는 Global Scope로 전역에 선언되어있어, 어디서 든지 해당 변수에 접근 할 수 있는 범위를 뜻합니다. 지역 스코프는 Local Scope로 말 그대로 해당 지역에서만 접근할 수 있는, 지역을 벗어난 곳에서는 접근할 수 없는 범위를 나타냅니다. 저번시간에 배웠던 전역변수 혹은 외부변수는 아래에 보이는 코드의 sum변수처럼 어디서나 접근가능하므로 전역스코프를 갖고, 지역변..
함수 함수는 같은 동작을 하는, 중복된 코드가 여기저기에 존재할 때, 이들을 하나로 묶어 하나의 명령으로 실행할 수 있게 해주는 기능입니다. 작성법 먼저 함수를 사용하지 않고 동일한 기능을 하는 코드를 중복해서 작성해보겠습니다. let num1 = 10; let num2 = 15; let sum = num1 + num2; console.log(sum); //25 만약 여기서 또 다른 숫자들을 더하는 연산을 추가로 실행해야한다면, let num1 = 10; let num2 = 15; let sum = num1 + num2; console.log(sum); //25 let num3 = 1; let num4 = 5; let sum2 = num3 + num4; console.log(sum2); //6 위의 코드..
조건문 조건문은 특정 조건이 성립되었을 때 그 조건에 해당하는 코드를 실행하게 하는 문법입니다. if문 if문은, 영어 if와 같이 만약 ~ 하면 ~해라 라는 뜻으로, if문 옆에 작성하는 괄호 안에, 특정 조건문을 넣어, 해당 조건문이 성립하면 if문안의 코드를 실행하는 조건문입니다. let num = 10; if (num === 10) { //조건 console.log("num의 값은 10 입니다."); //실행 코드 } let num = 5; if (num === 10) { //조건 console.log("num의 값은 10 입니다."); //실행 코드 } if-else문 if-else문은 만약 ~ 하면 ~하고, 그렇지 안다면 ~해라 라는 뜻을 가지고 있습니다. let num = 5; if (num..
연산자 연산자는 프로그래밍 언어에서 특정 연산을 할 수 있도록 도와주는 문자입니다. let number = 25; console.log(number + 5); //30 console.log(number - 5); //20 console.log(number * 5); //125 console.log(number / 5); //5 대표적으로 사칙연산을 도와주는 덧셈, 뺄셈, 곱셈, 나눗셈이 연산자에 해당합니다. 이 외에도 다양한 연산자가 존재합니다. 산술연산자 위에서 보았던 사칙연산에 관한 기본적인 산술연산자 입니다. let num1 = 10; let num2 = 5; console.log(num1 + num2); // 15 console.log(num1 - num2); // 5 console.log(num..
자료형 자바스크립트 자료형은 크게 원시타입과 비 원시 타입으로 나뉩니다. 원시타입 자료형 : 숫자형, Binint형, 문자형, Boolean형, Null, Undefined, Symbol형 비 원시타입 자료형 : 객체, 함수, 배열 원시타입 단 하나의 값만을 갖고 있는 타입 let number = 123; number = "123"; // 원시 타입 let array = [1, "2", 3]; //비원시 타입 number 변수는 값이 123이었다가 "123"으로 변경되었지만 한 번에 하나의 값만 갖고 있는 것을 볼 수 있고, array변수는 1, "2", 3 으로 한 번에 3개의 값을 가질 수 있습니다. 숫자형 숫자형(Number)은 말 그대로 정수, 소수 등의 모든 숫자를 나타냅니다. 숫자형 타입은 덧..
이벤트버블링 아래의 코드는 각 태그에 해당하는 박스가 있습니다.(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..
자주사용하는이벤트(Event) 마우스 이벤트 : dblclick 키보드 이벤트 : keyup, keydown 포커스 이벤트 : focus, blur window 이벤트 : resize dblclick 더블클릭하면 실행, 한번 클릭하면 아무 반응이 없습니다. 클릭 keyup 키보드 이벤트는 키보드 입력시 발생하는 이벤트이다. console창을 확인해보면 키를 입력할때마다 keyup이 찍히는걸 볼 수 있다. body> 클릭 keyup 핸들러는 이벤트객채(event)를 인수로 받음. 결과값 "텍스트" : 입력한 특정 텍스트가 콘솔창에 출력됨 event : 해당 키보드 이벤트 관련된 모든 정보가 콘솔창에 출력됨 event.key : 오직 키보드 값만 콘솔창에 출력됨 인수로 event를 받아보겠습니다. 클릭 콘솔..
자바스크립트를 이용한 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의 ..
수정 이번에는 수정을 해보겠습니다. 먼저 blue를 가져오겠습니다. 지난 포스팅에서 배웠던 것처럼 firstChild는 text를 가져오고 firstElementChild는 null 없니다 이유는 자식요소노드는 없기 때문입니다. blueTextNode라는 변수를 만들고 blue.firstChild를 넣어보겠습니다 그리고 blueTextNode의 정보들을 보겠습니다. nodeType 3은 문서를 참고하면 3은 텍스트노드임을 알 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType Node: nodeType property - Web APIs | MDN The read-only nodeType property of a Node inte..
querySelectorAll / getElementsByTagName document.querySelectorAll NodeList를 반환해줍니다. document.getElementsByTagName() HTMLCollection를 반환해줍니다. 차이점 html 코드는 아래와 같습니다. Welcome World A A first...Naver A second... B B...Daum C Excepetur sint occaecat cupidatat non proident, sunt in culpa qui offcia deserunt molit anim id est laborum. Google Red Blue Green 위의 코드를 실행시킨 사이트에서 콘솔창에서 querySelectorAll과 getEl..
