[국비지원] KH 정보교육원 57~58일차

 이번엔  CSS는 마무리하고 Javascript를 배우기 시작했다! 처음에는 기본 문법이 자바와 차이가 없어서 지루했는데, 진도가 나가며 함수 부분에 들어오니 새로운걸 배운다라는 느낌이 들었다. 계속해서 팀플 과제가 매일 나오고 있는데, 팀에서 뒤쳐지지 않으려면 복습을 철저히 하고 개인 공부를 게을리 해서는 안 되겠다.

 

---

 

Javascript -> jQuery -> *AJAX
                vanillaJS

*HTML5 = 3가지 요소기술
1) HTML
2) CSS
3) ECMAScript

2015년에, 표준이 정립되어 있지 않았던 자바스크립트 언어를 표준화하기 위해 
ECMA라는 기관이 설립되어 첫해에 1차 표준을 발표하였고
이 표준 이름을 ECMA2015라고 부르고 줄여서 ES6라고 합니다.

이때부터 정식언어의 이름이 기존 자바스크립트에서 ECMAScript로 바뀌었습니다
ES6가 처음 나오기 전까지 엉망진창 문법을 ES5라고 부릅니다

그럼 왜 우리가 UI언어인 자바스크립트 (ES5)을 배워야하나요?
HTML+CSS로 만들어진 화면 ==> "정적인(static)" 화면이다!
이런 정적인 화면을 동적인 화면으로 만들기 위해 자바스크립트를 알아야합니다!

 가. 자유로운 문서조작 (태그/컨텐츠/CSS스타일 실시간조작)
 나. 이벤트 처리

ES5기준 JS언어의 문법은 JAVA 언어와 거의 대동소이함
가장 크게 다른 부분은 바로 변수의 선언과 초기화

---

자바스크립트의 역할
요소의 추가 및 삭제
CSS 및 HTML 요소의 스타일 변경
사용자와의 상호작용
폼의 유효성 검증
마우스와 키보드 이벤트에 대한 스크립트 실행
웹 브라우저 제어 및 쿠키 등의 설정과 조회
AJAX 기술을 이용한 웹 서버와의 통신


자바 언어와 변수 사용하는게 다름!
자바 = complie / 자바스크립트 = interpreter

var age 23; ===> 자유도가 높은 언어!
age = "John";
age = [1,2,3];
age = true;
age = 3.14
age = new Object(); 
다 가능!!
변수의 의미와 이름에 맞게 일관되게 쓰면 된다

자바스크립트 작성 방법
대소문자 구분하여 작성
문장은 세미콜론(;)으로 구분
큰따옴표(“ ”)와 작은따옴표(‘ ’)를 구분하여 사용

*CSS 스타일 시트를 적용하는 3가지 방법
1) inline    인라인  => <태그 style="color:red;">
2) internal  내부    => <style> ... </style>
3) external  외부   =>  *.css <link> 태그로 HTML에 연결해서 적용

*JS를 적용하는 방법 => CSS와 동일
1) inline    인라인  => <태그 on으로 시작하는 속성명 = "JS코드;">
                               <img src="" onclick="alert('hello');">
2) internal  내부    => <script> ... </script>
3) external  외부   =>  *.js <script src="xxx.js"> </script> 태그로 HTML에 연결해서 적용

 

*document.write(); ===> console.log(); 로 바꾸자

***tomcat 실행
파워쉘
cd C:\app\scoop\apps\tomcat9\current\webapps\ROOT
catalina run

<script src="http://localhost:8080/sample.js"></script>

데이터 타입

변수명 작성 규칙
문자, 밑줄(_), 달러 기호($)로 시작
대소문자 구별(‘변수 A’와 ‘변수 a’는 서로 다른 변수)
한글은 사용 가능하나 영문자 사용 권장
자바스크립트에서 정한 예약어는 변수명으로 사용 불가능

전역 변수
코드 내 어느 위치에서든 선언하여 전 영역에서 사용할 수 있는 변수

지역 변수
변수가 선언된 해당 블록에서 선언하여 범위 내에서만 유효하게 사용할 수 있는 변수

 

 

---

전역 변수
코드 내 어느 위치에서든 선언하여 전 영역에서 사용할 수 있는 변수

지역 변수
변수가 선언된 해당 블록에서 선언하여 범위 내에서만 유효하게 사용할 수 있는 변수

연산자
피연산자에게 연산 명령을 내리기 위해 사용하는 기호

 

문자열 연산자
‘+’ 기호를 사용하여 문자열을 연결

