전체 글

어떤 컴퓨터 언어를 배우더라도 가장먼저 집중해야 할 것은 CRUD가 되겠다. 이번에는 document 객체를 통해서 html 엘리먼트를 create, read, update, delete 방법을 학습한다. 특히, DOM 에서는 html 에 적용(append) 하는 메서드가 따로 있으니 주의해야 겠다. CREATE 생성 document.createElement('div')를 사용하여 div를 생성한다 document.createElement('div') ​​ //자바스크립트에서 어떤 작업의 결과를 담으려면? //변수를 선언하고 어떤 작업의 결과를 변수에 할당 //여기서는 div element를 tweetDiv에 할당 const tweetDiv = document.createElement('div') 아직 ..

작고 소중한 나의 첫 푸로젝트는 바로 디지털 시계 만들기였다. html, css, javascript 를 모두 사용했고, 처음부터 스케치(?)를 하고 의사코드를 짜고, 코드를 수정했다. 스케치 만들고자 하는 디지털 시계의 대략적인 모습을 그렸다. 북흐 ㅎ 의사코드 의사코드는 어떻게 만들었냐면 기존에 있는 디지털 시계만들기 소스코드를 읽어보고, 자연어로 바꾸어서 적어본 것이다 그냥 존재하는 코드를 따라치면 클론코딩밖에 안될것 같아서, 코드 이해만 하고 웬만하면 구글링해서 찾아내려고 했다. html 상단에 명언을 입력 css 명언 중앙정렬 명언 글씨체 바꾸기 날짜와 시간 글씨체를 투명하게 영상을 백그라운드에 재생(실행해봤는데 반복재생 안되면 방법을 서치) javascript 요소선택 today와 time 선..

현재시간을 브라우저에 나타내는 코드입니다. h1에 now 가 가진 시간정보를 표시합니다 const h1 = document.querySelector('h1') const now = new Date(); console.log(now) const hour = now.getHours() const minu = now.getMinutes() const seco = now.getSeconds() const nowTime = `${hour}:${minu}:${seco}` h1.textContent = nowTime; 실행되는 화면입니다. 새로고침을 누르면 초가 계속 달라집니다.

생성자 함수를 이용하면 자바스크립트에서 제공하지 않는 유형의 데이터를 창조해낼 수 있다. 생성자 함수는 '객체를 이렇게 만들겠습니다'에 대한 정의일뿐이며, 실제 객체가 생성되기 위해서는 new 연산을 통해 객체를 반환해야 합니다. 객체 생성은 new 연산자를 이용합니다. // Dog 객체 설계(생성자 함수) function Dog(){ this.name = "뽀미" this.breed ="스피츠" } // Dog 객체 생성(new 연산자) //Dog 라는 객체를 생성하고, myDog 라는 이름을 붙이겠다 const myDog = new Dog(); console.log(myDog.name) console.log(myDog.breed) 생성자 함수는 '객체를 이렇게 만들겠습니다'에 대한 정의, 즉'설계도'..

원시 자료형을 할당한 변수를 다른 변수에 할당하면 값 자체의 복사가 일어 납니다. 값 자체가 복사된다는 것은 둘 중 하나의 값을 변경해도 다른 하나에는 영향을 미치지 않는다는 것을 의미합니다. 반면, 참조 자료형은 임의의 저장공간에 값을 저장하고 그 저장공간을 참조하는 주소를 메모리에 저장하기 때문에 다른 변수에 할당할 경우 값 자체가 아닌 메모리에 저장되어 있는 주소가 복사됩니다. copiedArr.push(4); console.log(arr); // [0, 1, 2, 3, 4] console.log(copiedArr); // [0, 1, 2, 3, 4] console.log(arr === copiedArr) // true 다시 말해, 참조 자료형이 저장된 변수를 다른 변수에 할당할 경우, 두 변수는 ..

자료형은 크게 두 가지로 구분할 수 있는데, 바로 원시 자료형(primitive type)과 참조 자료형(reference type)입니다. // 원시 자료형(primitive type): number, string, boolean, undefined, null 42, 'string', true, undefined, null // 참조 자료형(reference type) [0, 1, 2] // 배열 {name: 'kimcoding', age: 45} // 객체 function sum (x, y) { return x + y } // 함수 원시 자료형의 특징 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달된다. 원시..