정구리의 우주정복

오늘은 변수에 대한걸 끄적여 보겠음 ('모던 웹을 위한 Javascript+JQuary 입문' 책을 보고 내용정리) 이전까지는 변수에 대한 선택지가 var 밖에 없었음근데 ECMAScript6 부터는 let 과 const 라는 개념이 새로 생겼다 사용방법은 3종류 모두 동일하다 키워드 구분 선언위치 재선언var 변수 전역스코프 가능 let 변수 해당스코프 불가능 const 상수 해당스코프 불가능 이런 차이가 있다 우선 변수와 상수에 대해 알아보자변수는 변할수 있는 값상수는 변할수 없는 값상수는 선언을 한 이후에는 변경을 할 수 없어서 선언시 값을 반드시 같이 넣어줘야한다 let a = 100;a=50; ->이때 a 가 50으로 바뀌게 된다 const b=100;b=50; -> 이때는 오류가 나게된다 나같..

오늘은 새로고침 할때마다 배경이 바뀌는걸 자바스크립트를 이용해 만들어 볼거다 결과물부터 보자 짜자잔 안믿으면 어쩔수없지만 새로고침을 했다이렇게 사진이 바뀌는걸 확인할 수 있다 사진은 6개있는데 귀찮아서 2개만 찍었다사실 만들면서 어려울줄 알았는데 너무 쉽게 끝나서 당황했다'쏘쓰 const body=document.querySelector("body"); //call body tag const photoNum=6; //num of photo; function callRan(){ ranNum=Math.floor((Math.random()*6)+1);//call number 1 to 6 return ranNum} function callPho(){ ranNum=callRan(); url=`../image/${..

오늘은 자바스크립트와 html 을 이용한 계산기를 만들어볼거임 결과물 버튼을 누르면 수식이 입력이 되고 = 을 누르면 계산이 되는걸 확인할 수 있음 HTML 소스 Jungry Calculator 1 2 3 + 4 5 6 - 7 8 9 * C 0 = / . TMI 시간 ) 원래는 버튼들을 js 에서 입력을 받아서 이벤트 리스너로 클릭시 동작하게 만들고 싶었는데 새로고침 할때마다 클릭이된걸로 인식이되어동작하길래 그냥 onclick 을 사용하게 됨 왜 그런지는 아직도 잘 모르겠음.. 그래서 class를 하나하나 다 지정해줬는데 실제로는 쓰이지 않아서 지워도 상관 없음 ... 버튼을 누를때마다 숫자와 부호들은 addOutput 이라는 함수를 실행하게 된다C(초기화 버튼) 과 = 은 각각 init() 과 cal(..

자바스크립트로 ToDo 리스트를 만들어보는중이다이름 저장이랑 비슷할거라구 생각했는데 하나도 아님 ㅋㅋ localStorage 처리랑 지우는게 가장 어려운듯 ..!!! 일단 오늘 만든 부분 const todoForm=document.querySelector(".js-todo");const input=todoForm.querySelector("input");const ul=document.querySelector("ul"); let TODO=[]; //id와 text 가 저장될 곳 function deleteList(){}//x누르면 삭제하는거function makeList(text){ const li=document.createElement("li");//li 생성 const span=document.cr..

사실 localStorage 완전 조금 씀(별 대단한건 없단거임) 오늘 만들어 볼거는 사용자의 이름을 저장하는거다 ! 1. 이름을 입력2. 이름을 출력3. 새로고침해도 변하지 않음 ! 결과물 부터 보자 이름 입력 칸에 입력을 하면 정보가 저장이 된다 ! 그리고 이건 새로고침해도 지워지지 않지 localStorage 를 보면 나의 정보가 저장이 된 걸 확인할 수 있다. localStorage 삭제 방법은 저기 있는 버튼 눌러주면 됨 쨋든 이런거 만들었다 하하 시작해보자 우선 HTML 이다 중간의 는 이전에 썼던거니까 신경쓰지 않아두댐 form 안에 input 만들어줬다 name.js 파일 연결시켜줬고form 에 class 값이 두개 있다 (이거 나름 중요) CSS 파일이다 hidden 클래스에 displa..

첫 자바스크립트 게시물은 시계만들기 ! 시계를 만들기 위해선 1. 화면에 시계가 나와야함2. 시계가 실시간으로 계속 올라가야함 우선 결과물부터 보도록 하자 짜잔 CSS는 따로 적용을 안해서 그냥 하얀 바탕에 시계만 나와있다.그리고 실제로는 시간 가는중임 ㅎㅎ 동영상 찍는법을 몰라서 .. 우선 html 파일의 body 태그에div 와 h1을 넣어주었다 저 h1 안에 실질적인 시계가 들어가게 될 것이다.div 태그의 class 는 js-clock 을 주었다시계 역할을 해줄 파일은 script 태그로 clock.js 란 이름으로 링크해놓음 clock.js 파일 나는 js 파일의 맨 처음에 init 함수를 만들어주는 편이다 편하다 나름 실질적으로 실행되는 아이들을 여기에 넣어준다 clock.js 의 전체 소스 ..