210909 목
1. 클라이언트 주요 언어
1) HTML : 하이퍼텍스트를 구현하기 위한 뼈대가 되는 핵심적인 기술 마크업 언어
2) CSS : HTML은 뼈대라면 CSS는 꾸미기 위한 옷의 기능
3) 자바스트립트(JavaScript) : 기능, 로컬의 브라우저에서 실행되는 인터프리터 방식의 프로그래밍 언어
4) jQuery : 존 레식(John Resig) 창안, JavaScript 기반 라이브러리 중 하나 자바스크립트의 코드가 길어지면 사용하기 복잡한 단점 개선
2. 서버 주요 언어
1) JSP : 운영체제의 구애를 받지 않으며 실행 톰캣 컨테이너 위에서 자바 기반의 언어 사용
2) ASP : 윈도우 기반의 IIS 서버에서만 작동하고 MS-SQL DBMS와 연동 됨
3) PHP : 리눅스 기반에 아파치 서버에서 동작, 기존 제로보드나 그누보드와 같은 사이트 빌더에서 기본적으로 사용되는 언어
4) node.js : 노드제이에스 또는 노드라고 하는 자바스트립트 라이브러리로 소켓을 이용하여 쉽게 실시간 서버를 구축 가능하도록 함
3. Java Script
자바스트립트(JavaScript)는 웹 브라우저에서 많이 사용하는 인터프리트 방식의 객체지향 프로그래밍 언어로 ECMA(European Computer Manufacturers Association) 스크립트 표준을 따르는 대표적인 웹 기술
1) 자바 스크립트란
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_JavaScript란</title>
</head>
<body>
<h1>JavaScript란?</h1>
<p>
HTML이 웹 문서의 뼈대 역할, CSS가 그 뼈대를 꾸며주는 역할이라면
<b>자바스크립트는 생동감을 불어넣기 위해</b> 만들어진 프로그래밍 언어 <br>
자바스크립트로 작성한 프로그램을 스크립트(script)라고 부르고,
스크립트는 웹 페이지의 HTML 안에 작성 가능하며 웹 페이지 로드시
스크립트가 자동으로 실행됨<br>
브라우저에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있음
</p>
<h3>JavaScript의 실행 방식</h3>
<p>
엔진이 스크립트를 읽고(파싱) 읽어들인 스크립트를 기계어로 전환(컴파일)하면
기계어로 전환된 코드가 실행된다<br>
전체를 해석해 놓은 컴파일 언어와는 차이가 있다.(Ex.Java)
</p>
<h3>JavaScript로 수행할 수 있는 기능</h3>
<ul>
<li>페이지에 새로운 HTML 추가</li>
<li>기존 HTML과 스타일 수정</li>
<li>마우스 클릭 및 이동, 키보드 키 눌림 등 사용자 행동에 반응</li>
<li>네트워크를 통해 원격 서버에 요청(Ajax 기술 등)</li>
<li>쿠키(Cookie) 사용</li>
<li>클라이언트 측에 데이터 저장(Local Storage)</li>
</ul>
<h3>JavaScript를 사용하는 이유</h3>
<p>
HTML/CSS와 완전히 통합될 수 있으며 모든 주요 브라우저에서 지원하고,
기본 언어로 사용되기 때문<br>
오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어이며
지금은 서버단 등 다양한 환경에서 사용됨
</p>
<h3>개발자 도구</h3>
<p>
브라우저별로 개발자 도구(Developer Tools)를 제공
크롬에서는 F12 키를 눌러 실행함<br>
브라우저 창에서 원하는 코드를 확인하고 싶으면 원하는 위치에 우클릭 후
해당 메뉴를 선택함(크롬 : 검사)<br>
자바스크립트의 소스 코드 중 console.log()는 브라우저에서 출력하는 것이 아니라
개발자 도구의 console 패널에서 출력하고 스크립트 구문을 디버깅 할 때 자주 사용함
</p>
<h3>자바스크립트 작성 방법</h3>
<h3>1. internal 방식</h3>
<p>
script 태그 영역에 작성해서 실행되게 하는 방법<br>
head 태그, body 태그에 작성 가능<br>
type="text/javascript"는 HTML4에서는 필수였으나 지금은 필수 아님<br>
language 속성은 자바스크립트가 기본 언어이므로 작성할 필요 없어 사라짐
</p>
<!-- HTML 부분 주석은 이렇다 -->
<script>
// JavaScript 한 줄 주석
/*
JavaScript 여러 줄 주석
줄바꿈이 있다면 세미콜론 자동 삽입(눈에 보이지 않지만 있다는 뜻)
*/
console.log('Hello!')
console.log('JavaScript')
// 싱글 쿼테이션('') & 더블 쿼테이션("") 혼용
//변수 선언 방법
let a = 40;
console.log(a);
</script>
<h3>2. external 방식</h3>
<p>
별도의 js 파일로 작성해서 가져다 사용하는 방법<br>
스크립트가 길어지면 별도의 js파일로 작성하는 것이 좋은데
이는 브라우저의 캐싱 기능으로 다시 다운 받을 필요가 없어지기 때문
</p>
<script src="resources/js/sample.js">
//scr 속성이 있을 경우는 태그 내부의 코드가 동작하지 않음(외부 태그만 동작한다)
alert('test?');
</script>
<h3>3. inline 방식</h3>
<p>
태그에 직접 소스코드를 작성해서 실행되게 하는 방법
</p>
<button onclick="alert('버튼 클릭 확인');">경고창 출력</button>
<button onclick="console.log('버튼 클릭 확인');">console 출력</button>
</body>
</html>
2) 변수와 자료형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_변수와 자료형</title>
</head>
<body>
<h1>1. 변수와 자료형</h1>
<h3>1) 변수 선언과 대입</h3>
<script>
//변수 선언
let str;
//대입
str = '변수';
//alert로 출력
//alert(str);(계속 뜨면 귀찮으니까 주석)
//선언과 대입 동시에
let name = '이름';
console.log(name);
// 답 : 이름
</script>
<h3>2) 변수 명명 규칙</h3>
<ul>
<li>문자, 숫자, '$', '_' 사용 가능</li>
<li>첫 글자는 숫자가 될 수 없음</li>
<li>예약어 사용 불가</li>
<li>카멜 표기법 사용</li>
</ul>
<script>
//유효한 변수명
let userName;
let number1;
let number_2;
let number$3;
//유효하지 않은 변수명
//let 1number;
//let number#4;
//유효하지만 권장하지 않음
let 변수 = '변수입니다';
console.log(변수);
// 변수입니다
</script>
<h3>3) 상수 선언과 대입</h3>
<script>
// const(상수)는 재할당 할 수 없다
const PI = 3.141592;
//PI = 3.14; //재할당하려고 하면 오류 발생함
//const NUM;
//NUM = 123; 이 경우 에러 발생
// => 상수는 선언 시 할당해야 함
</script>
<p>
ES5까지는 모든 변수를 var라는 예약어로 선언했으나
ES6 문법에서는 const, let을 사용<br>
ES5까지는 전역 범위와 함수 범위라는 두 가지 유형의 범위만 있었지만
ES6에서는 블록 범위 변수(및 상수)를 제공함
</p>
<script>
// 선언 범위 테스트
var x = 1;
let y = 2;
console.log('블럭 밖 x = ' + x);
// 답 : 블럭 밖 x = 1
console.log('블럭 밖 y = ' + y);
// 답 : 블럭 밖 y = 2
{
var x = 3;
let y = 4;
console.log('블럭 밖 x = ' + x);
// 답 : 블럭 밖 x = 3
console.log('블럭 밖 y = ' + y);
// 답 : 블럭 밖 y = 4
}
console.log('블럭 밖 x = ' + x);
// 답 : 블럭 밖 x = 3
console.log('블럭 밖 y = ' + y);
// 답 : 블럭 밖 y = 2
// var는 블럭 범위를 가질 수 없고 let은 블록 범위를 가질 수 있다
// var는 블럭 내부의 변수를 다시 선언하면 블럭 외부의 변수도 다시 선언되는 문제가 있으나
// let은 블럭 내부의 변수를 다시 선언해도 블럭 외부의 변수는 다시 선언되지 않는다
// ***즉, var는 블럭 내용을 그대로 가져오고, let은 블럭밖, 안을 구분한다.
// loop 블럭 안의 변수로 사용했을 때
var i = 5;
for (var i = 0; i < 10; i++) {
console.log("i = " + i);
// 답 : 0 ~ 9 까지 출력됨
}
console.log("i = " + i);
// 답 : i = 10
// {}의 영향을 받음
let j = 5;
for (let j = 0; j < 10; j++) {
console.log("j = " + j);
// 답 : 0 ~ 9까지 출력됨
}
console.log("j = " + j);
// 답 : j = 5
// {}의 영향을 받지 않음
</script>
<h3>2. 자바스크립트의 자료형</h3>
<p>
자바스크립트는 느슨한 타입(loosely typed) 언어,
혹은 동적(dynamic) 언어라고 함<br>
변수의 타입을 미리 선언할 필요가 없으며
타입은 프로그램이 처리되는 과정에서 자동으로 파악됨<br>
같은 변수에 여러 타입의 값을 넣을 수 있다는 의미
</p>
<script>
// 1) 숫자 : 정수 및 실수
let age = 20;
let height = 171.5;
// 2) Infinity : 무한대
console.log(1 / 0);
// 답 : Infinity
console.log(Infinity);
// 답 : Infinity
// 3) NaN : Not a Number
console.log('문자열' / 2);
// 답 : NaN
console.log(NaN);
// 답 : NaN
// 4) 문자열 : 따옴표로 묶음(쌍따옴표, 홑따옴표 모두 가능)
// 문자 자료형은 따로 없음
let str2 = 'single';
let str3 = "double";
console.log(str2);
// 답: single
console.log(str3);
// 답 : double
// 5) 논리값
let bool = true;
let bool2 = 1 == 2;
console.log(bool);
// 답 : true 값 나옴
console.log(bool2);
// 답 : false 값 나옴
// 6) null
// 존재하지 않는 값, 비어 있는 값, 알 수 없는 값
let nullValue = null;
console.log(nullValue);
// 답 : null
// 7) undefined
// 값이 할당되지 않은 상태
let undef;
console.log(undef);
// 답 : undefined
// 명시적 undefined
let undef2 = undefined;
console.log(undef2);
// 답 : undefined
// 8) 객체
// 나머지는 원시(primitive) 자료형
let user = { name: '홍길동', age: 20, id: 'user01' };
console.log(user); // 전체의 값에 접근하기
// 답 : {name: '홍길동', age: 20, id: 'user01'}
console.log(user.name); //각각의 값에 접근하기
// 답:홍길동
console.log(user.age);
// 답 : 20
console.log(user.id);
// 답 : user01
</script>
</body>
</html>
3) 데이터 입출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_데이터 입출력</title>
</head>
<body>
<h1>1. 간단한 데이터 입출력</h1>
<h3>1) console.log()로 개발자 도구 콘솔 화면에 출력하기</h3>
<p>
개발자 도구 콘솔 화면에 출력을 하고자 할 때 사용하며,
디버깅 할 때 주로 사용된다
</p>
<script>
// console.log('콘솔 화면에 출력하기');
// 답 : 콘솔 화면에 출력하기
// (콘솔 화면에 출력됨)
</script>
<h3>2) alert()로 메세지 출력하기</h3>
<p>
사용자가 확인 버튼을 누를 때까지 메세지를 보여주기 위해 사용한다
</p>
<script>
// alert('alert에 메세지 출력하기');
// 답 : alert에 메세지 출력하기
// alert에 메세지 출력됨
</script>
<h3>3) confirm을 이용한 데이터 입력</h3>
<p>
어떤 질문에 대해 "예/아니오"의 결과를 얻을 때 사용한다
</p>
<p>
확인 버튼과 취소 버튼이 나타나며, 확인 버튼을 클릭 시 true,
취소 버튼을 클릭 시 또는 ESC 키를 누르면 false를 리턴한다.
</p>
<script>
// let result = confirm('배고프면 확인, 배고프지 않으면 취소를 누르세요');
// console.log(result);
// 확인과 취소창이 나타난다.
</script>
<h3>4) prompt()를 이용한 데이터 입력</h3>
<p>
텍스트 필드와 확인/취소 버튼이 있는 대화상자 출력하고
입력한 메세지 내용을 리턴 값으로 돌려 받는다
</p>
<p>
취소 버튼 클릭 시 null을 리턴하며 두번째 인자로 default 값
</p>
<script>
// let userName = prompt('당신의 이름은 무엇인가요?');
// console.log(userName);
// 답 : 이름 값 출력됨, esc 누르면 null값 나옴
// let age = prompt('당신의 나이는 몇 살인가요?', 20);
// console.log(age);
// 기본 값으로 20이 적혀 있음
</script>
<p>
alert, confirm, prompt는 '모달 창'을 띄우는데
이 창이 떠있는 동안은 스크립트 동작이 일시 정지하며
사용자가 창을 닫기 전까지는 나머지 페이지와 상호 작용이 불가함.
해당 창들은 브라우저마다 다른 모양을 가지고 있으며
개발자가 수정 불가한 요소임.
</p>
</body>
</html>
4) 형변환
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_형변환</title>
</head>
<body>
<h1>1. 형변환</h1>
<h3>1) 문자형변환</h3>
<p>
alert 메소드의 매개변수는 문자형이므로 alert(value)에서 value가
다른 타입이면 문자형으로 자동 변환 됨<br>
또한 String(value) 함수 호출로 변환할 수도 있음
</p>
<script>
console.log('===== 문자형변환 =====');
let str = false;
console.log('str : ' + str);
// 답 str : false
//typeof 연산자를 통해 변수 타입을 확인할 수 있음
console.log('typeof str : ' + typeof str); // typeof : 타입을 확인하는 방법
// 답 typeof str : boolean
str = String(str); // 문자로 타입 변환했음
console.log('str : ' + str);
// str : false
console.log('typeof str : ' + typeof str);
// 답 typeof str : string
</script>
<h3>2) 숫자형변환</h3>
<p>
수학과 관련된 함수와 표현식에서 자동으로 변환됨<br>
또한 Number(value) 함수 호출로 변환할 수도 있음
</p>
<script>
console.log('===== 숫자형변환=====');
console.log('"10" / "2" : ' + "10" / "2");
// 답 "10" / "2" : 5
let number = "100";
console.log('number : ' + number);
// 답 number : 100
console.log('typeof number : ' + typeof number);
// 답 typeof number : string
number = Number(number);
// 답 number : 100
console.log('number : ' + number);
// Number를 붙여서 형변환 해주는 것
console.log('typeof number : ' + typeof number);
// 답 typeof number : number
console.log('Number(" 100 ") : ' + Number(" 100 "));
// 답 Number(" 100 ") : 100
console.log('Number("123a") : ' + Number("123a"));
// 답 Number("123a") : NaN
console.log('Number(true) : ' + Number(true));
// 답 Number(true) : 1
console.log('Number(false) : ' + Number(false));
// 답 Number(false) : 0
console.log('Number(null) : ' + Number(null));
// 답 Number(null) : 0
console.log('Number(undefined) : ' + Number(undefined));
// 답 Number(undefined) : NaN
// NaN : not a number라는 뜻으로 즉 숫자가 아니라는 의미이다.
</script>
<h3>3) 논리형변환</h3>
<p>
논리 연산 수행시 발생함<br>
</p>
<script>
console.log("===== 논리형변환 =====")
console.log('Boolean(1) : ' + Boolean(1));
// 답 Boolean(1) : true
console.log('Boolean(0) : ' + Boolean(0));
// 답 Boolean(0) : false
console.log('Boolean("str") : ' + Boolean("str"));
// 답 Boolean("str") : true
console.log('Boolean("") : ' + Boolean(""));
// 답 Boolean("") : false
// 값이 있으면 true, 없으면 false
console.log('Boolean(null) : ' + Boolean(null));
// 답 Boolean(null) : false
console.log('Boolean(undefined) : ' + Boolean(undefined));
// 답 Boolean(undefined) : false
</script>
<h3>4) 문자열과 숫자의 '+' 연산</h3>
<p>
문자열 + 숫자 = 문자열<br>
숫자 + 숫자 + 문자열 = 숫자가 먼저 계산되고 뒤의 문자열과 합쳐짐<br>
(Java에서와 동일함)
</p>
<script>
let test1 = 7 + 7;
let test2 = "7" + "7";
let test3 = "7" + 7;
let test4 = 7 + 7 + "7";
//'+'를 이항 연산자가 아닌 단항 연산자로 사용시
// 숫자형이 아닌 피연산자는 숫자형으로 형변환됨
let test5 = 7 + 7 + +"7";
// Q. +"7"로 해주면 숫자7로 변경됨?
console.log("===== 문자열과 숫자의 '+' 연산 =====");
console.log('7 + 7 = ' + test1);
// 답 7 + 7 = 14
console.log('"7" + "7" = ' + test2);
// 답 "7" + "7" = 77
console.log('"7" + 7 = ' + test3);
// 답 "7" + 7 = 77
console.log('7 + 7 + "7" = ' + test4);
// 답 7 + 7 + "7" = 147
console.log('7 + 7 + +"7" = ' + test5);
// 답 7 + 7 + +"7" = 21
</script>
</body>
</html>
5) 연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_연산자</title>
</head>
<body>
<h1>연산자</h1>
<p>
기본적인 연산자의 사용과 우선 순위 등은 Java와 크게 다르지 않으므로
차이가 있는 부분에 대해서만 확인
</p>
<h3>1) 비교 연산자를 통한 문자열 비교</h3>
<p>
비교 연산자(크다, 작다, 작거나 같다, 크거나 같다)로
문자열을 비교할 수 있음<br>
사전 순(유니코드 순)으로 뒤쪽의 문자열은 앞쪽의 문자열보다 크다
</p>
<script>
console.log('===== 문자열 비교 연산자 사용 ======')
console.log("'hello' == 'hello' : " + ('hello' == 'hello'));
// 답 'hello' == 'hello' : true
console.log("'hello' != 'hello' : " + ('hello' != 'hello'));
// 답 'hello' != 'hello' : false
console.log("'apple' < 'banana' : " + ('apple' < 'banana'));
// b라는 문자가 더 크니까 true
console.log("'apple' > 'banana' : " + ('apple' > 'banana'));
// a라는 문자가 더 작으니까 false
console.log("'cat' <= 'Zoo' : " + ('cat' <= 'Zoo'));
// 소문자가 더 크므로 false
console.log("'cat' >= 'Zoo' : " + ('cat' >= 'Zoo'));
// 소문자가 더 크므로 true
</script>
<h3>2) ==, != 연산자와 ===, !== 연산자</h3>
<h4>(1) 동등 연산자(==, !=)</h4>
<p>자료형에 상관없이 값이 일치하면 true, 아니면 false</p>
<h4>(2) 일치 연산자(===, !==)</h4>
<p>자료형과 값이 모두 일치하면 true, 아니면 false</p>
<!-- 즉, 동등 연산자는 아무거나, 일치는 자료형과 값 다 일치(엄격) -->
<script>
console.log("===== 동등/일치 연산자 테스트 =====")
//동등 연산자=> 비교하려는 자료형이 다르면 숫자형으로 변경하여 비교함
console.log('1 == "1" : ' + (1 == "1"));
// 답 1 == "1" : true
console.log('1 == true : ' + (1 == true));
// 답 1 == true : true
console.log('1 == "true" : ' + (1 == "true"));
// 답 1 == "true" : false
// "true"가 문자형이므로
//일치 연산자 => 형변환 없이 값 비교
console.log('1 === "1" : ' + (1 === "1"));
// 답 1 === "1" : false
// 숫자형 vs 문자형
console.log('1 === true : ' + (1 === true));
// 답 1 === true : false
// 숫자형 vs boolean
console.log('1 === "true" : ' + (1 === "true"));
// 답 1 === "true" : false
// 숫자 vs 문자형
//동등 연산자
console.log('0 == "0" : ' + (0 == "0"));
// 답 0 == "0" : true
console.log('0 == "" : ' + (0 == ""));
// 답 0 == "" : true
console.log('"0" == "" : ' + ("0" == ""));
// 답 "0" == "" : false
// 문자형 vs null 값
console.log('null == undefined : ' + (null == undefined));
// 답 null == undefined : true
// 둘 다 null값
//일치 연산자
console.log('0 === "0" : ' + (0 === "0"));
// 답 0 === "0" : false
console.log('0 === "" : ' + (0 === ""));
// 답 0 === "" : false
console.log('"0" === "" : ' + ("0" === ""));
// 답 "0" === "" : false
console.log('null === undefined : ' + (null === undefined));
// 답 null === undefined : false
// WHY?
</script>
<p>
그 외 삼항 연산자, 조건문(if문, if-else문, if-else문 if문, switch문),
반복문(for문, while문, do-while문) 등의 사용 방법 모두 Java와 동일함
</p>
<h3>3) 논리 연산자를 이용한 짧은 조건문</h3>
<script>
let input = prompt('숫자를 입력하시오');
// 입력 받은 값이 홀수인지 짝수인지 alert 출력
// if문 아닌 &&, || 를 이용
input % 2 == 0 || alert("홀수입니다");
input % 2 == 0 && alert("짝수입니다");
</script>
</body>
</html>
'웹개발 수업 > JavaScript' 카테고리의 다른 글
| [Day +59 / Java Script 과제]배열2, 객체 (0) | 2021.09.14 |
|---|---|
| [Day +59 / Java Script]기초(8. 객체) (0) | 2021.09.14 |
| [Day +58 / Java Script 과제]함수, 배열 (0) | 2021.09.13 |
| [Day +58 / Java Script]기초(6. 함수, 7. 배열) (0) | 2021.09.13 |
| [Day +56 / JavaScript 과제]기본 실습 4문제 (0) | 2021.09.10 |