전체 글 61

[Momentum] Clone Coding - 08

Event : 클릭, 마우스가 올라가는 것, 엔터 누르기 등등이 event 라고 할 수 있다. javascript 는 event 를 listen 가능. = eventlistener function gandleTitleClick(){ console.log("title was clicked!"); } title.addeventlistener("click", handleTitleClick); 이렇게 쓰면, 클릭 발생 시 이벤트가 실행된다. 근데, handleTitleClick() 이렇게 추가를 해주면, () 가 있기 때문에, 자동으로 클릭이 된다. 클릭을 수동으로 하고 싶다면 () 를 넣어주지 않아야 한다. 이 클릭은 어디를 선택하던지 가능! button 이 아니라 그냥 h1 태그와 같은 것들도 클릭 가능 하..

[Momentum] Clone Coding -07

자바스크립트를 브라우저에 표현하려면, HTML 에 연결을 시켜야 합니다. 자바스크립트의 기본적인 기능에 대해 알아 보았으니, 이제 html 로 끌어오는 기능을 보겠습니다. 왜? console.log 로 하면, 콘솔창에만 뜨니까, 브라우저 창으로 불러오기 위한 시작을 하겠습니다... 웹 브라우저에서 소스코드를 보면, html 에 title 이 들어가 있다. 이것을 콘솔창에서 부르고, 수정할 수 있다. 이렇게 document.title 을 하면, 현재 페이지의 title 을 확인할 수 있고, 이렇게 하면, title 을 교체 할 수 있다. 위에서 보듯이, 자바스크립트는 이미 html 과 연결이 되어 있다.! grap me! 이렇게 html 에 작성을 해주고, const title = document.getE..

플밍정리/web 2021.08.25

[Momentum] Clone Coding -06

Conditionals (조건문) : t/f 를 알려준다. if else prompt : 사용자에게 창을 띄울 수 있도록 해주는 함수 2개의 argument 를 받는데 하나는 message (문자), 하나는 default const age = prompt("how old are u?"); console.log(age); 이렇게 하면, 팝업창으로 prompt 안의 질문이 나오고, 값을 넣어주면 그 값을 age 로 받아들여 콘솔창에 age 가 나오게 된다. 하지만, prompt 함수는 자바스크립트를 일시정지 시키게 되고, 메세지 팝업창이 예쁘지 않아 잘 안쓴다...! (하지만 기본적인 기능 같다 내눈에!) 조건문 사용해서 숫자 일때 / 아닐때 다르게 반응

플밍정리/web 2021.08.03

[Momentum] Clone Coding -05

계산기 만들기 실습 const calculator = { add: function(a, b) { console.log(a + b); }, minus: function(a, b) { console.log(a - b); }, div: function(a, b) { console.log(a / b); }, powerOf: function(a, b) { console.log(a ** b); }, } calculator.add(1, 2); calculator.div(3, 6); calculator.minus(4, 2); calculator.powerOf(2, 5); 여기서, console 에 넣어 버리면 콘솔창에 보여주고 그 값이 사라진다. 그래서, return 을 이용해서, function 값을 넣어주고, co..

플밍정리/web 2021.08.02

[Momentum] Clone Coding -04

function xxx.xx 형태의 함수? 를 쓰는 법을 clone coding-03 편에서 간략히 살펴보았다. 그런데 xxx.xx() 이렇게 괄호가 있다면? 흔히, function 에서 가장 많이 사용되는건? 조건문, 반복문 인 것 같다,,,! (내기준ㅠ) 반복되는 작업에 변수만 바꿔서 진행될 때를 알아보자, javascript 에서 function 함수를 쓰려면? function sayHello(){ 여기 } 이렇게 작성하면, 여기 부분에 원하는 함수를 넣으면, sayHello 라는 함수를 실행시킬 때마다 '여기' 부분이 실행된다. 이제, array 값들을 순차대로 뽑아보자. ex. arr = ["jin","judy","tom"] Hello jin Hello judy Hello tom 이렇게! fun..

플밍정리/web 2021.08.02

[Momentum] Clone Coding -03

