티스토리

SY
검색하기

블로그 홈

SY

seungyeon716.tistory.com/m

Victory_Heo 님의 블로그입니다.

구독자
8
방명록 방문하기

주요 글 목록

  • 바닐라 자바스크립트 #2-6 바닐라 자바스크립트 #2-6 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. 이벤트의 근원을 알고 싶다면 항상 MDN을 가서 확인해보자! 여기 모든 이벤트들이 발생하는 것을 보여주고 있다. 리소스는 이미지 같은 것이다(아마도,,) navigation은 함수가 아닌 것을 확인할 수 있다. function handleOffline() { console.log("lalala"); } window.addEventListener("offline", handleOffline); //와이파이를 끄면 lalala가 뜨는 것을 확인할 수 있다. function handleOnline() { consol.. 공감수 0 댓글수 0 2021. 8. 29.
  • 바닐라 자바스크립트 #2-5 바닐라 자바스크립트 #2-5 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. if-else란 기본적으로 프로그래밍에서 어떻게 모든게 잘 동작하는지 보여주는 것을 말한다. if(10>5){ console.log("hi") } elsee { console.log("ho") } //hi hi가 나오는데 그 이유는 10이 5보다 크기 떄문이다. 이것이 조건문이다. if()안에 있는 것은 항상 true를 말한다. 만약 거짓이라면 else블럭을 실행시킬 것 이다. 10 === 5 의 ===는 체크를 말한다. 여기서 중요한 것은 if조건은 항상 참이어야 한다는 것!! 이거 말고도 피연산자라는 것이 .. 공감수 0 댓글수 0 2021. 8. 29.
  • 바닐라 자바스크립트 #2-4 바닐라 자바스크립트 #2-4 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. 자바스크립트는 단지 HTML이나 CSS를 바꾸고 싶어서 만들어지지 않았다. 자바스크립트는 이벤트에 반응하기 위해서 만들어졌다. 그럼 이벤트란 무엇인가? 이벤트는 웹사이트에서 발생하는 것들을 말한다. (click, resize, submit,printing,before, closing) form이란 것은 submit(제출)을 가지고 있다. const title = document.querySelector("#title"); function handleResize(){ console.log("I have been .. 공감수 0 댓글수 0 2021. 8. 28.
  • 바닐라 자바스크립트 #2-3 바닐라 자바스크립트 #2-3 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. 우리가 이전 비디오에서 한 건 HTML 을 이 DOM객체로 바꿀 수 있다는 걸 봤다. 이제 해 볼 것은 title에서 우리가 가진 모든 가능성을 보여주는 것을 해 볼 것이다. 자바스크립트로 HTML을 충분히 변경할 수 있다. document.title = 'I own you now'; //이렇게 하면 사이트의 title이 변경되는 것을 볼 수 있다. querySelector는 노드의 첫 번째 자식을 반환한다. 그 의미는 document에 가서 모든 자식들 중에서 찾으려고 할 것 이다. 앞으로는 querySele.. 공감수 0 댓글수 0 2021. 8. 28.
  • 바닐라 자바스크립트 #2-2 바닐라 자바스크립트 #2-2 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. document 역시 객체이다. const title = document.getElmentById("title"); console.log(title) //HTMLHEadimgElement() Dom(Document Object Module) 객체는 많은 키를 가지고 있다.(.log / .error / .name) 공감수 0 댓글수 0 2021. 8. 28.
  • 바닐라 자바스크립트 #2.1.1 바닐라 자바스크립트 #2.1.1 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. function sayhello(name, age){ console.log("Hello" + name + "You are" + age + "years old") } sayHello("Nicolas", 15); //HelloNicolasyou are 15 years old 이거를 좀 더 멋지게 간편하게 바꿔보자. 백틱을 이용해서(``) function sayHello(name, age){ return `Hello ${name} you are ${age} years old`); const greetNicolas.. 공감수 0 댓글수 0 2021. 8. 28.
  • 바닐라 자바스크립트 #2-1 바닐라 자바스크립트 #2-1 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. const nicoInfo = { name : "Nico", age : 33, gender : "Male", isHandsome : true } console.log(nicoInfo.favFood) console.log나 alert 등 수많은 함수들은 내장함수라고 한다. 함수란 어떤 것의 기능, 기능적인 것을 말한다.(내가 원하는 만큼 쓸 수 있는 코드) console.log("Hello") console.log("Hello") console.log("Hello") console.log("Hello") //He.. 공감수 0 댓글수 0 2021. 8. 28.
  • 바닐라 자바스크립트 #1-10 바닐라 자바스크립트 #1-10 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. 02.Oject 정의 : 각 value에 이름을 줄 수 있다. 예를 들어서, const nicoInfo= { name: "Nicolas", age: "33", " gender: "Male", isHandsome: true } console.log(nicoInfo); //{ name: 'Nico', age: 33, gender: 'Male', isHandsome: true} 이렇게 만들 수 있다. 만약 여기서 지정해서 출력하고 싶다면 const nicoInfo= { name: "Nicolas", age: "33.. 공감수 0 댓글수 0 2021. 8. 24.
  • 바닐라 자바스크립트 #1-9 바닐라 자바스크립트 #1-9 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. 01. Array 정의 : 데이터를 저장하는 곳, 리스트 같이 저장하는 것이다. 예를 들어 우리가 요일을 정렬한다고 하면 속성 : [ ] const moday = "Mon"; const tue = "Tue"; const wed = "Wed"; const thu = "Thu"; const fri = "Fri"; console.log(monday, tue, wed, thu, fri); //Mon Tue Wed Thu Fri 여기서 dayOfWeek처럼 대문자와 소문자를 섞은 단어를 볼 수 있는데, 이러한 것을 ca.. 공감수 0 댓글수 0 2021. 8. 24.
  • 바닐라 자바스크립트 #1-8 바닐라 자바스크립트 #1-8 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. 코멘트(주석) 주석처리 되지 않은 모든 코드는 프로그램이 실행하려고 한다. 이때 나만 알고 싶은 내용을 적고 싶을 때 주석처리 하면 프로그램에 실행되지 않고 나만 볼 수 있다. // to do : finish this const a = 5; 출력 : 5 이렇게 적으면 //주석 처리한 부분은 출력되지 않는 것을 확인할 수 있다. 위에 것은 한줄 주석이고, 여러 줄을 주석처리 할 때에는 /* to do : finish this to do : finish this to do : finish this to do : f.. 공감수 0 댓글수 0 2021. 8. 21.
  • 바닐라 자바스크립트 #1-7 바닐라 자바스크립트 #1-7 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. 상수(const) 상수는 안정적이라는 뜻이다. 변하지 않는다. const a = 221 let b = a - 5 a = 4; console.log(b) //error 위에 코드처럼 출력을 하면 Error가 난다. 이유는 const는 변하지 않는 상수이기에 컴퓨터에서 충돌이 난 것 이다. 공감수 0 댓글수 0 2021. 8. 21.
  • 바닐라 자바스크립트 #1-6 바닐라 자바스크립트 #1-6 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. 변수(Variables) 변경되거나 변경될 수 있는 것이다. 예를 들어서 index.js에 a = 221 b = a - 5 console.log(b) 입력한 후 확인해 보면 , 216이 나오는 걸 알 수 있다. Javascript는 우리가 문법이 틀려도 이해하려 하지 고치려고 하지 않는다. 예를 들어 a = 221 b = a - 5 console.log(b) 이라고 적으면 에러가 난다. 이걸 올바르게 표현하기 위해선 a = 221; b = a - 5; console.log(b); ;을 붙여주는 것이 올바르다. .. 공감수 0 댓글수 0 2021. 8. 21.
  • 바닐라 자바스크립트 #1-5 바닐라 자바스크립트 #1-5 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. This works! 먼저 틀을 잡아준 후, CSS로 넘어가서 body { background-color: peru; } h1 { color: #fff; } 이렇게 뜬다. 다음으로 JS로 넘어가서 alert("Im Working. Im JS. Im Beautiful. Im worth it"); 작성하면 , 이렇게 뜬다. 공감수 0 댓글수 0 2021. 8. 21.
  • 바닐라 자바스크립트 #1-4 바닐라 자바스크립트 #1-4 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. Javascript는 굉장히 오래된 언어이다. 업데이트를 할 수 없는 오래된 것의 경우 임시방편으로 떼워야 하는 경우가 있다. 예를 들어서 Javascript를 쓰는 많은 사이트들이 있다. 그렇지만 그 중 몇은 엄청 오래된 버젼의 Jsvascript를 쓸 것 이고, 우린 그걸 전부 업데이트 해 줄 수 없기 때문에 Javascript를 180도 다르거나 모던하게 바꿔줄 수 없다.(만약 그럴 경우 엄청나게 많은 사이트들이 망가질 것이다) 바닐라 자바스크립트는 브라우저를 통해 우리에게 제공된 Javascript라고 .. 공감수 0 댓글수 0 2021. 8. 21.
  • 바닐라 자바스크립트 #1-3 바닐라 자바스크립트 #1-3 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. Javascript Versions ECMScript는 Specification의 명칭과도 같은 거다. ES5는 ECMAScript5와 동일하다 Specification Javascript의 체계 메뉴얼과 같은 거다.(안내 책자) '이걸 읽고 이대로하면 컴퓨터가 이렇게 작동합니다'와 같은 / '이런 걸 적으면 브라우저는 이렇게 나와야 합니다'와 같은... 만약 다른 내용을 적으면 브라우저는 에러를 띄어야 합니다 같은 걸 알려준다. ES5와 ESC6같은 경우는 그냥 Specification의 버전을 나타내 준다... 공감수 0 댓글수 0 2021. 8. 21.
  • 바닐라 자바스크립트 #1-2 바닐라 자바스크립트 #1-2 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. Javascript를 사용하면 내 위치와 날씨, 할일 몰록 또한 저장할 수 있다 페이지를 새로고침하면 내 할일 목록이 저장 되어 있다. Real time(실시간)을 만들 수 있다. -> 실시간 채팅 휴대폰에서도 작동하는 앱을 만들 수도 있다. 비디오 게임도 만들 수 있다. world draw를 통해 아무 그림을 그리면 AI가 이 그림이 어떤 거에 가까운지 자동으로 알려준다.(색깔과 크기 지정 가능) Impact JS는 frame work 또는 library와 같은 거다(게임을 만들 수 있다) 앞으로 강의를 들으.. 공감수 0 댓글수 0 2021. 8. 21.
  • 바닐라 자바스크립트 #1-1 바닐라 자바스크립트 #1-1 자바스크립트의 기초 지식을 아는 것 뿐 아니라, 모멘텀(Momentum)이라는 생산성 앱을 클론코딩하면서 TO do List, 날씨, 시계 기능을 만들어 볼 수 있다. Javascript 란? 웹에 쓰이는 하나뿐인 프로그래밍 언어이다. (옵션이 하나뿐이기 때문에) 자잘한 이벤트들을 두 개 이상 진행 할 수 있게 도와주는 역할 또한 했었다. 앞으로 강의를 들으면 Javascript를 이용해 얼마나 많은 것들을 해낼 수 있는지 알아보는 것이 중요한 핵심포인트다. 공감수 0 댓글수 0 2021. 8. 21.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.