Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
Javascript 20231130 [프로그램소스] - Test011, Test012, Test013, Test014, Test015(~ing) 본문
[Javascript]/Program source (Javascript)
Javascript 20231130 [프로그램소스] - Test011, Test012, Test013, Test014, Test015(~ing)
Jelly-fish 2023. 11. 30. 08:44
WebApp03
Test011.html
Test011.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test011.html</title>
<script type="text/javascript">
// 자바 스크립트도 자바와 마찬가지로
// 관계 연산자의 연산 결과는 항상 true 혹은 false 를 반환한다.
num1 = 7;
num2 = 3;
res = (num1 == num2);
document.write("num1 == num2 → ");
document.write(res);
//--==>> false
res = (num1 >= num2);
document.write("<br>num1 >= num2 → ");
document.write(res);
//--==>> true
res = (num1 <= num2);
document.write("<br>num1 <= num2 → ");
document.write(res);
//--==>> false
//----------------------------------------------
document.write("<br><br><br><br>");
res = (num1 < 10 && num2 < 10);
document.write("<br>num1 < 10 && num2 < 10 → ");
document.write(res);
//--==>> true
res = (num1 > 10 && num2 > 10);
document.write("<br>num1 > 10 && num2 > 10 → ");
document.write(res);
//--==>> false
res = (num1 > 10 || num2 > 10);
document.write("<br>num1 > 10 || num2 > 10 → ");
document.write(res);
//--==>> false
// OR (||) 로 구성되어 있는 어느 하나라도 true 이면 true!!
res = (num1 > 10 || num2 < 10);
document.write("<br>num1 > 10 || num2 < 10 → ");
document.write(res);
//--==>> true
res = !(num1 == num2);
document.write("<br>!(num1 == num2) → ");
document.write(res);
//--==>> true
//-------------------------------------------------
document.write("<br><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
Test012.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test012.html</title>
<script type="text/javascript">
message = "<h1>Hello~!!!</h1>";
document.write(message);
alert(message);
// [alert : 경고창 띄우기!]
// 경고창 자체에는 <h1></h1> 태그가 적용되지 않고 텍스트 그대로 나와버린다.
</script>
<!-- 스크림트 추가 선언 가능! -->
<script type="text/javascript" src="js/alertTest.js"></script>
<!-- ★ 자바 스크립트 엔진 내에서 돌아가기 때문에, 두 번째 script에서도 message가 보인다! -->
<!-- ★[선생님의 Tip!] : 스크립트들 충돌났을 때, 스크립트들의 순서를 변경시켜 보자! -->
<script type="text/javascript">
//★★★★★
//================================================================
// ⓐ【소문자시작이름()】 : 내장 함수 호출!
// ⓑ【대문자시작이름()】 : 자바스크립트 객체의 생성자를 호출!!
//================================================================
// Date 내장 객체 : 현재 시스템의 날짜와 시간
// var dt = Date().toString();
var dt = String(Date());
document.write(dt);
</script>
</head>
<body>
</body>
</html>
Test013.html
Test013.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test013.html</title>
<script type="text/javascript">
/* 이벤트 등록 방법 ② */
/* document.onload = 행위, 동작, 기능; */
document.onload = windowOnload();
// [document(HTML 문서)가 로드됐을 때 함수 호출해!]
// 함수는 정의를 하더라도 호출하지 않으면 실행되지 않는다~!!
function windowOnload()
{
alert("경고창~!!!");
}
// 이벤트가 발생됐을 때 이 함수가 호출되도록!!
//<body> 영역은 body 태그 안의 내용을 load해서 해석하여 브라우저에 노출시키는 과정을 거쳐야 한다.
// 그것이 바로 【load 이벤트!】
// onload : 이벤트 핸들러. 로드가 발생했을 때! → [windowOnload() 호출!]
// <body></body>가 로드되면서 경고창이 실행된다
</script>
</head>
<!-- 이벤트 등록 방법 -->
<!-- <body onload="windowOnload()"> -->
<body>
<h1>정한울</h1>
<h2>배부르다~!!!</h2>
<h2>짜게 먹었네~!!!</h2>
</body>
</html>
Test014.html
Test014.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test014.html</title>
<script type="text/javascript">
// msg 변수 → 각각의 함수들 밖에 선언 → 모든 함수에서 접근 가능한 전역 변수
//var msg = "2023년 11월이 저무는 어느날...";
// msg 변수 → 각각의 함수들 밖에 선언 → 모든 함수에서 접근 가능한 전역 변수
msg = "2023년 11월이 저무는 어느날...";
//-- 『var』 키워드 사용 여부와 관계 없이 전역 변수 형태로 기능하는 상황~!!!
function buttonOnclick1()
{
// 테스트
//alert("첫 번째 버튼 클릭 확인~!!!");
alert(msg);
// 『var』 키워드 포함 → name 변수 → 함수 내부에 선언 → 지역 변수
//var name = "최혜인";
// 『var』 키워드 생략 → name 변수 → 함수 내부에 선언 → 상황에 따른 지역/전역 변수
name = "길현욱";
document.write("이름 : " + name);
}
// 1번 눌렀을 경우, 클릭하고나서
//--==>> 이름 : 최혜인
function buttonOnclick2()
{
// 테스트
//alert("두 번째 버튼 클릭 확인~!!!");
alert(msg);
document.write("이름 : " + name);
}
//name이 buttonOnclick2() 함수의 가시범위 안에 있는 변수가 아니므로
//--==>> 이름 :
// [var] 생략하고 "길현욱"을 name에 저장했을 때는
// 버튼 2만 처음으로 클릭했을 땐 [이름 : ] 으로 출력되지만
// 버튼 1을 누르고 난 후에는, 버튼2를 클릭해도 [이름 : 길현욱]이 출력된다!
// ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
// 【var 생략】 : 상황에 따른 지역/전역 변수
// 한 번이라도 실행되면 메모리에 그 변수가 전역변수로 올라간다!
// 이 때문에, 다른 함수에서도 보이게 되는 것이다!
// ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
/* <!--
javascript 내용 ...
//--> : 자바스크립트의 주석을, html 주석 영역으로 변경한 것! 오래된 코드다.
//--> // 슬래시를 통해 라인 단위 주석. 자바스크립트가 읽지 못하게 */
</script>
<!-- <noscript> : 과거에 cross browsing 처리를 하지 않았을 때, 자바스크립트가 사용 안 될 경우 이 태그 내부를 실행 -->
<noscript>
자바스크립트가 사용되지 못할 경우 표현되는 영역
</noscript>
</head>
<body>
<div>
<input type="button" id="btn01" value="Button1" onclick="buttonOnclick1()"><br>
<input type="button" id="btn02" value="Button2" onclick="buttonOnclick2()"><br>
</div>
</body>
</html>
Test015.html
Test015.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test015.html</title>
<style type="text/css">
*
{
color: #343;
font-family: 맑은 고딕;
}
input.box:focus
{
background-color: yellow;
}
input.btn:hover
{
color: orange;
font-weight: bold;
}
</style>
<script type="text/javascript">
// 1. aaa 쓰고 A버튼 클릭하면 옆에 입력창에 aaa
// 2. bbb 쓰고 B버튼 클릭하면 옆에 입력창에 aaabbb
// ★ [id는 문서 안에서 고유하므로, 가장 많이 활용하게 된다.(Oracle의 식별자 개념과 유사)]
function actionBtnA()
{
// 테스트
//alert("A버튼 클릭 확인~!!!");
// 텍스트를 가져오는 것이 아니라, 입력창 객체(Object) 자체를 가져온다!
// value : 텍스트 박스 내부에 적힌 텍스트를 가져오기 위해
// ★【[txtLeft] 텍스트박스 오브젝트.value】 = 작성된 내용을 가져올 수 있다!
//alert(document.getElementById("txtLeft"));
//alert(document.getElementById("txtLeft").value);
// 둘 다 객체 타입으로 저장된다!!!
var txt01 = document.getElementById("txtLeft");
var txt02 = document.getElementById("txtRight");
}
function actionBtnB()
{
// 테스트
//alert("B버튼 클릭 확인~!!!");
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 기본 관찰</h1>
<hr>
</div>
<div>
<input type="text" class="box" id="txtLeft">
<input type="button" value="A버튼" class="btn" id="btnA" onclick="actionBtnA()">
<input type="button" value="B버튼" class="btn" id="btnB" onclick="actionBtnB()">
<input type="text" class="box" id="txtRight">
</div>
</body>
</html>'[Javascript] > Program source (Javascript)' 카테고리의 다른 글
'[Javascript]/Program source (Javascript)' Related Articles
more
