비전공자의 IoT 국비 교육 수강일지 Day_28

자바스크립트

객체 기반의 스크립트 프로그래밍 언어

기존에 이미 존재하는 응용 소프트웨어를 제어하기 위해 나온 언어
인터프리터 방식에서 사용하기 위해 나온 것으로 응용 프로그램을 어떻게 실행할지 정합

 

자바스크립트 특징

- 모든 웹브라우저에서 동일하게 동작한다

- 웹브라우저에서 실행 결과를 즉시 확인

- 다양한 용도의 프로그램 개발

- 다양한 자바스크립트 공개 API

- 다양한 라이브러리와 프레임워크

 

 

API VS 라이브러리 VS 프레임워크

API (Application Programming Interface)	라이브러리 (Library)	프레임워크 (Framework)
응용프로그램을 만드는데 필요한 연결장치, 매개체	응용 프로그램 개발을 위해 필요한 기능을 모아 놓은 소프트웨어 그 기능에 대한 도구 또는 함수들의 집합	응용프로그램이나 소프트웨어 구현을 수월하게 하기 위해 제공된 소프트웨어 환경 프레임워크에 의존하여 기능을 추가하여 개발해야 함

 

 

예제

처음상태 및 되돌리기 짠! 눌렀을 때

디자인바꾸기 짠! 누른후

document.querySelector("#btn1").addEventListener("click", function(){
            document.querySelector("body").style.backgroundColor ="black";
            document.querySelector("body").style.color = "white";
});
document.querySelector("#btn2").addEventListener("click", function(){
    document.querySelector("body").style.backgroundColor = "white";
    document.querySelector("body").style.color = "black";
});

 

 

자바스크립트 입력과 출력

입력
document.write( ) => HTML 문서 내에 출력

console.log( ) => console창에 출력
- console. log, info, warn, error

alert( ) => 알림 팝업창으로 출력


출력
prompt("출력내용", "입력내용"(선택사항)) => 입력창을 통한 입력문
*리턴타입 : String

confirm("출력문작성") => 확인 및 취소를 통한 입력문
*리턴타입 : boolean

 

 

변수

: 사전적 의미로는 "변화를 줄 수 있는" 또는 "변할 수 있는 수" 프로그래밍에서는 데이터를 담는 공간

var           a     =   3;
자료형 변수명 대입 값

저장하는 데이터에 따라서 자료형 결정

 

Java	Javascript
int age = 20; char alpha = 'a'; double avg = 78.4;	var age = 20; var alpha = 'a'; var avg = 35.5;
정적 타입 /강력한 타입 언어 자료형을 컴파일 시 결정 컴파일시 자료형에 맞지 않은 값이 들어있으면 컴파일 에러 발생	동적타입 / 느슨한 타입 언어 자료형을 런타임 시 결정 실행 도중 변수에 예상치 못한 타입의 값이 들어오면 Type Error 발생

 

자바스크립트 변수키워드 비교

var	let	const
변수 재선언 가능 변수 재할당 가능	변수 재선언 불가능 변수 재할당 가능	변수 재선언 불가능 변수 재할당 불가능

 

자바스크립트 자료형

number	정수, 실수 등 산술 연산이 가능한 자료형
string	문자열로 이루어진 자료형
boolean	참/거짓으로 표현되는 논리 형태의 자료형
undefined	값이 할당된 적이 없거나 존재하지 않는 속성일 때의 유형
null	아무런 값을 나타내지 않을 때의 자료형

 

undefined vs null

undefined	null
변수를 선언하고 값을 할당하지 않은 상태 타입을 확인하면	의도적으로 비어있는 상태 타입을 확인하면 object

 

연산자

산술연산자 : + - * / % ( / => 실제 나누기 연산 결과 몫X)
증감연산자 : ++, --
대입연산자 : = += -= *= /= %=
연결연산자 : +(문자열 결합)
비교연산자 : == != === !== > >= < <=
논리연산자 : && || !
조건연산자 : 조건? 실행문1 : 실행문2

 

==	===
동등연산자 자동으로 자료형 변환 후 비교 ex) 10 == "10" => true -숫자와 문자열 비교 시 문자열을 숫자로 변환 -피연산자가 boolean 일 경우 true는 1로 false는 0으로 변환 - 객체와 숫자/문자열 비교시 객체를 기본 데이터 타입으로 변환 - Null과 undefined 는 true 반환	일치연산자 타입 변환을 하지 않고 정확히 값과 자료형을 비교 ex) 10 === '10' => false

 

예제

let num = 521;
console.log(num-(num%100));

 

형변환

parseInt( ) : 문자열을 숫자(정수)로 변경
parseFloat( ) : 문자열을 숫자(실수)로 변경
Number( ) : 다른 자료형을 숫자형(정수&실수)으로 변경
toString( ) : 숫자를 문자열로 변경

 

조건문

: 주어진 조건을 비교, 판단하여 결과를 얻는 구문(단순 if문, if ~ else문, 다중 if문, switch문)

예제

let Java = Number(prompt("Java점수를 입력하세요."));
let Python = Number(prompt("Python점수를 입력하세요."));
let R = Number(prompt("R점수를 입력하세요."));

let avg = ((Java + Python + R)/3).toFixed(2);
let score;

if(avg >= 90){
    score = "A";
}else if(avg >= 80){
    score = "B";
}else if(avg >= 70){
    score = "C"
}else{
    score = "F"
}

console.log("당신의 평균은 " + avg + "이고 " + score + "입니다.");

 

---

Servlet

Servlet : server + Applet

 

DynamicWeb Project 구조

src/main/java => servlet (백엔드)
src => jsp, html (프론트엔드)

 

request.getRemoteAddr()

=> 사용자의 IP를 가져올 수 있는 기능

 

response.setContentType("text/html;charset=euc-kr")

=> 응답하는 파일을 생성하고 인코딩방식 지정

 

PrintWriter out = response.getWriter();
=> 응답하는 파일과 현재 작업하고 있는 Servlet파일을 이어주는 통로객체생성

 

request.getParameter("num1");

=> 사용자가 입력한 정보를 가져오는 기능( form태그로부터 name속성으로 가져온다)