Boolean : True / False (0/1) const amIGirl = true; 이때 true 는 문자가 아니라 true 라는 값이기 때문에 따옴표 안에 넣지 않는다. null 은 아무것도 없다. 즉, false 와 다르다. null 은 의도적으로 비어있음을 표현해주기 위해 선언하는 것이고, 선언이 안되어 있다면 undefined 라고 뜬다. const amIGirl = null; let name; console.log(amIFirl, name); 결과는 null undefined 라고 나온다. ARRAY const mon = "mon"; const tue = "tue"; const wed = "wed"; const thu = "thu"; const fri = "fri"; const sat =..

플밍정리/web 2021.07.30

[Momentum] Clone Coding -02

프로그래밍에 있어 가장 기본적인 데이터 타입 1. integer (숫자) / float : 숫자 간 연산도 가능하다. 2. 문자 : 자바스크립트 콘솔에 그냥 문자 그대로 넣으면 오류가 난다. 문자는 "" 안에 넣어야 한다. 그러면 그대로! 인식해서 그대로 보여준다. app.js 파일에서 console.log = 콘솔에게 메시지를 보내기 console.log(345); 이렇게 하면, 콘솔창에 345가 출력된다. console.log 는 콘솔 값에 () 값을 출력해 준다. 문자를 넣을거라면? "" 하고 넣어주면 된다. '' 도 가능하다. 자바스크립트에서 변수를 만드는 법 const = 상수, 변하지 않는 값. const 변수명 변수값; const a = 5; 이렇게 해주면, 나중에 console.log 를 ..

플밍정리/web 2021.07.30

[Momentum] Clone Coding -01

노마드 코더를 보고 클론코딩부터 해서 js 를 완벽히! 해보려고 한다. 기존엔 주먹구구로 필요한거 찾아다 쓰다 보니 실행되는 파일까진 완성했지만 코드가 아주 지저분하고 백엔드까지는 js 에서 구현하지를 못했다.. 그래서 클론코딩을 하면서 js 에 대해 꼼꼼히 공부를 하고, 기존 플젝을 완성시켜 보려 한다. 웹을 구현할때 가장 필요로 하는 것은 js ! html, css 이다. javascript 는 이미 구현이 완료된 상태이다. 파이썬과 달리 별도로 설치하지 않아도 컴퓨터에서 이미 실행이 된다. 모멘텀에서 검사 - console - js 코드 입력 을 해주면, 우리가 원하는 형태를 바로 브라우저에서 확인이 가능하다. 하지만 콘솔창은 짧은 코드를 위한 것이기 때문에, 길게 코드를 작성하고 보기가 어렵다. ..

플밍정리/web 2021.07.29

알고리즘을 공부해야 하는 이유

- 알고리즘은 초보보단 배포도 끝난 단계에서 배우는 것이 효과가 좋다! 어플이 너무 느릴 때 알고리즘이 필요하게 된다. 데이터구조의 종류에 따라 - 정렬에 유리 - 검색에 유리 - 삽입/삭제에 유리 등등 이렇게 목적이 달라질 수 있다. Array? Time Complexity : 알고리즘이나 데이터 구조의 속도가 어떤지 (느린지 빠른지) 측정하는 방법 알고리즘 에 소요되는 시간이 아니라 단계에 대한 설명 volatile vs non-volatile memory - 컴퓨터를 껐다 켰을 때 하드디스크에 남아있는 데이터는 non-volatile memory - RAM 은 volatile - RAM 은 Memory Address 가 있다. 그렇기 때문에, 원하는 위치의 주소번호를 넣어주기만 하면 바로 그 위치로..

플밍정리/web 2021.07.28

[JavaScript]자바스크립트 - 배열

기존의 변수는, 하나의 값을 저장할 수 있다. 만약 여러개의 변수를 넣어서 만들고 싶다면? 배열을 사용하면 된다. var name = 'silvering0' alert(name); 기존의 변수 할당 var name =[ 'silvering0','goldring','bronzering'] alert(name); 배열로 할당하려면, 대괄호로 묶어주고, 각각을 ' ' 그리고 , 로 연속해서 적어주면 된다. 이때 name 에는 세가지 값이 있는데, 이를 각각 숫자로 부를 수 있다. 컴퓨터 언어는 시작이 0 부터이기 때문에, name[0] = silvering0 name[1] = goldring name[2] = bronzering 의 의미를 갖는다. 배열이 없다면? 변수를 매번 새로 정해주고, 그 변수를 항상 ..