(68)[Web]3일차: ■ Javascript 개요 및 기본문법 ■ / F

1. 2023.11.29(수)

■■■ Javascript 개요 및 기본문법 ■■■

○ 개요

    컴파일 과정이 필요없거나 처리 과정이 저은 프로그램에 유리한 스크립트 언어로
    다른 어어에 비해 소스 코드의 수정 및 유지보수가 간편한 편이다.
    HTML 코딩에서 자바스크립트 소스의 명시만으로 웹 브라우저가 자동 실행한다.

    자바스크립트는 웹 페이지에서 가장 많이 사용되는 스크립팅(Scripting)언어로
    스크립팅(Scripting)언어는 크게 나누면
    자바스크립트나 DHTML, Visual Basic 등과 같은 브라우저 스크립팅(Browser Scripting),
    JSP, ASP, PHP 와 같은 서버 스크립팅(Server Scripting) 언어로 구분할 수 있다.

    특히 자바스크립트는 서버 스크립팅(Sever Scripting) 언어와 연동되어
    입력란에 입력한 값이 제대로 된 값인지의 여부 등을 체크하는
    **상호작용(Interactive)**적 요소와 웹 페이지에 **동적(Dynamic)**인 효과 등을
    적용하는 부분에 사용되며 그 밖에도 많은 기능을 사용자가 추가하여
    사용하는 매우 중요한 요소라고 할 수 있다.

    ※ Javascript 는 HTML 문서에
    상호작용(Interactive)하는 요소와 동적(Dynamic)인 요소를
    추가하기 위해 사용하는 언어이다.

○ HTML 문서에 Javascript 추가

1. Inline Javascript(HTML Tag 속에 지정하여 사용)

<a href="javascript:location.href='http://www.com'">네이버</a>

2. Embeded Javascript와 Script Block(Script Block 속에 일괄 지정하여 사용)

        <script type="text/javascript">
            document.write("어쩌구 저쩌구");
        </script>

※ document 는 HTML 문서 Object 를 의미하며
write() 함수는 document Object 에 출력하는 것을 의미한다.

3. Linked Javascript(외부 파일을 링크하여 여러 개의 파일에 일괄 지정하여 사용)

        <script type="text/javascript" src="url 경로지정"></script>

○ Javascript 의 기초 구문과 주요 데이터타입

1. Javascript 의 주석문(comment)