산술 연산자
사칙 연산을 수행
종류 : 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%), 증감(++), 감소(--)

나머지(%) : 나눗셈 결과 나머지 값을 구함
증가(++) : 변숫값을 증가시킴
감소(--) : 변숫값을 감소시킴

비교 연산자
두 피연산자의 값을 비교하여 참(true) 또는 거짓(false) 값을 반환

일반 논리 연산자
논리곱 : 두 개의 피연산자 값이 모두 참일 때만 참이고, 하나라도 거짓이면 거짓
논리합 : 두 개의 피연산자 값 중 하나라도 참이면 참이고, 모두 거짓이면 거짓
논리부정 : 피연산자 값이 참이면 거짓, 거짓이면 참

조건 연산자
조건식을 판별하여 참이냐 거짓이냐에 따라 다음 문장을 선택적으로 실행
max_value = (a > b) ? a : b;      // a, b 중 큰 값을 저장

대입 연산자
‘=’ 기호를 사용하여 값이나 변수를 할당

제어문
프로그램의 실행 과정을 제어하기 위해 사용하는 구문

if문
조건식이 참(true)이면 블록 내의 문장을 처리하고, 거짓이면 블록을 빠져나감

if~else문
조건식이 참(true)인 경우와 거짓(false)인 경우 처리할 문장이 각각 따로 있을 때 사용하는 제어문

다중 if~else문
여러 조건을 체크해야 할 때 사용

switch~case문
조건문을 체크하여 다음에 처리할 문장의 위치를 파악한 후 해당 문장으로 가서 바로 처리

*

var now = new Date ();
typeof now -> object라고만 나옴!

now.constructor.name -> 이렇게 해야 Date 타입임을 알 수 있다
now.constructor.prototype -> 이렇게 하면 메소드도 알 수 있다.

for문 형식
for (초기식; 조건식; 증감식) {
;;
}

초기식 : 반복 변숫값을 초기화하며, for문이 처음 시작할 때 단 한 번만 실행됨
조건식 : 블록 내 문장을 얼마나 반복할지 결정하며, 조건식이 참인 동안 반복함
증감식 : 초기식에서 초기화한 변수의 값을 증가 또는 감소시킴

for문의 변칙적 사용
① 초기식을 for문 이전에 먼저 선언을 했다면 for문에서는 생략 가능
② 초기식은 여러 개 선언할 수 있음
③ for문의 블록 내에 증감식 문장을 포함한다면 for문 자체에서 증감식을 생략해도 됨
④ for( ; ; )와 같이 초기식, 조건식, 증감식을 모두 작성하지 않으면 블록 내  문장을 무한 반복

*ES6에서 나온 새로운 2개의 변수선언 방식 : 
1) 상수선언 : const 변수명 = 초기값; ===> "const 변수"라고 부름
2) 블록변수선언 : let 변수명 = 초기값; ===> 지역변수 선언, "let"변수라고 부름
 => 더 이상 전역/지역변수의 구분기준이 함수중괄호 블록이 아니라, 모든 종류의 중괄호 블록이 기준

* 자바스크립트의 2가지 enhanced for문

(1) for-in 문

for (let index in arr) {
console.log(`index: ${index}`);
} // enhanced for

(2) for-of 문

for (let element of arr) {
console.log(`element : ${element}`);
} // enhanced for

while문
while (조건식) { ;; }


do- while문
do {
 ;;
} while (조건식);

break문
for문, while문, do~while문과 같은 반복문이나 switch~case문 내에서 
해당 블록을 강제적으로 벗어나 다음 문장을 처리하도록 할 때 사용

continue문
if문의 조건식이 참이면 continue문 이후의 문장을 처리하지 않고 제어를 반복문의 시작 위치로 옮김

label문
제어를 블록 바깥으로 옮김

함수 선언과 호출 형식
function 함수명 (매개변수1, 매개변수2, ... ) { // 함수선언
실행문장;
return 반환값;
}

함수명 (인자1, 인자2, ...);  // 함수호출

함수명 : 함수 이름
인자 : 함수를 호출할 때 전달하는 입력값
매개 변수 : 함수 호출문에서 전달한 인자를 받기 위해 선언된 변수
function : 함수를 선언할 때 사용하는 키워드
return : 함수에서 수행한 결괏값을 반환할 때 사용하는 키워드

* Font Awesome
<script src="https://kit.fontawesome.com/7f1a9bc7ea.js" crossorigin="anonymous"></script>