본문 바로가기

전체 글

(112)

DAY 11 6.0 - 6.2 background.js // img 파일 명을 담은 변수 const images = ["0.jpeg", "1.jpeg", "2.jpeg"]; // 이미지 랜덤 출력 const chosenImage = images[Math.floor(Math.random() * images.length)]; // document에 img 태그를 만드는 변수 생성 const bgImage = document.createElement("img"); // bgImage의 src에 주소를 랜덤으로 대입 bgImage.src = `img/${chosenImage}`; // html에 img 태그를 생성한다. document.body.appendChild(bgImage); img를 배경으로 하고싶다면 body >..

DAY 10 5.0 ~ 5.3 이번 글은 거의 다 썼을 때쯤에 갑자기 컴퓨터가 멈추는바람에... 간략하게 써야지 ㅠ...하 index.html 00:00 app.js const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); // date.getHours()등 시간 값은 숫자 값이다. // padStart는 string 값에만 사용할 수 있으므로, 변환해줘야 한다. const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = Str..

DAY 8 #4.4 Getting Username submit 버튼을 클릭했을 때, form 자체를 사라지게 하는 방법이 2개가 있다. ① form 태그 자체를 제거하는 것 ② css에서 display:none; 속성을 추가해주는 것 아래는 form에서 입력값을 받아오면 form은 제거하고, 받아온 입력값을 출력하는 코드다. index.html login-form에서 입력값을 받아오면 form 태그는 아예 사라질 것이고, h1 태그가 보여지게 될 것이다. style.css 에는 다음과 같은 클래스를 만들었다. .hidden{ display:none; } /* 좀 비슷한 속성에는 display:hidden;이 있지만, 이는 그냥 보이지 않게 숨겨주는 것 뿐 해당 요소가 차지하는 공간도 그대로이며 따라서 html에서 ..

DAY 5 #2.13 Conditionals prompt(); 사용자에게 창을 띄워 값을 받아오지만, 값을 받아올 때 까지 코드의 실행을 멈추는 오래된 방식으로 css를 바꿀 수도 없다. typeof 라는 키워드는 variable의 type을 볼수 있는 키워드인데, prompt()에서는 숫자를 입력받고 이를 typeof로 출력해도 string이라고 입력된다. prompt의 type은 string이 default이기 때문이다. parseInt(); 숫자로 구성된 string type을 number type으로 변환시켜준다. console.log(typeof "15", typeof parseInt("15")); // string number const age = parseInt(prompt("Please write y..

DAY 4 app.js #3.0 The Document Object console에 document를 입력하면 작성한 html을 가져올 수 있다. 즉 document는 브라우저에 이미 존재한 object다. console.dir(document)를 실행시키면 말 그대로 object인 document를 출력해주고, document의 property는 그 html의 정보들을 javascript의 관점으로 보여준다. document.body를 콘솔에 입력하면 html 중 body 태그부분만 보여준다. body, head, html같은 주요 태그들은 이런 식으로 얻어올 수 있지만 그 이하의 태그들은 querySelector, getElementById등으로 찾아와야 한다.... document.location은 현재 디렉..

DAY 3 #2.7 Functions part One : 계속 반복해서 사용할 수 있는 코드 조각 - 함수의 선언 → function 함수명() {실행코드} - 함수의 실행 → 함수명(); - 인수(argument) : 함수를 실행하는 동안 함수에게 어떤 정보를 보낼 수 있는 방법으로, () 안에 위치한다. #2.8 Functions part Two argument는 다음과 같이 받아올 수 있으며, 동시에 여러 개도 받아올 수 있다. 만약 정의한 함수에서 argument를 하나밖에 정의하지 않았는데, 실행 시킬 때 arguments를 여러 개 넣으면 맨 앞에 있는 argument만 실행된다. function sayHello(myName) { console.log("Hello my name is " + myName)..

DAY 2 #2.1 Basic Data Types Number : Integer(정수), Float(소수) String : 문자열, 처음부터 끝까지 문자로 이루어짐 문자열은 아래와 같이 ''나 ""로 감싸서 표현해야 한다. console.log('hello'); console.log("my name is " + "hayeon"); #2.2 Variables console.log(5 + 2); console.log(5 * 2); console.log(5 - 2); 아래 코드에서 5를 다른 숫자로 변경하고 싶다던지, 2를 다른 숫자로 변경하고 싶을 때 하나하나 바꿔줘야하는 것은 번거로운 일이다. 이 귀찮은 일을 해결해주는 것이 변수다. 변수를 사용하기 위해서는 const를 사용한다. constant(상수)를 의미하며,..

DAY 1 Javascript javascript는 frontend로 쓸 수 있는 유일한 언어로, 브라우저에 내장되어 있어 다른 언어처럼 설치 과정이 없다. 또한 프레임워크를 사용해 backend에도 사용된다. Framework of Javascript : 프로그래밍에서 특정 운영체제를 위한 응용 프로그램 표준 구조를 구현하는 class와 library의 모임으로, javascript 프레임워크에는 대표적으로 react, vue, angular 등이 있다. - three.js는 javascript로 3D를 구현하게 해준다. - react native는 javascript만으로도 모바일 앱을 만들 수 있게 해준다. - electron은 js, html, css로 desktop app을 만들 수 있게 해준다. - ml..

이전 1 ··· 9 10 11 12 13 14 다음

티스토리툴바