라인 단위 주석문의 경우 2개의 slash(<//>)를 주석문 앞에 붙여 사용하고
블럭 단위 주석문의 경우 </* 여러줄 주석*/>과 같이 사용한다.

2. Javascript 의 명령 line 처리

2개 이상의 script 명령을 사용할 경우<;(세미콜론)>으로 구분해 줄 수 있도록 한다.
(개행 역시 구분자의 역할을 수행하지만 <;>을 붙여서 사용할 수 있도록 한다.)

3. Javascript 에 사용되는 주요 데이터타입

        정수: 0~9사이의 각 자릿수에 해당하는 음수와 양수
            따옴표 속에 넣지 않는다.
        실수: 0~9사이의 각 자릿수에 해당하는 음수와 양수를 포함한 부동 소수.
            따옴표 속에 넣지 않는다.
        Boolean(true or false): true 와 false 의 논리형
        String(문자열): 사용할 수 있는 모든 문자를 의미하며
                        따옴표(<" ">)속에 넣어서 사용한다.

○ Javascript 배열

1. 1차원 배열 선언 - 크기 지정 없이 선언 가능

        var 변수명 = enw Array();
        변수명[0] = 값1;
        변수명[1] = 값2;
        변수명[2] = 값3;
        ...

        var 변수명 = new Array(값1, 값2, 값3, ...);

        var 변수명 = [값1, 값2, 값3, ...];

2. 2차원 배열 선언 -크기 지정 없이 선언 가능

        var 변수명 = new Array();
        변수명[0] = new Array();
        변수명[1] = new Array();
        변수명[2] = new Array();
        ...

        변수명[0][0] = 값1;
        변수명[0][1] = 값2;
        변수명[0][2] = 값3;
        ...
        
        var 변수명 = new Array(new Array(), new Array(), new Array(), ...);
        변수명[0][0] = 값1;
        변수명[0][1] = 값2;
        변수명[0][2] = 값3;
        ...
        
        var 변수명 [[값1, 값2, 값3, ... ], [], []];

3. 문자열.split(구분자)

        var str = "1 2 3 4 5";
        var arr = str.split(" "); //-- 1차원 배열 반환
        for (var n=0; n<arr.length; n++)
        {
            document.getElementById("result").value += arr[n] + " ";
        }
        //--==>> 1 2 3 4 5

F_WebApp03

ㄴ C:\WebStudy\WebApp03\WebContent

ㄴㄴTest001.html_자바스크립트 코드 선언, 도큐먼트에 스크립트로 출력(document.write("출력내용"))

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test001.html</title>
</head>
<body>

<!-- 내용 확인 -->

<script type="text/javascript">
//-- 자바스크립트 소스 코드가 시작된다는 선언
	/* 2023년 11월의 끝 */

	//window.document.객체
	/*----- 브라우저의 창
			------- 문서
					----- 객체
					(사실 브라우저창, 문서 모두 객체! 객체안의 객체를 부르는 것) */

	document.write("2023년 11월의 끝");
	//-- 출력을 지시하는 자바스크립트 명령어
	//	출력 내용: 문자열, 변수명, 연산결과

</script>

</body>
</html>

ㄴㄴTest002.html_document.write의 개행("<br>") 및 태그 삽입

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test002.html</title>
</head>
<body>


<script type="text/javascript">
	document.write("<h1>2023년 11월이 저무는 시점에서 ... </h1>");
	// **.write에서 태그상으로 텍스트를 넣어 출력 가능**
	document.write("이윤수");
	
	// **그냥 텍스트 출력으로는 개행되지 않음**
	document.write("2023년 11월이 저무는 시점에서 ...");
	document.write("이윤수");
	//--==>> 2023년 11월이 저무는 시점에서 ...이윤수
	
	document.write("<br>감기 조심합시다~!!!<br>");
	document.write("문정환");
	//--==>> 감기 조심합시다~!!!
	//		 문정환

	// **나뉜상태로 태그를 감싸는 형태 가능**
	document.write("<h2>");
	document.write("기운냅시다~!!!");
	document.write("</h2>");
	
	document.write("<h3>" + "힘들어도 조금만 참아보겠다" + "</h3>");
</script>
</body>
</html>

ㄴㄴTest003.html_javascript는 body에 출력되지 않음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test003.html</title>

<!-- javascript의 위치는 title 밑이거나 body 안에서도 실행됨 -->
<script type="text/javascript">
	document.write("2023년 11월이 저무는 어느날");
</script>

</head>
<body>

<!-- body 영역에는 아무 내용도 존재하지 않음 -->


</body>
</html>

ㄴㄴTest004.html_Linked Javascript(외부 파일을 링크)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test004.html</title>
<script type="text/javascript" src="js/jsTest.js"></script>

</head>
<body>

<!-- 
	『jsTest.js』라는 파일을 호출하는 형식을 취하고 있다.
	호출하는 대상 파일의 경로 포함 파일명을 src 속성을 통해 명시하게 되며
	이 때, 자바스크립트 파이르이 확장자는 반드시 『*.js』 이어야 한다.
 -->

</body>
</html>

ㄴㄴ..js/jsTest.js

/**
 * jsTest.js
 */

document.write("2023년 11월이 저무는 어느날...")

ㄴㄴTest005.html_Embeded Javascript(파일 내부 선언)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test005.html</title>
<script type="text/javascript">
	num1=10;				// 변수 선언 및 초기화 -> var num1=10;
							// (변수 선언 과정이 특별히 존재하지 않음)
	document.write("num1=");// 단순 문자열 출력 -> "num1="
	document.write(num1);	// write() 함수에 num1 이라는 변수를 넘겨주는 상황
							// -> num1 에 담겨있는 10이 출력
							
	document.write("num1";) // 이 구붐과 비교 가능~!!!
</script>

</head>
<body>

</body>
</html>

ㄴㄴTest006.html_document.write()안에서 개행("<br>")

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test006.html</title>

<script type="text/javascript">
	/* **
	- .write안에서 개행은 '\n'(X) -> '<br>'(O)
	- num1 이라는 변수는 정수를 담은 변수이나, 문자도 담을 수 있음
	** */

	num1=10;							// 변수 num1 에 10 대입
	document.write("num1=");			// 문자열 출력
	document.write(num1);				// 변수 출력
	
	num1=100;							// 변수 num1 에 100 대입(기존 10에ㅓ 덮어쓰기)
	//document.write("\n num1=");			// 문자열 출력 -> 개행 안됨~!!! check~!!!
	document.write("<br>num1=");		// 라인 스킵(개행)을 위해 사용한 <br>
	document.write(num1);				// 변수 출력
	
	num1="2023년 11월이 저무는 어느날...";// 변수 num1에 문자열 대입
	document.write("<br>num1=");
	document.write(num1);
	
	num2=200;							// 변수 num2 구성
	
	num1= num2;							// 변수 num1에 num2 대입
	document.write("<br>num1=");
	document.write(num1);
</script>

</head>
<body>

</body>
</html>

ㄴㄴTest007.html_변수선언에서의 자료형(var) 지정 없어도 실행에서 문제없음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test007.html</title>

<script type="text/javascript">
	/* document.write("에러 찾는 법); */
	
	num1=10;
	
	var num2;		//** 없어도 에러나진 않음
	num2=20;
	
	var num3=30;
	
	document.write("num1=" + num1);
	document.write("<br>num2="+num2);
	document.write("<br>num3=");
	document.write(num3);
</script>

</head>
<body>

</body>
</html>

ㄴㄴTest008.html_나누기(/) 소숫점까지, 나머지(%) 가 있으면 반올림됨

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test008.html</title>

<script type="text/javascript">
	num1=7;
	num2=3;
	
	res=num1 + num2;					// 더하기(덧셈 연산)
	document.write("num1 + num2 = ");
	document.write(res);
	
	res=num1 - num2;					// 빼기(뺄셈 연산)
	document.write("<br>num1 - num2 = ");
	document.write(res);
	
	res=num1 * num2;					// 곱하기(곱셈 연산)
	document.write("<br>num1 * num2 = ");
	document.write(res);
	
	res=num1 / num2;					// 나누기(나눗셈 연산) check~!!!
	document.write("<br>num1 / num2 = ");//-- 결과값으로 반환되는 데이터의 형태 관찰
	document.write(res);
	
	res=num1 % num2;					// 나머지(나눗셈 연산) check~!!!
	document.write("<br>num1 % num2 = ");// **나머지 올림됨**
	document.write(res);	
	
</script>

</head>
<body>

</body>
</html>

ㄴㄴTest009.html_ ++, --

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test009.html</title>
</head>

<script type="text/javascript">
	/* **++,-- 가능** */
	num1 = 7;
	num2 = 3;
	
	document.write("원래의 num1: ");
	document.write(num1);
	
	++num1;
	document.write("<br>첫 번째 ++num1: ");
	document.write(num1);
	
	++num1;
	document.write("<br>두 번째 ++num1: ");
	document.write(num1);
	
	document.write("<br><br>원래의 num2: ");
	document.write(num2);
	
	--num2;
	document.write("<br><br>첫 번째 --num2: ");
	document.write(num2);
	
	--num2;
	document.write("<br>두 번째 --num2: ");
	document.write(num2);	
	
</script>

<body>
	
</body>
</html>

ㄴㄴTest010.html_ 복합대입연산자(+=,-=,*=,/=,%=)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test010.html</title>

<script type="text/javascript">
/* **복합대입연산자에서는 피연산자의 값이 바뀜**  */
	num1=7;
	num2=3;
	
	num1+=num2;
	document.write("num1 += num2 -> ");
	document.write(num1);
	
	num1=7;
	num2=3;
	
	num1-=num2;
	document.write("<br>num1 -= num2 -> ");
	document.write(num1);
	
	num1=7;
	num2=3;
	
	num1*=num2;
	document.write("<br>num1 *= num2 -> ");
	document.write(num1);
	
	num1=7;
	num2=3;
	
	num1/=num2;
	document.write("<br>num1 /= num2 -> ");
	document.write(num1);
	
	num1=7;
	num2=3;
	
	num1%=num2;
	document.write("<br>num1 %= num2 -> ");
	document.write(num1);
	
</script>

</head>
<body>

</body>
</html>

ㄴㄴTest011.html_관계연산자, 삼항연산자, 조건연산자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test011.html</title>

<script type="text/javascript">
/* **관계연산자 -> true or false 반환** */
/* **삼항연산자, 조건연산자 가능** */
	num1=7;
	num2=3;
	
	res=(num1==num2);
	document.write("num1 == num2 -> ");
	document.write(res);
	
	res=(num1>=num2);
	document.write("<br>num1>=num2 -> ");
	document.write(res);
	
	res=(num1<=num2);
	document.write("<br>num1<=num2 -> ");
	document.write(res);
	
	//----------------------------------------------
	document.write("<br><br><br><br>");
	
	res = (num1<10 && num2<10);
	document.write("<br>num1<10 && num2<10 -> ");
	document.write(res);
	
	res = (num1>10 && num2>10);
	document.write("<br>num1>10 && num2>10 -> ");
	document.write(res);
	
	res = (num1>10 && num2>10);
	document.write("<br>num1>10 || num2>10 -> ");
	document.write(res);
	
	res = (num1>10 || num2<10);
	document.write("<br>num1>10 || num2<10 -> ");
	document.write(res);
	
	res = !(num1 == num2);
	document.write("<br>!(num1==num2) -> ");
	document.write(res);
	
	//----------------------------------------------
	document.write("<br><br><br><br>");
	
	human = "연인";
	
	res = (human == "연인")?"사랑":"우정";
	document.write("<br>res= ");
	document.write(res);
	
	human="친구";
	
	res=(human=="연인")?"사랑":"우정";
	document.write("<br>res= ");
	document.write(res);
	
	
	
</script>

</head>
<body>

</body>
</html>

ㄴㄴTest012.html_alter 태그, 내부-외부 스크립트 내용 공유함, js 위치에 따라 실행여부 달라질 수 있음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test012.html</title>

<script type="text/javascript">
/* **
	-.write에서는 태그 인식 되나, alert에서는 태그 인식 되지않음
	-.alter는 코드순서와 상관없이 먼저 처리됨 
	- javascript 개수와 상관없이 모두 실행됨
	- 내부 script와 외부 script는 내용을 공유함
	- javascript의 위치에 따라서 실행여부가 달라질 수 있음
	
	- 소문자 시작이름() -> 
	- 대문자 시작이름() -> 자바스크립트 생성자함수 호출
** */
	//alert(message);	//** 경고창
	//--==>> 아무것도 뜨지 않음(오류가 있기 때문에)
	
	message="<h1>Hello~!!</h1>";
	
	//alert(message);	//** 경고창
	//--==>> 경고창의 버튼 선택후, document 출력됨

	document.write(message);
	
	alert(message);	//** 경고창
</script>
<script type="text/javascript" src="js/alertTest.js"></script>

<script type="text/javascript">
	// Date 내장 객체: 현재 시스템의 날짜와 시간
	// var dt = Date().toString();
	var dt=String(Date());
	document.write(dt);
</script>

</head>
<body>

</body>
</html>

ㄴㄴ../js/alertTest.js

/**
 * alertTest.js
 */

alert(message);

ㄴㄴTest013.html_함수는 호출해야 실행됨/ document.onload 이벤트 등록

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test013.html</title>

<script type="text/javascript">
/* **- 함수는 호출해야 실행됨** */
 * 
 */
	/* 이벤트 등록 방법 ② */
	/* document.onload = 행위, 동작, 기능 */
	document.onload = windowOnload();
	
	function windowOnload()
	{
		alert("경고창~!!!");
	}
</script>

</head>
<!-- 이벤트 등록 방법 ① -->
<!-- <body onload="windowOnload()"> -->
<body>

<h1>정한울</h1>
<h2>배부르다~!!!</h2>
<h3>짜게 먹었네~!!!</h3>


</body>
</html>

ㄴㄴTest014.html_함수 등록

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test014.html</title>

<script type="text/javascript">
	var msg="2023년 11월이 저무는 어느날...";
	
	function buttonOnclick1()
	{
		// 테스트
		alert("첫 번째 버튼 클릭 확인~!!!");
	}
	function buttonOnclick2()
	{
		// 테스트
		alert("두 번째 버튼 클릭 확인~!!!");
	}
</script>

</head>
<body>
	<input type="button" id="btn01" value="Button1" onclick="buttonOnclick1()"><br>
	<input type="button" id="btn02" value="Button2" onclick="buttonOnclick2()"><br>
</body>
</html>

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

(70)[Web]5일차: ((Javascript))F_WebApp03>Test022~025 (2)	2023.12.01
(69)[Web]4일차: ((Javascript)) F_WebApp03>Test015~021 (1)	2023.12.01
(68)[Web]3일차: ((CSS)) F_WebApp02>Test005~020 (4)	2023.11.29
(66)[Web]2일차: CSS 개요 / ■ CSS ■ / F_WebApp02>Test001~004 (0)	2023.11.28
(66)[Web]2일차: ((HTML)) F_WebApp01>Test005~023 (1)	2023.11.28

🍀보통 기록합니다💭

(68)[Web]3일차: ■ Javascript 개요 및 기본문법 ■ / F_WebApp03>Test001~Test014

1. 2023.11.29(수)

■■■ Javascript 개요 및 기본문법 ■■■

○ 개요

○ HTML 문서에 Javascript 추가

1. Inline Javascript(HTML Tag 속에 지정하여 사용)

2. Embeded Javascript와 Script Block(Script Block 속에 일괄 지정하여 사용)

3. Linked Javascript(외부 파일을 링크하여 여러 개의 파일에 일괄 지정하여 사용)

○ Javascript 의 기초 구문과 주요 데이터타입

1. Javascript 의 주석문(comment)

2. Javascript 의 명령 line 처리

3. Javascript 에 사용되는 주요 데이터타입

○ Javascript 배열

1. 1차원 배열 선언 - 크기 지정 없이 선언 가능

2. 2차원 배열 선언 -크기 지정 없이 선언 가능

3. 문자열.split(구분자)

F_WebApp03

ㄴ C:\WebStudy\WebApp03\WebContent

ㄴㄴTest001.html_자바스크립트 코드 선언, 도큐먼트에 스크립트로 출력(document.write("출력내용"))

ㄴㄴTest002.html_document.write의 개행("<br>") 및 태그 삽입

ㄴㄴTest003.html_javascript는 body에 출력되지 않음

ㄴㄴTest004.html_Linked Javascript(외부 파일을 링크)

ㄴㄴ..js/jsTest.js

ㄴㄴTest005.html_Embeded Javascript(파일 내부 선언)

ㄴㄴTest006.html_document.write()안에서 개행("<br>")

ㄴㄴTest007.html_변수선언에서의 자료형(var) 지정 없어도 실행에서 문제없음

ㄴㄴTest008.html_나누기(/) 소숫점까지, 나머지(%) 가 있으면 반올림됨

ㄴㄴTest009.html_ ++, --

ㄴㄴTest010.html_ 복합대입연산자(+=,-=,*=,/=,%=)

ㄴㄴTest011.html_관계연산자, 삼항연산자, 조건연산자

ㄴㄴTest012.html_alter 태그, 내부-외부 스크립트 내용 공유함, js 위치에 따라 실행여부 달라질 수 있음

ㄴㄴ../js/alertTest.js

ㄴㄴTest013.html_함수는 호출해야 실행됨/ document.onload 이벤트 등록

ㄴㄴTest014.html_함수 등록

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

티스토리툴바

(68)[Web]3일차: ■ Javascript 개요 및 기본문법 ■ / F_WebApp03>Test001~Test014

1. 2023.11.29(수)

■■■ Javascript 개요 및 기본문법 ■■■

○ 개요

○ HTML 문서에 Javascript 추가

1. Inline Javascript(HTML Tag 속에 지정하여 사용)

2. Embeded Javascript와 Script Block(Script Block 속에 일괄 지정하여 사용)

3. Linked Javascript(외부 파일을 링크하여 여러 개의 파일에 일괄 지정하여 사용)

○ Javascript 의 기초 구문과 주요 데이터타입

1. Javascript 의 주석문(comment)

2. Javascript 의 명령 line 처리

3. Javascript 에 사용되는 주요 데이터타입

○ Javascript 배열

1. 1차원 배열 선언 - 크기 지정 없이 선언 가능

2. 2차원 배열 선언 -크기 지정 없이 선언 가능

3. 문자열.split(구분자)

F_WebApp03

ㄴ C:\WebStudy\WebApp03\WebContent

ㄴㄴTest001.html_자바스크립트 코드 선언, 도큐먼트에 스크립트로 출력(document.write("출력내용"))

ㄴㄴTest002.html_document.write의 개행("<br>") 및 태그 삽입

ㄴㄴTest003.html_javascript는 body에 출력되지 않음

ㄴㄴTest004.html_Linked Javascript(외부 파일을 링크)

ㄴㄴ..js/jsTest.js

ㄴㄴTest005.html_Embeded Javascript(파일 내부 선언)

ㄴㄴTest006.html_document.write()안에서 개행("<br>")

ㄴㄴTest007.html_변수선언에서의 자료형(var) 지정 없어도 실행에서 문제없음

ㄴㄴTest008.html_나누기(/) 소숫점까지, 나머지(%) 가 있으면 반올림됨

ㄴㄴTest009.html_ ++, --

ㄴㄴTest010.html_ 복합대입연산자(+=,-=,*=,/=,%=)

ㄴㄴTest011.html_관계연산자, 삼항연산자, 조건연산자

ㄴㄴTest012.html_alter 태그, 내부-외부 스크립트 내용 공유함, js 위치에 따라 실행여부 달라질 수 있음

ㄴㄴ../js/alertTest.js

ㄴㄴTest013.html_함수는 호출해야 실행됨/ document.onload 이벤트 등록

ㄴㄴTest014.html_함수 등록

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

관련글

티스토리툴바