JAVA 웹개발 과정 국비 40일차 정리
40일차
※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!
39일차에는 반응형 웹사이트를 만들어보는 실습을 했다.
투표를 했는데 나는 0표를 받았다..
그래도 잘만들었다고 생각했는데!!
이제 자바 스트립트 시작!
1. CSS 마무리..
레이아웃의 역사는 아래와 같다.
Table -> Positioning -> Span / Div + Float -> Display: Flex -> gridBox
Bootstrap의 근간이 바로 display:flex이다.
수업에서는 Bootstrap을 어떻게 사용하는지까지만 배웠으므로 flex와 grid는 알아서 학습해야한다.ㅋㅋ
강사님은 flex와 grid 둘다 비슷하게 쓰이지만 flex가 더 많이쓰이는 것 같다고 하셨다.
2. Javascript
1) Javascript 란
웹 페이지를 동적으로 만들기 위해 지원되는 언어
LiveScript 에서 Javascript로 이름 변경
ECMA(에크마) : 자바스크립트 웹 표준으로 만들어진 기관 이름
ECMA6 Script : 자바스크립트의 또다른 이름
2) 사용 방식
- External Javascript : 파일을 따로 빼서 사용
- Internal Javascript : 내부 head 태그에 넣어서 사용
- Inline Javascript : 태그 자체에 넣어서 사용
3) window 내장 객체
- window : 자바스크립트 최상위 객체
- DOM : 문서(브라우저 윈도우 창의 하얀 부분)에 관련된 기능
- BOM : 브라우저의 기능에 관련된 기능(주소창, 뒤로가기, 앞으로가기 등..)
- JavaScript : DOM도 아니고 BOM도 아닌 나머지 기능
window 단어 의미 그대로 열린 창에 대한 조작을 할 때 사용한다.
window.function이지만 window. 은 생략 가능하다.
① alert(“문자열”) : void
브라우저 위에 경고창을 출력하는 기능.
버튼이 확인 한 개이다.
② confirm(“문자열”) : boolean
브라우저 위에 알림창을 띄워서 사용자의 선택을 요구하는 기능
버튼이 확인(true), 취소(false) 두 개이다.
③ prompt(“문자열”) : 입력값
브라우저 위에 알림창을 띄워서 사용자의 입력을 유도하는 기능
자바의 JOptionPane.showInputDialog()와 동일하다.
alert("Javascript Alert Test");
confirm("자바스크립트가 처음입니까?")
console.log(prompt("메세지를 입력하세요."));
4) 변수
“명시적” 자료형이 존재하지 않는다.
let : 자바의 object와 유사하게 모든 것을 다 받을 수 있다.
let result = confirm("선택하세요.");
console.log(result);
5) DOM 객체를 사용하는 이유
document.write("DOM Test");
위와 같이 쓰면 브라우저에 DOM Test가 출력된다.
HTML에 써도 똑같이 출력되는데 왜 write 함수가 필요할까?
만약 DOM Test라는 글씨를 100번 출력해야한다고 가정해보자.
HTML은 정적 언어이기 때문에 직접 100번 써야만 한다.
반면에 JS는 for문을 돌려버리면 간단하게 해결 된다.
이런 이유로 DOM 객체를 사용하는 것이다.
// 단을 입력받아 구구단 출력하기
let num = prompt("단을 입력해주세요.");
for(let j=1;j<10;j++){
document.write( num + " X " + j + " = " + num*j + "<br>");
}
6) document.getElementById(“id”) : id=”id”인 태그의 주소값
DOM 객체의 getElementById 함수는 파라미터 값을 가진 id의 태그 주소값을 리턴한다.
따라서 이 함수를 이용하여 아래와 같이 태그의 속성값에도 접근할 수 있다.
<input type="text" id="target">
let inputTarget = document.getElementById("target");
inputTarget.value = "Inserted by script";
당연히 value 속성이 없는 div 는 위와 같이 이용할 수 없다.
<div id="target">Text</div>
let div = document.getElementById("target");
console.log(div.value);
// div는 value 값이 없으므로 undefined 가 출력됨.
// undefined 는 없음이라는 값.
console.log(div.innerHTML);
// innerHTML : >와 < 안에 있는 값을 뽑아냄
div.innerHTML = "ABC";
// 값을 바꾸는 것도 당연히 가능
7) function
① function 만들기
함수를 만드는 방법은 아래와 같다.
파라미터에는 자료형이 필요 없고, 리턴 자료값 표시 대신 function을 써줌으로써 함수라는 것을 표기한다.
function plus(num1, num2){
let result = num1 + num2;
return result;
}
function hello(){
console.log("Hello");
}
② function을 하나의 값처럼
자바스크립트에서는 function을 first class function이라고 부르는데, 그 이유는 function을 하나의 값처럼 다룰 수 있는 강력한 기능이 있기 때문이다.
자바에는 없는 개념으로, 함수의 이름(주소값)을 변수에 저장할 수 있다.
메모리는 영역이 4가지로, Stack / Data / Heap은 자바를 배우면서 살펴보았다.
그럼 마지막 남은 한 영역은 무엇일까? 바로 Text 메모리 (code 영역)이다.
우리가 만드는 코드는 CPU가 처리한다. CPU는 RAM에 기억된 것만 처리할 수 있다.
CPU가 코드를 실행하려면 RAM에 어딘가에는 이 코드가 저장되어있어야 한다.
따라서 작성한 코드가 실행되려고 컴파일되어 binary code(기계어)로 바뀐다음 저장되는 위치가 바로 Text 영역이다.
CPU는 Text 영역에 저장된 코드를 읽으면서 실행하게 된다.
메모리에 저장된 코드들이 많이 있다면, 특정 코드를 실행하려면 코드의 주소값이 있어야한다.
이 때, 함수를 만들 때 작성한 함수의 이름이 소스코드의 주소값이다.
아래와 같이 plus 함수가 있다고 한다면, 만약 plus 라고만 쓴다면 소스코드의 주소값만 덩그러니 쓴 상태가 된다. 그러나 plus뒤에 ()(소괄호)를 붙인다면, ‘그 주소값으로 찾아가서 실행해라’라는 명령이 된다.
function plus(num1, num2){
let result = num1 + num2;
return result;
}
이 개념이 어떻게 이용되냐면 내가 원하는 변수에 함수를 저장하는 것이 가능하다.
즉, 함수의 이름을 변수에 저장할 수 있다.
함수를 하나의 값처럼 다룰 수 있게 되는 것이다.
let plus = function(num1, num2){
return num1 + num2;
}
8) 익명함수
익명함수는 아래와 같은 방법들로 사용할 수 있다.
① 변수에 함수를 담는 방법
let plus = function(num1, num2){
return num1 + num2;
}
② 만들자마자 사용하는 방법
아래와 같은 일회용 함수를 IIFE(이피) 함수라고 한다.
Immediately Invoke Funcion Expression : 즉각적으로 실행될 함수 표현
(function(num1, num2){
return num1 + num2;
})(10, 5);
9) Event 처리
사용자가 취하는 액션을 감지해서 그에 따른 interaction을 보여주는 것
- Event : 브라우저 상에서 사용자가 행하는 모든 행동
- Event Source : 이벤트가 발생한 근원 element
- Event Listener : 이벤트의 종류에 따라 감지하는 감시자들
- Event Handler : 이벤트 리스너가 이벤트를 감지했을 때 취할 행동을 가지는 함수
btn.onclick = function(){
alert("버튼 클릭 감지!");
}
위 코드를 아래와 같이 해석할 수 있다.
btn - eventSource. 근원 요소.
onclick - event listener. 요소를 클릭함을 감지(변수)
\= - 요소를 클릭했을 때
function - event handler. 함수를 실행해라
즉, 위의 코드는 버튼을 클릭했을 때 브라우저에 “버튼 클릭 감지!”라는 경고창이 뜨는 이벤트를 가진다.
10) Callback Function
여기서 function 함수를 보면 이때까지 봤던 함수와 다르다.
이전의 함수들은 내가 만들어서 혹은 만들어진 함수를 내가 사용했는데, 이 코드의 함수는 내가 만들어서 내가 사용하지 않는다.
이 함수를 부르는 주체는 브라우저이다.
이런 함수를 callback funcion이라고 한다.
- callback function
- 함수를 만들어놓고 직접 call 하는 것이 아니라 객체나 시스템에 전달하여 트리거(어떤 상황)가 발생할 시 자동으로 불려지는 함수.
11) 이벤트 처리 - 예제
input 두 개에 각각 값을 입력 후 + 버튼을 누르면 더하기 연산이 작용하는 실습을 했다.
See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.
댓글남기기