<style type="text/css">
table{
background-color: #EAEAEA
border-collapse: collapse;
font-size: 14px;
}
em{
font-style: normal;
font-weight: bolder;
color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
document.write("<h2>자바스크립트 기본구조</h2><hr>");
</script>
<table border="1">
<tr style="background-color: blue; color: white;">
<th width="100">종류</th>
<th width="200">자바스크립트</th>
<th width="200">자바</th>
</tr>
<tr>
<td align="center">작성방법</td>
<td>HTML내에 직접삽입</td>
<td>별도의 파일로 작성</td>
</tr>
<tr>
<td align="center">실행방식</td>
<td>클라이언트에서 직접<br>해석되고 실행</td>
<td>서버에서 컴파일된 후<br>클라이언트에서 실행</td>
</tr>
<tr>
<td align="center">객체지향</td>
<td>객체<em>기반</em>언어</td>
<td>객체<em>지향</em>언어</td>
</tr>
<tr>
<td align="center">변수선언</td>
<td>자료선언이 불필요</td>
<td>반드시 자료선언 필요</td>
</tr>
<tr>
<td align="center">보안성</td>
<td>브라우저의 메뉴를 통해<br>소스를 볼 수 있어<br>보안에 취약</td>
<td>소스를 볼 수 없으므로<br>보안유지가 가능</td>
</tr>
</table>
</body>
script작성위치
- head, body에 직접 작성
- 외부파일로 작성해서 link 할 수도 있음
- 태그안에 속성으로 직접 작성할 수도 있음
<script type="text/javascript">
function over(obj){
obj.src = "img/ku2.jpg";
}
function out(obj){
obj.src = "img/ku1.jpg"
}
</script>
</head>
<body>
<h3>마우스를 올려보세요</h3>
<hr>
<script type="text/javascript">
document.write("<h3>body속에 필요한 위치에 작성할 수 있다</h3>")
</script>
<img src="img/ku1.jpg" onmouseover="over(this)" onmouseout="out(this)">
</body>
</html>
<link rel="stylesheet" type="text/css" href="javascript.css"> css
<title>Insert title here</title>
<script type="text/javascript" src="javascript.js"></script> javascript
</head>
<body>
<hr>
<p>CSS 스타일시트를 외부파일로 작성해서 불러오고<br>
Script를 외부파일로 작성해서 불러와 비교해보자.
</p>
<hr>
<script type="text/javascript" src="javascript.js"></script>
</body>
<body>
<h3>자바스크립트 작성</h3>
<hr>
<a href="javascript:alert('클릭하셨네용ㅇㅅㅇ')">클릭해보세요</a>
</body>
</html>
출력
document.write("<h"+i+">"+"점심시간입니다"+"</h"+i+">"); i:숫자
document.writeln("<br>")
줄바꿈: <br>
<body>
<h3>document.write()</h3>
<hr>
<script type="text/javascript">
document.write("<h2>Welcome</h2>");
document.write("2 + 5는 <br>");
document.write("<mark>7입니다</mark>");
</script>
</body>
사용자에게 메시지 출력이나 입력을 받을 수 있는 3가지 다이얼로그를 제공한다.
- prompt("메시지","폴트값"); - 문자열을 입력받아서 리턴
- 아무것도 입력되지 않으면 ""
- 취소 또는 강제종료하면 null을 리턴
- confirm("메시지"); - 확인/취소 버튼이 있음
- 확인을 누르면 true값을 반환, 취소를 누르면 false값을 반환
- alert("메시지"); - 단순하게 메시지를 전달하기 위해 사용
<script type="text/javascript">
var ret = prompt("이름을 입력해 주세요","서대길");
if(ret == null){
document.write("<h1>취소버튼이나 다이얼을 닫았습니다.</h1>");
} else if(ret == ""){
document.write("문자열 입력없이 확인을 누르셨습니다.");
} else{
document.write("<h3>입력하신 문자열은 <strong>"+ret+"</strong>입니다.</h3>");
}
</script>
<script type="text/javascript">
var ret = confirm('전송할까요?');
if(ret == true){
document.write("확인버튼을 누르셨습니다.");
}
else{document.write("취소버튼을 누르셨습니다.");
document.write("강제로 닫았을 수도 있습니다.");
}
</script>
. 식별자
: 변수, 상수, 함수에 붙이는 이름(내가 이름을 만들어야 하는 것)
. 식별자 규칙
- 첫번째 문자는 숫자불가
- 첫번째에 올수 있는 특수문자는 $,_ 만 가능
- 대소문자 구분됨 (Num과 num은 다름)
. 문장(실행문)의 구분은 세미콜론(;)으로 반드시 해줘야 함
. 주석문 : // 한줄주석, /* ~~ */ 여러줄 주석 ( 범위잡고 ctrl+shift+/ )
<script type="text/javascript">
//var student_ID = "컴공2202_1"; //첫글자 숫자는 불가
//document.write(2022student_ID);
//var if="가나다"; //예약어는 사용불가
var %calc= : "500%" //%로 시작불가
</script>
변수(variable)란?
- 어떤 형태의 값을 저장하기 위한 공간이다.
- 공간을 확보하기 위해서는 변수선언이 필요하고
- 변수를 선언하기 위해서는 변수가 가질 수 있는 값의 종류 (자료형)와
그 변수를 구분할 수 있는 식별자가 필요한다.
선언자 변수명 = 할당 할 값 ;
var st_id = "2022컴공";
let
const
- 작명법
. 카멜 표기법 : 소문자로 시작하고 단어마다 대문자로 시작>> idStudent
. 스네이크 표기법 : num_student_2022
. 파스칼 표기법 : IdStudent
. 헝가리언 표기법: intNumberName
- 선언자 종류
. var
var x = 5; 문자, 숫자, 객체, 함수 모두 담을 수 있다.
var y = 6;
var z = x + y;
var x = 7; 중복선언으로도 오류가 발생되지 않음(정상)
. let (변수)
let x; //변수 선언
x = 5; //변수를 초기화
let y = 6;
let z = x + y;
x = 10;
let x = 7; 중복선언으로 오류발생
. const (상수)
const x = 5;
const y = 6;
const z = x + y;
x = 10; 중간에 값을 변경했으므로 오류
- 변수의 종류 : 지역변수, 전역변수, 블록변수
<script type="text/javascript">
document.write("<h3>자바스크립트에 오신 것을 환영합니다</h3>");
let strName = prompt("이름을 입력해주세요");
let strAge = prompt("나이를 입력해주세요");
//document.write("당신의 이름은"+strName+"이고, 나이는"+strAge+"입니다.");
const PI = 3.14;
PI = 10; //자바에서는 final static int PI = 10;
document.write(PI);
</script>
<body>
<h3>지역변수와 전역변수</h3>
<hr>
<script type="text/javascript">
var x = 100;
function f() {
var x = 1;
document.write("지역변수: "+x);
document.write("<br>");
document.write("전역변수: "+this.x);
}
f();
document.write("<br>"+x);
</script>
</body>
. 데이터 타입
- 자바스크립트가 다룰 수 있는 데이터 종류
. 숫자 타입 (Number)
. 논리 타입 (Boolean) - true, false
. 문자열 타입 (String)
. undefined - (값이 없음) 실행하면서 자동으로 저장
. null - (값이 없음) 개발자가 직접
. NaN - 숫자가 아닌 데이터
. 객체참조타입
<script type="text/javascript">
var num1 = 42; // 변수에 정수도
var num2 = 3.14; // 변수에 실수도 구분하지 않고 저장가능
var b = true; // 변수에 boolean 값도 저장 가능
document.write(b);
var string1 = "끝났습니다."; //따옴표 하나 또는 둘 가능 - 문자
var string2 = "ㅇㅅㅇ";
var x;
function f() {
var y; //지역변수
x = 10; //전역변수
y = 20; //지역변수
z = 30; //전역변수
}
function f2() {
var x ; //지역변수
x=1; //지역변수에 값 대입
this.x=100 //전역변수에 값 대입
}
</script>
script작성위치
- head, body에 직접 작성
- 외부파일로 작성해서 link 할 수도 있음
- 태그안에 속성으로 직접 작성할 수도 있음
<script type="text/javascript">
function over(obj){
obj.src = "img/ku2.jpg";
}
function out(obj){
obj.src = "img/ku1.jpg"
}
</script>
</head>
<body>
<h3>마우스를 올려보세요</h3>
<hr>
<script type="text/javascript">
document.write("<h3>body속에 필요한 위치에 작성할 수 있다</h3>")
</script>
<img src="img/ku1.jpg" onmouseover="over(this)" onmouseout="out(this)">
</body>