패스트캠퍼스 올인원 패키지 프로그래밍 첫걸음 시작하기도 60% 가까이 왔다.
끝이 안 보일 것 같던 자바스크립트도 이제 2/3 정도 왔다.
한 주치 진도를 더 나가면 자바스크립트가 마무리 되고 파이썬 자동화 강의로 넘어간다.
이번 진도는 재밌는 것들을 많이 배웠다.
무엇보다 강사님이 직접 코딩하는 모습을 따라하니 어느 정도 자신감이 생겼다.
차근차근 강의를 따라가면 이해가 저절로 되었다.
자바스크립트 처음에는 막막하고 어려웠는데 점점 재밌어졌다.
프로그래밍에 입문하는 사람들께 패스트캠퍼스 올인원패키지 프로그래밍 첫걸음 강의를 강추한다!
쉽고 재밌게 프로그래밍에 입문할 수 있다.
이제 7주차에서 배운 주제들을 정리해보자!
7주차 진도에서는
- 10. [JAVASCRIPT] 자바스크립트 내장객체
- 과제1. 내장 객체로 날짜 계산하기
- 11. [JAVASCRIPT] DOM 객체
- 과제2. 자바스크립트로 특정 태그 접근하기
- 12. [JAVASCRIPT] BOM 객체
- 과제3. 브라우저 컨트롤하기
- 13. [JAVASCRIPT] 함수 선언 및 호출 & 내장함수 호출
- 과제4. a 태그로 함수 호출하기
- 14. [JAVASCRIPT] JAVASCRIPT 이벤트
10. [JAVASCRIPT] 자바스크립트 내장객체
1 2 3 4 | var date = new Date(); console.log(date); // main.js:2 Mon May 06 2019 21:37:13 GMT+0900 (한국 표준시) | cs |
1 2 3 4 | var date = new Date("1970-01-01"); console.log(date.getTime()); // 0 | cs |
1970년 1월 1일 이후의 밀리세컨즈이므로, 0이 출력된다.
하루가 지난 1970년 1월 2일의 결과는 다음과 같다.
1 2 3 4 5 | var date = new Date("1970-01-02"); console.log(date.getTime()); // 86400000 // = 24시간 * 60분 * 60초 * 1000밀리초 | cs |
다음으로 볼 객체는 문자열 객체다.
자바스크립트에선 문자열은 기본적으로 하나의 객체다.
var 변수명 = "문자열";
문자열 변수(객체)를 선언한다.
객체는 프로퍼티와 메소드를 갖는다. 따라서 변수명.프로퍼티; 또는 변수명.메소드(); 와 같은 코드가 가능하다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | var str1 = "Fastcampus"; var str2 = "Chipmunk in Forest"; console.log(str1.length); // 10 console.log(str2.length); // 18 console.log(str1.charAt(0)); // F console.log(str1.charAt(1)); // a console.log(str2.split(" ")); // ["Chipmunk", "in", "Forest"] console.log(str2.indexOf("F")); // 12 console.log(str2.indexOf("z")); // -1 | cs |
문자열 객체 str1, str2 으로 간단하게 문자열 객체가 가지고 있는 프로퍼티와 메소드들을 실습했다.
length 프로퍼티는 문자열이 갖고 있는 길이를 알려준다.
charAt(index) 메소드는 해당 문자열의 0부터 시작하는 index 위치에 있는 문자를 가져와준다.
split(delimiter) 메소드는 해당 문자열에서 delimiter 에 해당하는 문자를 기준으로 문자열을 배열로 나누어준다.
위 예제에서는 띄어쓰기를 기준으로 문자열을 나눠 배열에 저장했다.
띄어쓰기 뿐 아니라 콤마(,) 등등으로도 문자열을 나눌 수 있다.
indexOf() 메소드는 문자열에서 찾을 문자열의 index 위치를 찾아 알려준다.
만약에 문자열에 해당 문자열이 없다면 -1 이 출력된다.
[ QUIZ ]
1. '날짜 객체'는 날짜 정보를 제공하는 내장 객체이다.
2. 날짜 객체는 '밀리세컨즈' 단위를 기준으로 시간을 표현한다.
3. '문자열'은 자바스크립트에서 하나의 객체이다.
과제1. 내장 객체로 날짜 계산하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var now = new Date(); //오늘 날짜 var count = new Date("2018-12-31"); //D-day 날짜 var gap = now.getTime() - count.getTime(); //오늘 날짜와 D-day 날짜의 차를 밀리초로 계산 //두 날짜 사이의 차를 하루로 나눈 값을 소숫점 이하를 버림 연산 gap = Math.floor(gap / (24 * 60 * 60 * 1000)); var result = ""; //결과를 반환할 변수 //D-day 계산 if (gap > 0) { result = "D+" + gap; } else if (gap == 0) { result = "D-DAY"; } else { result = "D-" + gap; } //계산 결과 출력 document.write("D-day를 기준으로 " + result + "입니다."); | cs |
결과는 다음과 같다.
D-day를 기준으로 D+126입니다.
11. [JAVASCRIPT] DOM 객체
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- getElementsName()
- querySelectorAll()
일단 HTML 문서를 만들어보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <meta charset="UTF-8"> <title>JavaScript 기초</title> <script type="text/javascript" src="js/main.js"></script> </head> <body> <div class="container"> <h1 id="heading">제목 태그입니다.</h1> <p class="paragraph">문단 태그입니다.</p> <p class="paragraph">문단 태그입니다.</p> <p class="paragraph">문단 태그입니다.</p> </div> </body> </html> | cs |
main.js 파일 안에는 다음의 코드가 들어가 있다.
1 | document.getElementById("heading").innerHTML = "h1 태그입니다."; | cs |
위 코드는 heading 이라는 아이디를 갖고 있는 엘리먼트를 가져온다.
그 엘리먼트의 내용을 h1 태그입니다. 로 바꾸는 예제다.
그런데 실행을 해보면 바뀌지가 않는다 ?!
그 이유는 무엇일까?
바로 자바스크립트 코드가 엘리먼트들이 렌더링 되기 전에 실행이 되기 때문이다.
body 태그 위로 스크립트 코드를 옮기면 해결이 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <meta charset="UTF-8"> <title>JavaScript 기초</title> <!-- <script type="text/javascript" src="js/main.js"></script> --> </head> <body> <div class="container"> <h1 id="heading">제목 태그입니다.</h1> <p class="paragraph">문단 태그입니다.</p> <p class="paragraph">문단 태그입니다.</p> <p class="paragraph">문단 태그입니다.</p> </div> <script type="text/javascript" src="js/main.js"></script> </body> </html> | cs |
DOM 객체를 이용해 다음과 같은 작업들을 할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 | document.getElementById("heading").innerHTML = "h1 태그입니다."; document.getElementsByClassName("paragraph")[0].innerHTML = "p 태그입니다."; var tagName = document.getElementsByTagName("p"); var len = tagName.length; for (var i = 0; i < len; ++i) { tagName[i].innerHTML = "p 태그입니다."; } document.querySelectorAll("div.container > h1#heading")[0].innerHTML = "h1 h1 태그입니다."; | cs |
Elements 라고 붙인 메소드는 배열 형태로 불러와진다.
배열로 불러오기 때문에 인덱스로 접근을 해야 한다.
[ QUIZ ]
1. 'DOM 객체'는 웹 페이지를 객체로 인식하는 방법이다.
2. DOM 객체는 '메소드'와 '프로퍼티'로 구성된다.
3. 'innerHTML' 프로퍼티로 HTML 엘리먼트를 동적으로 조작할 수 있다.
과제2. 자바스크립트로 특정 태그 접근하기
자바스크립트 DOM 객체로 엘리먼트를 제어하는 실습이다.
아래 웹 문서가 주어진다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Javascript DOM 객체</title> </head> <body> <h1 id="head">제목 태그입니다.</h1> <p>문단 태그입니다.</p> <script type="text/javascript" src="js/main.js"></script> </body> </html> | cs |
1 2 3 | document.getElementById("여기를 채워주세요.").innerHTML = "h1 태그입니다."; //선택자 문법으로 특정 엘리먼트에 접근할 수 있습니다. document.querySelector("여기를 채워주세요.").innerHTML = "p 태그입니다."; | cs |
위 부분을 채우는게 과제다!
수업이 쉽게 이해하도록 되어 있어 손쉽게 채울 수 있다.
1 2 3 | document.getElementById("head").innerHTML = "h1 태그입니다."; //선택자 문법으로 특정 엘리먼트에 접근할 수 있습니다. document.querySelector("p").innerHTML = "p 태그입니다."; | cs |
12. [JAVASCRIPT] BOM 객체
DOM 객체도 배웠는데 BOM 객체는 또 무엇인가?!
Document 를 조작했다면 이제 Browser 를 객체로 제어할 수 있다!
웹브라우저 자체를 객체로 인식한다.
Window 객체는 최상위 객체라 생략이 가능하다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var test = document.getElementById("test"); // window.open("https://www.google.com"); // var trueOrFalse= window.confirm("true or false"); // test.innerHTML = trueOrFalse; // test.innerHTML = "width: " + window.innerWidth + " height: " + window.outerHeight; // window.alert("알림입니다."); var x = 0; window.setInterval("interval()", 1000); function interval() { test.innerHTML = ++x; } | cs |
open 메소드는 팝업 창을 띄워준다.
close 메소드는 현재 창을 종료한다.
confirm 메소드는 알림 창이 나와 확인, 취소 창이 나온다.
확인을 누르면 true 값이 저장되고 취소를 누르면 false 값이 저장된다.
innerWidth, outerHeight 프로퍼티로 현재 창의 너비와 높이를 가져온다.
alert 메소드로 알림 창을 띄울 수 있다.
setInterval 메소드로 아래 interval() 함수를 1초 (1000 밀리세컨즈) 간격으로 실행한다.
interval 함수는 전역변수 x를 증가시키면서 p 엘리먼트에 입력한다.
실행을 시켜보면 1초 간격으로 1씩 증가하는 것을 확인할 수 있다.
[ QUIZ ]
1. 'BOM' 은 웹 브라우저를 객체로 인식하는 방법이다.
2. 'window' 객체는 최상위 객체이며 코드 작성시 생략 가능하다.
3. 'open' 메소드로 브라우저를 실행시킬 수 있다.
과제3. 브라우저 컨트롤하기
1 2 | var popup = window.open("", "popup", "width = 400, height = 500"); popup.document.write("<h1>패스트캠퍼스!</h1>"); | cs |
위 코드의 결과를 확인하는 과제다.
window.open 메소드로 새 팝업 창을 띄운다. 두 번째에 popup 을 입력하면 팝업 창으로 띄워진다.
그리고 세 번째 입력에 width 와 height 를 입력하면 그 너비와 높이만큼 창이 나타나는 것을 확인했다.
그리고 그 팝업 객체를 pop 변수에 저장한다.
팝업 객체에도 DOM 모델이 있어 document.write 메소드를 실행하는 것을 확인했다.
13. [JAVASCRIPT] 함수 선언 및 호출 & 내장함수 호출
자바스크립트 함수는 여태까지 알게 모르게 사용해왔다.
함수는 코드의 논리적인 흐름을 하나로 묶는 역할이다.
function 함수명(매개변수) {
... 실행 코드
return 반환값;
}
형태로 함수를 정의할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | var test = document.getElementById("test"); // function multiply(x, y) { // return x * y; // } // test.innerHTML = multiply(2, 2); // 4 // var x = 0; // function interval() { // test.innerHTML = ++x; // } // window.setInterval("interval()", 1000); // var x = 10; // function myFunc() { // // var x = 10; // test.innerHTML = x; // } // myFunc(); // test.innerHTML = x; var multiply = function(x, y) { return x * y; }; test.innerHTML = multiply(2, 4); | cs |
위 예제로 함수에 대해 알 수 있었다.
multiply 라는 함수를 정의하여 사용을 해봤다.
그리고 함수 안에 변수의 범위가 존재하여 함수 밖에서 함수 안의 변수를 사용하지 못하는 것을 확인했다.
이를 해결하기 위해 함수 밖에 전역 변수를 이용해야 했다.
마지막으로 익명 함수라는 것을 실습했다.
익명 함수는 일반 함수와 다른 점이 함수 이름이 없다는 점이었다.
익명으로 함수를 선언하고 그것을 변수에 저장하는 것을 확인했다.
그리고 그 변수를 이용해서 익명 함수를 호출할 수 있었다.
[ QUIZ ]
1. '함수'는 코드의 논리적인 흐름을 하나로 묶는 역할을 한다.
2. 'function' 키워드로 함수를 선언한다.
3. 'return'은 반환값을 나타내며 반환값이 없을 수도 있다.
4. 변수에 함수를 할당하여 사용하는 것을 '익명 함수' 라고 한다.
과제4. a 태그로 함수 호출하기
a 태그로 javascript 함수를 호출하는 과제다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Javascript 함수</title> <script type="text/javascript" src="js/main.js"></script> </head> <body> <p id="test"></p> <a href="javascript:getDate();">오늘의 날짜는?</a> </body> </html> | cs |
1 2 3 4 5 6 7 8 | function getDate(){ var result = ""; var year = new Date().getFullYear(); var month = new Date().getMonth() + 1; //getMonth 메서드는 (0부터 1월을 나타냅니다.) var day = new Date().getDate(); result = year + "-" + month + "-" + day; document.getElementById("test").innerHTML = result; } | cs |
아래는 결과 사진이다.
a 태그를 누르면 오늘 날짜가 나오는 자바스크립트 함수가 호출되는 것을 확인할 수 있다.
14. [JAVASCRIPT] JAVASCRIPT 이벤트
맨 처음에 JAVASCRIPT 가 무엇인지 배웠다.
자바스크립트는 사용자 동작(이벤트)에 반응(핸들링)하기 위한 언어라고 배웠다.
여기서 이벤트는 웹 페이지에서 발생하는 모든 사용자의 액션을 말한다.
이벤트 핸들링하는 이벤트 핸들러는 이벤트 이름 앞에 "on"이 붙는다.
이벤트 핸들러 등록 방법은 다음과 같다.
1. 속성
속성으로 등록한다.
2. HTML DOM
DOM 객체 탐색으로 등록한다.
3. addEventListener() 메소드
메소드를 통해 이벤트를 등록한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Javascript 함수</title> </head> <body> <p id="test"></p> <!-- 1. 속성으로 등록 --> <button onclick="changeText()">텍스트 변환</button> <button id="btn">텍스트 변환 2</button> <script type="text/javascript" src="js/main.js"></script> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var idx = 0; function changeText() { var textArr = ["html", "css", "js", "python"]; document.getElementById("test").innerHTML = textArr[idx++]; if (idx == textArr.length) { idx = 0; } } // 2. HTML DOM 으로 등록 document.getElementById("btn").onclick = function() { changeText(); } | cs |
문자열 배열에 있는 값들을 차례대로 보여주는 코드다. 만약 문자열 배열에 끝이라면 인덱스 변수를 다시 0으로 초기화 해준다.
첫 번째 속성으로 등록하는 방법과
두 번째 HTML DOM 으로 등록하는 방법을 알아봤다.
세 번째 실습은 다음 강의에 이어진다!
[ QUIZ ]
1. '이벤트'는 웹 페이지에서 일어나는 모든 사용자 액션이다.
2. '이벤트'를 등록하는 방법은 '세' 가지 방법이 있다.
3. 'onclick 이벤트'는 마우스가 지정한 요소를 클릭할 때 발생한다.
이번 진도는 직접 코드를 짜고 실습을 하는 강의가 많아 재밌었다.
다음 주 학습 진도로 얼른 자바스크립트를 마무리 하고 싶다!
'자유 > 대외 활동' 카테고리의 다른 글
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #11.9주차 학습후기, 파이썬 프로그래밍 시작 (0) | 2019.05.12 |
|---|---|
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #10.8주차 학습후기, 자바스크립트 완전 정복! (0) | 2019.05.09 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #8.6주차 학습후기, 학습진도 50% 달성! (0) | 2019.05.05 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #7.5주차 학습후기 (0) | 2019.05.04 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #6.4주차 학습후기 (0) | 2019.04.26 |
댓글