5월 ~ 7월) 웹/web
43Day [js]- 01_Hello & 01_Hello.js / 02_variable/ 03_variable2/ 04_operator / 05_typecast / 06_control
첼로그
2023. 6. 2. 17:51
01_Hello
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<!-- 자바스크립트 자동 완성 기능 <ctrl + space>(JavaScript Content Assist)을 제공받기 위해 이클립스에 Tern 플러그인 설치 -->
<!-- > Help >> Install New Software... >> work with : http://oss.opensagres.fr/tern.repository/1.1.0 입력
>> 플러그인 목록 모두 체크 >> Next >> Next >> 라이센스 동의 >> finish -->
<!-- Tern 플러그인을 사용하기 위해 Web 프로젝트를 Tern 프로젝트로 변환 -->
<!-- > 프로젝트 >> 오른쪽 버튼 클릭(메뉴) >> Configure >> Convert to Tern Project
>> Modules : Browser와 jQuery 선택 >> Apply And Close -->
<!-- script 태그를 사용하여 JavaScript Source File를 불러와 HTML 문서에 포함 -->
<!-- > 웹사이트를 구성하는 모든 웹문서에 동일한 기능(함수)을 제공하기 위해 사용 -->
<script type="text/javascript" src="/web/js/01_hello.js"></script>
<!-- script 태그 : 스크립트 언어를 사용하여 프로그램을 작성하는 영역을 제공하는 태그 -->
<!-- > 웹문서에 script 태그를 여러번 선언하여 자바스크립트 작성 - 순차적으로 실행 -->
<script type="text/javascript">
// 자바스트립트의 주석문와 자바와 동일
// 자바스크립트는 한 줄에 작성된 코드를 하나의 명령으로 인식하여 처리
// > 명령 마지막에 ; 생략 가능
//자바스크립트는 객체 지향 프로그래밍 언어로 객체를 이용하여 프로그램 작성
// > 객체의 속성(Property)와 함수(Method)를 이용하여 명령을 작성하여 실행
//console 객체 : 브라우저 콘솔을 표현하기 위해 제공되는 내장객체
//console.log(message) : 브라우저 콘솔에 메세지를 출력하는 메소드
//console.log("Hello, JavaScript!!!");
// window 객체 : 웹브라우저를 표현하기 위해 제공되는 내장객체
// window.alert(message) : 메세지창(경고창)을 생성하여 메세지를 출력하는 메소드(함수)
// > window 객체를 생략하여 메소드 호출 가능
// window.alert("Hello, JavaScript!!!");
//alert("head 태그에 작성된 자바스크립트 명령");
</script>
</head>
<body>
<!--
<script type="text/javascript">
alert("body 태그에 작성된 자바스크립트 명령");
</script>
-->
<h1>자바스크립트 작성</h1>
<hr>
<p>자바스크립트(JavaScript) : 웹페이지에서 발생된 이벤트를 처리하기 위한 기능을 제공하는
스크립트 프로그래밍 언어 - 클라이언트에서 해석되어 실행</p>
<p>자바스크립트 표준 규약은 ES15(ECMAScript15)까지 구현되었으나 일반적으로
ES6(ECMAScript6)을 이용하여 작성</p>
<hr>
<!-- button 태그의 type 속성값을 [button]으로 설정하면 버튼 출력 - 이벤트 미발생 -->
<!-- HTML 태그에 onXXX 속성은 이벤트 리스너 속성으로 이벤트 처리 명령(JavaScript)을 속성값으로 설정 -->
<!-- <button type="button" onclick="alert('이벤트 처리 명령 실행');">버튼을 눌러보세요.</button> -->
<!-- 태그의 이벤트 리스너 속성값으로 자바스트립트 함수(이벤트 처리 함수)를 호출하여 사용 -->
<button type="button" onclick="eventHandle();">버튼을 눌러보세요.</button>
<script type="text/javascript">
//alert("body 태그에 작성된 자바스크립트 명령");
</script>
</body>
</html>
01_Hello.js
// alert("JavaScript Source File에 작성된 자바스크립트 명령");
function eventHandle() {
alert("이벤트 처리 함수의 명령 실행");
}
02_variable
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>자바스크립트 변수 및 자료형</h1>
<hr>
<p>변수(Variable) : 리터럴(값)을 저장하기 위한 저장공간(메모리)의 식별자(이름)</p>
<p>자바스크립트는 변수를 선언하지 않아도 값을 저장하여 사용 가능하지만 변수를 선언하는 것을 권장</p>
<p>형식)var 변수명 = 초기값</p>
<p>자바스크립트 변수에 저장되는 값에 따라 변수의 자료형이 자동으로 변환</p>
<p>자바스트립트 자료형 - 숫자형(number), 문자형(string), 논리형(boolean)
, 함수형(function), 객체형(object)</p>
<script type="text/javascript">
//변수 선언 - 변수에 저장된 값이 없는 경우 변수는 [undefined] 자료형으로 표현
//var num;
//alert(num);//undefined
//변수 선언 및 초기값 저장 - 변수에 숫자값이 저장된 경우 [number] 자료형으로 표현
//var num=10;
//alert(num);
/*
//변수 선언 및 초기값 저장 - 변수에 문자값이 저장된 경우 [string] 자료형으로 표현
// => 자바스크립트에서 문자형 리터럴(문자값)은 ' ' 또는 " " 기호를 사용하여 표현
var num="10";
//alert(num);
alert("num = "+num);//+ 연산자를 사용하여 문자값 결합
*/
/*
var num=10;
//typeof(변수) : 변수의 자료형을 제공하는 연산자
//alert(typeof(num));//number - 숫자형 변수
num="10";
alert(typeof(num));//string - 문자형 변수
*/
//변수에 논리값(false 또는 true)이 저장된 경우 [boolean] 자료형으로 표현
//var num=false;
//alert(typeof(num));//boolean - 논리형 변수
/*
var num=10;
var num=20;//var 키워드로 변수 선언시 동일한 이름의 변수 선언 가능 - 기존 변수 사용
alert("num = "+num);
*/
//var 키워드로 변수를 선언하지 않아도 값을 저장하여 변수 사용 가능
//num=10;
//alert("num = "+num);
//자바스트립트 변수에는 함수 저장 가능 - 자료형 : function
/*
var fun=function() {
alert("함수의 명령 실행");
}
alert(typeof(fun));//function - 함수형 변수
*/
//자바스트립트 변수에는 객체 저장 가능 - 자료형 : object
//var obj=new Object();
//alert(typeof(obj));//object - 객체형 변수
</script>
</body>
</html>
03_variable2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>자바스크립트 변수</h1>
<hr>
<p>ES6(ECMAScript6)에서는 let 키워드 또는 const 키워드를 사용하여 변수 선언 가능</p>
<script type="text/javascript">
/*
//var 키워드로 변수를 선언한 경우 동일한 이름의 변수 선언이 가능하며 초기값 변경 가능
var num=100;
//alert("num = "+num);
var num=200;
alert("num = "+num);
*/
/*
//let 키워드로 변수를 선언한 경우 동일한 이름의 변수 선언이 불가능하며 초기값 변경 가능
let num=100;
//alert("num = "+num);
//let num=200;//에러 발생
num=200;
alert("num = "+num);
*/
/*
//const 키워드로 변수를 선언한 경우 동일한 이름의 변수 선언이 불가능하며 초기값 변경 불가능
const num=100;//상수 변수(Constant Variable)
//alert("num = "+num);
//const num=100;//에러 발생
num=200;
alert("num = "+num);
*/
/*
//선택문 또는 반복문의 블럭 내부에서 선언된 var 변수는 블럭 외부에서 사용 가능하지만
//let 변수와 const 변수는 블럭 외부에서 사용 불가능
if(true) {
var num1=100;//블럭 내부 및 외부에서 사용 가능
let num2=200;//블럭 내부에서만 사용 가능 - 블럭 종료시 자동 소멸
const num3=300;//블럭 내부에서만 사용 가능 - 블럭 종료시 자동 소멸
//alert("num1 ="+num1+", num2 = "+num2+", num3 = "+num3);
}
//num2 변수 및 num3 변수가 선언되어 있지 않아 에러 발생
//alert("num1 ="+num1+", num2 = "+num2+", num3 = "+num3);//에러 발생
*/
/*
//함수 내부에 선언된 변수는 함수 종료시 무조건 소멸
function display() {
var num1=100;//함수 내부에서만 사용 가능 - 함수 종료시 자동 소멸
let num2=200;//함수 내부에서만 사용 가능 - 함수 종료시 자동 소멸
const num3=300;//함수 내부에서만 사용 가능 - 함수 종료시 자동 소멸
//alert("num1 ="+num1+", num2 = "+num2+", num3 = "+num3);
}
display();//함수 호출
alert("num1 ="+num1+", num2 = "+num2+", num3 = "+num3);//에러 발생
*/
let num=100;
//alert("num = "+num);
//문자값을 표현하기 위해 ' ' 또는 " " 기호 대신 ` ` 기호를 사용하여 표현 가능 - ES6
//alert(`num = `+num);
//`(백틱) 기호로 표현된 문자값에서는 ${변수} 형식으로 변수값을 제공받아 출력 가능
alert(`num = ${num}`);
</script>
</body>
</html>
04_operator
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>자바스크립트 연산자</h1>
<hr>
<!-- 연산자 우선 순위에 의한 분류 -->
<p> 최우선 연산자 : ( ) , [ ] , { } , . </p>
<p> 단항 연산자 : + , - , ++, -- , ! , new , typeof (변수자료형을 알아내는 연산자) </p>
<p>산술 연산자 : *, /, %, +, -</p>
<p>관계 연산자 : >, >=, <, <=, ==, !=, ===, !==</p>
<p>논리 연산자 : &&, ||</p>
<p>삼항 연산자 : 조건식?참값:거짓값</p>
<p>대입 연산자 : =, *=, /=, %=, +=, -=</p>
<script type="text/javascript">
var num=123;
// alert("변수값 = "+num);//변수값 = 123
// alert("자료형 = "+typeof(num));//자료형 = number
num ="123";
// alert("변수값 = "+num);//변수값 = 123
// alert("자료형 = "+typeof(num));//자료형 = string
// == 연산자 또는 != 연산자는 자료형에 상관없이 값만 비교하여 비교결과 제공
//alert("비교결과 = "+(num==123));//비교결과 = true
//alert("비교결과 = "+(num!=123));//비교결과 = false
// === 연산자 또는 !== 연산자는 자료형과 값을 비교하여 비교결과 제공
alert("비교결과 = "+(num===123)); // 비교결과 = false
alert("비교결과 = "+(num!==123)); // 비교결과 = true
</script>
</body>
</html>
05_typecast
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>자바스크립트 형변환</h1>
<hr>
<p>자동 형변환 - 연산자에 의해 값의 자료형으로 자동으로 변환</p>
<p>강제 형변환 - 자료형 관련 함수에 의해 값의 자료형을 강제로 변환</p>
<script type="text/javascript">
// + 연산자는 두 피연산자의 자료형이 숫자형인 경우 산술 연산 처리
//alert(20+10);//30
//+ 연산자는 두 피연산자 중 하나의 자료형의 문자형인 경우 모든 피연산자를 문자값으로 변환하여 결합 처리
// alert("20"+10); // 2010
// alert(20+"10"); // 2010
// alert("20"+"10"); // 2010
//alert(20-10);//10
//+ 연산자를 제외한 산술 연산자는 모든 피연산자를 무조건 숫자값으로 변환하여 산술 처리
// alert("20"-10); // 10
// alert(20-"10"); // 10
// alert("20"-"10"); // 10
// NaN(Not a Number) : 숫자형으로 변환할 수 없는 문자값인 경우 제공되는 상수
// > NaN 상수를 연산 처리하면 NaN 결과 제공
// alert(20-"abc");//NaN
// 논리값을 산술 연산한 경우 [false]은 0으로 변환되고 [true]는 1로 변환되어 연산 처리
// > 숫자값을 비교 연산한 경우 0은 [false]로 변환되고 0 이외의 숫자값은 [true]로 변환되어 연산 처리
//alert(20+true);//21
// alert("20"+10);//2010 - 문자값 결합
// Number(value) : 매개변수로 전달받은 값을 숫자값으로 변환하여 반환하는 함수
// String(value) : 매개변수로 전달받은 값을 문자값으로 변환하여 반환하는 함수
// Boolean(value) : 매개변수로 전달받은 값을 논리값으로 변환하여 반환하는 함수
alert(Number("20")+10); // 30 - 강제 형변환을 이용해 산술 연산
</script>
</body>
</html>
06_control
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>자바스크립트 제어문</h1>
<hr>
<!-- 제어문 - 프로그램의 흐름을 변경하기 위한 사용하는 명령 -->
<p>선택문 - if, switch</p>
<p>반복문 - for, while</p>
<p>기타 - break, continue</p>
<script type="text/javascript">
/*
//사용자로부터 숫자값을 입력받아 숫자값에 대한 제곱근을 계산하여 출력
// => 숫자값이 아닌 값을 입력한 경우 에러 메세지 출력
//prompt(message[, value]) : 입력창을 제공하여 값을 입력받아 문자값으로 반환받아 함수
var num=prompt("숫자값을 입력해 주세요.");
//alert(typeof(num));//string
//isNaN(value) : 매개변수로 전달받은 값을 숫자형으로 형변환 가능하면 [false]를 반환하고
//숫자형으로 형변환 불가능하면 [true]를 반환하는 함수
if(isNaN(num)) {
alert("입력값이 숫자가 아닙니다.");
} else {
alert(num * num);
}
*/
/*
//학생 성적에 대한 총점,평균,학점을 계산하여 출력
var kor=98, eng=80, mat=91;//학생 성적
var tot=kor+eng+mat;//총점 계산
var ave=tot/3;//평균 계산
var grade="";
//parseInt(value) : 매개변수로 전달값을 숫자값을 정수값으로 변환하여 반환하는 함수
switch (parseInt(ave/10)) {
case 10:
case 9: grade="A"; break;
case 8: grade="B"; break;
case 7: grade="C"; break;
case 6: grade="D"; break;
default: grade="F"; break;
}
alert("총점 = "+tot+", 평균 = "+ave+", 학점 = "+grade);
*/
/*
//1~100 범위의 정수들의 합계를 계산하여 출력
var tot=0;
for(i=1;i<=100;i++) {
tot+=i;
}
alert("1~100 범위의 정수들의 합계 = "+tot);
*/
/*
//A4 용지를 반으로 계속 접어 펼쳤을 경우 사각형 모양이 500개 이상이 되려면 몇 번 접으면
//되는지 계산하여 출력
var cnt=0, gae=1;
while(true) {
cnt++;
gae*=2;
if(gae>=500) break;
}
alert(cnt+"번 접으면 "+gae+"개의 사각형 모양이 만들어집니다.");
*/
//1~10 범위의 정수 중 홀수만 출력
var result="";
for(i= 1; i<=10; i++) {
if(i%2 == 0) continue;
result += i+" ";//변수에 저장된 문자값에 새로운 문자값을 결합하여 저장
}
alert("1~10 범위의 홀수 = "+result);
</script>
</body>
</html>
