- 목차 -
★ 자바스크립트 기본문법1
- Variables, Operators
-> 변수 선언 및 규칙
-> 연산자(산술, 관계, 논리, 조건)
- Statement
-> 제어문(if, switch문)
-> 반복문(for문, while문, do while문)
- javascript function
-> 함수의 기본 형식
-> window 객체의 유용한 Method
-> 내장함수
1. 자바스크립트 변수 선언
- 변수란?
-> 메모리에 저장되는 기억장소의 이름
- 변수의 선언
var total
var aNum, bNum
var count = 10
- 변수선언 및 규칙
-> 대,소문자를 구별한다.
-> 변수명은 항상 알파벳이나 '_'로 시작
-> 특수문자 사용금지
-> 예약어(Reserved Word) 사용금지
<html>
<head>
<title>변수 선언</title>
<script language="javascript">
<!--
// var 변수명
var temp;
temp = 10;
Temp = "하하하"
document.write("temp값 : ", temp); // 10 출력
document.write("Temp값 : ", Temp); // "하하하" 출력
var temp1, temp2;
var temp3 = 10 // 변수 초기화 선언
var temp4 = 20
//-->
</script>
</head>
<body>
</body>
</html>
2. 자바스크립트 데이타 타입
- 숫자(number)
-> 정수 및 실수
- 문자열(string)
-> 영문이나 한글등 따옴표에 표현되는 글자
- Boolean
-> true, false 둘중에 하나만 가지는 형태
- null과 undefined
-> null은 변수에 값이 할당 안됨
-> undefined는 변수만 정의
- NaN(Not a Number)
-> 값이 숫자가 아님
<script>
myname="nana";
var myage=25;
var yourname="nene";
yourage=30;
yourage=25;
var ourage=25;
var zero;
var zero2=null; // 소문자 "null"
document.write("myname = "+ myname +"<br>"); // "nana" 출력
document.write("myage = "+myage+"<br>"); // 25 출력
document.write("yourname = "+yourname+"<br>"); // "nene" 출력
document.write("yourage = "+yourage+"<br>"); // 25 출력
document.write("ourage = "+ourage+"<br>"); // 25 출력
document.write("zero = "+zero+"<br>"); // "undefined" 출력
document.write("zero2 = "+zero2+"<br>"); // "null" 출력
3. 지역변수와 전역변수
- 지역변수(local variable)
-> 함수안에서 var를 사용하여 선언된 변수
-> 함수가 끝나고 나면 자동으로 사라짐
- 전역변수(global variable)
-> 함수 밖에 선언된 모든 변수
-> 함수 안에서 var 없이 선언된 변수
-> 함수가 끝나도 메모리에 남아 있음
<html>
<head>
<script>
var hello = "(함수 밖) 전역변수\'hello\'"
function thisfunction()
{
var hello = "(함수 안) 지역변수\'bye\'";
global = "(함수 안) 전역변수\'global\'";
var local = "(함수 안) 지역변수\'local\'";
window.alert(hello);
window.alert(global);
window.alert(local);
}
</script>
</head>
<body>
<input type="button" value="실행" onClick="thisfunction();alert(hello);alert(global);alert(local);"> // alert(local); 오류 메시지
</body>
</html>
4. JavaScript 연산자
- 산술연산자 *, /, +, -, %
- 관계연산자 ==, !=, <, <=, >, >=
- 논리연산자 ||, &&, !(not), ^(xor)
- 조건연산자 A = (조건) ? X : Y
- 증감연산자 ++, --
- 대입연산자 =, +=, -=, *=, /=, %=
5. JavaScript 연산자 우선순위
- 괄호/대괄호([], ())
- NOT, 증감연산자( !, ++, --)
- 산술연산자
- 관계연산자
- 논리연산자
- 대입연산자
6. JavaScript 제어문(if-else)
- if-else
-> if는 주어진 조건을 만족시키는 경우만 지정된 동작을 하도록 만들고 싶을 때 사용
if(조건)
{
문장
}
------------------
if(조건)
{
문장
}
else
{
문장
}
------------------
if(조건1)
{
문장
}
else if(조건2)
{
문장
}
else
{
문장
}
- switch
-> 다중 if처럼 변수에 따라서 선택적으로 상수로 분기하는 조건문
switch(변수)
{
case 상수1 :
문장;
break;
case 상수2 :
문장
break;
default :
문장;
}
7. JavaScript 제어문(for)
- for
-> 조건을 만족하는 동안 반복하는 제어문이나 초기 변수 값을 주고 이 변수값이 조건을 만족시키는 동안에만 기능을 동작시키도록 하는 제어문
for(초기값; 조건; 증가값)
{
문장
}
- while
-> while은 조건이 만족되는 동안 반복해서 지정된 기능을 수행시키고 싶을때 사용하는 반복 제어문
while(조건)
{
문장
}
- do while
-> 문장은 실행한 다음 조건을 확인하는 반복문
do
{
문장
}while(조건)
8. JavaScript에서 함수 사용
- 함수란?
-> 프로그램 내에서 특정 작업을 하기 위해 독립적으로 만들어진 하나의 단위
- 함수 정의
function 함수이름(매개변수1, 2..)
{
함수 문장
}
9. window 객체의 유용메소드
- alert method
-> 경고나 문제부분을 사용자에게 알리는 함수
-> window.alert(문자열)
- prompt method
-> 사용자의 입력을 받기 위한 대화상자
-> prompt(문자열, 초기값)
- confirm method
-> 사용자가 확인이나 취소를 선택하는 함수
-> confirm(문자열)
<html>
<head>
<title>소스4-1</title>
<script language="javascript">
<!--
window.alert("실전자바스크립트/n/n 강력해진 내 홈피...^0^")
//-->
</script>
</head>
</html>
<html>
<head>
<title>소스4-2</title>
<script language="javascript">
<!--
cancle=confirm("삭제하시겠습니까?")
if(cancle==ture)
document.write("삭제되었습니다.")
else
document.write("취소되었습니다.")
//-->
</script>
</head>
</html>
<html>
<head>
<title>소스4-3</title>
<script language="javascript">
<!--
var qs
qs=prompt("좋아하는 언어를 선택하세요. 1.자바 2.비주얼베이직 3.자바스크립트")
if(qs==1)
document.write("자바를 좋아하시는군요. ^^")
else if(qs==2)
document.write("비주얼베이직을 좋아하시는군요. ^^")
else if(qs==3)
document.write("자바스크립트를 좋아하시는군요. *^^*")
else
document.write("이런 잘못 선택하셨네요... 모두 싫으신가요? ^^")
//-->
</script>
</head>
</html>
10. 자바스크립트 내장함수
- eval(문자수식)
-> 문자열로 된 수식의 계산결과를 return하는 함수
-> 예) eval("2+3")
<script language="javascript">
<!--
var word, num
word="3*5"
num=3*5
document.write("word = "+word+"<br>")
document.write("eval(word) = " +eval+"<br>")
document.write("num = " +num+"<br>")
eval("var re"+ "sult=15") // 변수 선언 효과
document.write("rescult="+result+"<br>")
//-->
</script>
- parseFloat(문자수식)
-> 문자열을 실수로 return하는 함수
-> 예) parseFloat("15.5)
<script language="javascript">
<!--
var num1, num2, num3
num1 = "15.5"+15.3
num2 = parseFloat("15.5")+15.3
num3 = parseFloat("'15.5'+15.3")
document.write("1) "+num1+"<p>") // 15.515.3 출력
document.write("2) "+num2+"<p>") // 30.8 출력
document.write("3) "+num3+"<p>") // NaN 출력
//-->
</script>
- parseInt(문자수식)
-> 입력된 값을 정수로 return 하거나 특정 진수로 return하는 함수
-> 예) parseInt("17")+4 // 21 출력
parseInt("17",8) // 8진수 17를 10진수로 출력하면 '15' 출력
<script language="javascript">
<!--
var num1, num2, num3
num1 = parseInt("15", 8) // 8진수 15를 10진수로 표현하면 '13'
num2 = parseInt("15", 10) // 15
num3 = parseInt("15", 16) // 16진수 15를 10진수로 표현하면 '21'
document.write("1) "+num1+"<p>") // 13 출력
document.write("2) "+num2+"<p>") // 15 출력
document.write("3) "+num3+"<p>") // 21 출력
//-->
</script>
- escape() // 암호처리시 사용
-> 특수문자를 %문자열로 return하는 함수
-> 예) escape("$")
- unescape() // 암호처리시 사용
-> %문자열을 입력하면 특수문자 return하는 함수
-> 예) unescape("%24")
<script language="javascript">
<!--
var num1, num2
num1="$"
num2="&"
num3="!"
num4="?"
num5="%"
document.write("1) "+escape(num1)+"="+unescape("%24")+"<p>")
document.write("2) "+escape(num2)+"="+unescape("%26")+"<p>")
document.write("3) "+escape(num3)+"="+unescape("%21")+"<p>")
document.write("4) "+escape(num4)+"="+unescape("%3F")+"<p>")
document.write("5) "+escape(num5)+"="+unescape("%25")+"<p>")
//-->
</script>
- isNaN()
-> 입력된 값이 숫자인지 문자인지 판별해주는 함수
-> 예) isNaN("이건숫자냐?")
<script language="javascript">
<!--
var num1, num2
num1="숫자가아님"
num2=12345
document.write("1) " inNaN(num1) + "<p>") // true 출력
document.write("2) " inNaN(num2) + "<p>") // false 출력
//-->
</script>
<html>
<head>
<script language="javascript">
<!--
function num()
{
if((event.keyCode<48) || (event.keyCode>57))
{
event.returnValue=false;
}
}
//-->
</script>
</head>
<body>
<form>
전화번호 : <input type=text size=10 name="tel" onKeyPress="num();">
</form>
</body>
</html>
| 자바스크립트 네번째 요약정리 (0) | 2016.11.06 |
|---|---|
| 자바스크립트 세번째 요약정리 (0) | 2016.11.06 |
| 자바스크립트 첫번째 요약정리 (0) | 2016.11.05 |
| [Javascript] 아이프레임 링크 관련 소스 (0) | 2016.11.02 |
| [프로그래밍] 자바스크립트와 PHP를 연동 (0) | 2016.10.21 |