대화상자

Programming/Javascript | 2012. 12. 16. 19:57
Posted by 오요미

경고대화상자(alert) : window.alert()메서드

입력대화상자(prompt) : window.prompt()메서드(거의 사용안함.)

확인대화상자(confim) : 확인또는 취소버튼 대화상자를 만듬

=============================================================================================

<script language = "javascript" type="text/javascript">

//[1]경고 대화상자

window.alert("안녕하세요. javascript");

//[2]escape sequence : 특수문자, \n줄바꿈, \t 탭이동, 백스페이스\b

//window객체 생략가능

alert("안녕하세요. \n\t 반갑습니다.");

//[3]입력대화상자 : 가능한 사용하지말자, os마다 차이가 잇음

//var reslt=window.prompt("당신의 성적은?","여기에 입력");

//document.write("당신의 성적은" + result + "입니다.<br />");

//[4] 확인 대화 상자

var word = window.confirm("확인 또는 취소")?"확인클릭":"취소클릭";

alert(word + "을(를) 선택하셨군요.");

</script>

'Programming > Javascript' 카테고리의 다른 글

구구단 만들기  (0) 2012.12.16
제어문  (0) 2012.12.16
연산자 & 우선순위  (0) 2012.12.16
개발자 도구(F12)  (0) 2012.12.16
변수와 연산자  (0) 2012.12.15
 

연산자 & 우선순위

Programming/Javascript | 2012. 12. 16. 17:07
Posted by 오요미

  1. 연산자 우선순위

    괄호/대괄호 : [],{}

    부정/증감 : !, ++, --

    .산술 : *, /, %, +, -

  1. 비트식 : <<, >>, >>>

    관계 : <. >, <=, >=, ==, !=

    비트식 : &, ^, |

    논리 : &&, ||, ?:

    대입/할당 : =, +=, -=, *=, >>=, ^=

    ==================================================================================

<script language = "javascript" type="text/javascript">

//산술 연산자 : +. -, *, /, %

var intNum1 = 10;

var intNum2 = 3;

document.write(intNum1 + intNum2 + "<br />"); //13

document.write(intNum1 % intNum2 + "<br />"); //1

document.write("<br />");

//비교(관계)연산자 : ==, !=, >=, >, <=,<

var a=3;

var b=5;

document.write((a==b)+"<br />"); //false

document.write((a!=b)+"<br />"); //true

document.write("<br />");


//논리연산자 : &&(and), ||(or), !(not)

document.write((10>5)&&(5!=3) +"<br />"); //true

//프로그래밍 성능을 위해 &&일 경우 거짓을 앞에다=>&&는 하나만 거짓이면 거짓이므로..

document.write(((10>=5)||(5==3)) +"<br />"); //true

//앞의 결과값이 참이면 뒤의 피연산자를 무시한다.

document.write(!(10<=5)); //true

document.write("<br />");

//조건연산자(3항 연산자)

var result = (3%2==0)?"짝수":"홀수";

//document.write("결과값 : "+result); //홀수

//documnet.write((4%2!=1)?"<br />짝수":"<br />홀수");

//증감연산자 : ++, --, 전위 : 우선 증가/감소, 후위 : 라인실행 후 나중실행

var a=3;

var b=5;

var c= ++a - (--b);

document.write(c + "<br />"); //0

var c= a++ - (b--);

document.write(c + "<br />");


//대입(할당)연산자 : +=,-=,*=, /=, %=

var a=10;

var b=5;

a+=b;

document.write(a + "<br />"); //15

b-=5;

document.write(b + "<br />"); //0

var c=1;

c=c+1;

c+=1;

c++;

document.write(c + "<br />"); //4출력

</script>

============================================================================

<script language="javascript" type="text/javascript">

var a=1;

var b=2;

var c=3;

document.write("안녕" +2+2+ "<br />"); //안녕22

document.write("" +2+2+"<br />"); //22

document.write("" +(2+2)+ "<br />"); //괄호우선 : 4

document.write(2+2+""+ "<br />"); //정수 덧셈 : 4

document.write((a=b)==2,"<br />"); //a(2) : true

document.write(a=b ==1, "<br />"); //a(false)

document.write(b<35 && b>1, "<br />"); //true

document.write(-2*2+4-2, "<br />"); //-2

document.write(a<b<c); //true

</script>

'Programming > Javascript' 카테고리의 다른 글

제어문  (0) 2012.12.16
대화상자  (0) 2012.12.16
개발자 도구(F12)  (0) 2012.12.16
변수와 연산자  (0) 2012.12.15
복습(DHTML)  (0) 2012.12.15
 

개발자 도구(F12)

Programming/Javascript | 2012. 12. 16. 14:42
Posted by 오요미

IE에서 F12키를 눌러서 개발자 도구 실행 할수 있다. 여러 웹 브라우저들도 개발자 도구를 지원한다.


alert("안녕하세요");
undefined
134
134
3+8
11
typeof 1234        //typeof 연산사로 자료형을 알수 있다.
"number"
var str;typeof "안녕"
"string"
undefined
typeof str
"undefined"
str="할당됨"
"할당됨"
typeof str
"string"
1>0
true
38==="38"       //triple equals 연산자(값과 자료형 모두가 같아야함)
false
4e-3            //지수표현식
0.004
4e+3
4000
010               //8진수 표현
8
0x10               //16진수 표현
16
""
""
''
""
"안녕 \n 반갑습니다.";
"안녕 반갑습니다."
var a="1234";

"
string"typeof a;
a
"1234"

'Programming > Javascript' 카테고리의 다른 글

대화상자  (0) 2012.12.16
연산자 & 우선순위  (0) 2012.12.16
변수와 연산자  (0) 2012.12.15
복습(DHTML)  (0) 2012.12.15
자바스크립트의 기본 출력문  (0) 2012.12.15
 

변수와 연산자

Programming/Javascript | 2012. 12. 15. 01:00
Posted by 오요미
  1. 자료형(데이터 유형 : Data Type)
    1. 정수형
    2. 부동소수점(실수형)
    3. Boolean
    4. Null
    5. 문자열 : "",''에 들어가는 문자
  2. 변수
    1. 프로그램 코드상에서 임시로 데이터를 저장해 놓는 그릇(ex. var xxx)
    2. javascript의 예약어는 변수로 사용할 수 없다.
    3. 데이터형 변환 : 기준값은 문자형으로..
  3. 연산자
    1. 산술연산자
    2. 연결연산자
    3. 관계연산자
    4. 논리연산자
    5. 조건연산자
    6. 비트연산자
    7. 증감연산자
    8. 대입연산자
  4. 연산자 우선순위

=====================================================================================

<script language = "javascript" type="text/javascript">

//변수 선언

var a;

//변수 초기화

a = "안녕<br />";

//변수 참조(사용)

document.write(a);

//변수를 선언과 동시에 초기화

var intNum = 100; //정수형;대소문자구분

var dblSu = 12.34; //실수형

var blnFlag = true; //불린값(참 또는 거짓): true/false

var objNothing = null; //널값 : 아무것도 아닌 값(빈값과 다르다.)

var strHello = "안녕하세요."; //문자열 : 큰 따옴표로 묶는다.

//사용(참조)

document.write(intNum + intNum + "<br />"); //200

document.write(dblSu + intNum + "<br />"); //112.34

document.write(blnFlag + "<br />"); //true

document.write(objNothing + "<br />"); //null

document.write(strHello + "<br />"); //안녕하세요.

</script>

'Programming > Javascript' 카테고리의 다른 글

연산자 & 우선순위  (0) 2012.12.16
개발자 도구(F12)  (0) 2012.12.16
복습(DHTML)  (0) 2012.12.15
자바스크립트의 기본 출력문  (0) 2012.12.15
객체, 속성, 메서드, 이벤트 용어 설명  (0) 2012.12.14
 

복습(DHTML)

Programming/Javascript | 2012. 12. 15. 00:37
Posted by 오요미

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>복습</title>

<style type = "text/css">

body, td, input

{

color:blue;

font-size:12px;

font-family;Verdana 굴림;

}

</style>

<script language = "javascript" type="text/javascript">

document.write("복습<br />");

</script>

</head>

<body>

<div style = "background-color:yellow;" 

onclick="window.alert('클릭하셨군요/');"

onmouseover="this.style.backgroundColor='grey';"

onmouseout="this.style.backgroundColor='yellow';">

<!-- 마우스가 해당 줄을 벗어났을때  -->

<!-- html+css+javascript = DHTML -->

<span>안녕</span>

</div>

</body>

'Programming > Javascript' 카테고리의 다른 글

개발자 도구(F12)  (0) 2012.12.16
변수와 연산자  (0) 2012.12.15
자바스크립트의 기본 출력문  (0) 2012.12.15
객체, 속성, 메서드, 이벤트 용어 설명  (0) 2012.12.14
javascript 작성시 주의점  (0) 2012.12.13
 

자바스크립트의 기본 출력문

Programming/Javascript | 2012. 12. 15. 00:35
Posted by 오요미

문서에 출력 : document.write()메서드

메시지박스(경고 대화 상자) 출력 : window.alert()메서드

===============================================================

<script language = "javascript" type="text/javascript">

//[1]

document.write("여기에 결과 값 출력<br />");

//document : html body와 같은 영역이다. 따라서 html태크, css소스를 출력할 수 있다.

window.document.write("window 객체는 생략 가능하다<br />");

//원칙적으로 write메서드는 위의 형태이며 모든 객체의 최상위 조상은 window이다.

//[2]

window.alert("메시지박스 결과 값 출력");

alert("역시 window 객체는 생략 가능");

</script>

'Programming > Javascript' 카테고리의 다른 글

변수와 연산자  (0) 2012.12.15
복습(DHTML)  (0) 2012.12.15
객체, 속성, 메서드, 이벤트 용어 설명  (0) 2012.12.14
javascript 작성시 주의점  (0) 2012.12.13
3.자바스크립트삽입방법  (0) 2012.12.13
 


-이해해야 할 개념

객체(object) : 데이터를 지닐 수 있음, 어떤 동작을 수행할 수 있는 하나의 단위

속성(property) : 객체가 지니는 성질, 특성, 색상 등의 표현

메서드(method) : 객체의 동작 수행 능력(자동차의 기어변속, 좌회전, 우회전, 후진)

이벤트(event) : 객체의 동작 수행의 결과/신호(자동차가 전진하다 전신주를 받았을 때 어떤 결과 : 사고발생=이벤트)


<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script language = "javascript" type="text/javascript">

document.write("1. 객체.메서드()");

document.title = "2. 객체.속성"; //title이 수정됨

//이벤트는 스크립트 블럭에서 작성 불가능, html과 함께 이벤트핸들러로만 사용가능 on~

</script>

</head>

<body>

<input type = "button" value="클릭" onclick="window.alert('안녕');"/>

</body>

'Programming > Javascript' 카테고리의 다른 글

복습(DHTML)  (0) 2012.12.15
자바스크립트의 기본 출력문  (0) 2012.12.15
javascript 작성시 주의점  (0) 2012.12.13
3.자바스크립트삽입방법  (0) 2012.12.13
2. 자바스크립트 삽입방법  (0) 2012.12.13
 

javascript 작성시 주의점

Programming/Javascript | 2012. 12. 13. 23:37
Posted by 오요미

<!-- javascript의 기본형태 -->

<script language="javascript" type="text/javascript">

//스크립트 블럭이 많이 들어가도 상관없다, 버전도 상관없다.

document.write("마지막 버전");

</script>


<br />

<script language = "javascript1.3" type = "text/javascript">

docment.write("1.3버전");

</script>

<br />


<script language = "javascript" type="text/javascript">

//넷스케이프 이외의 브라우저 중에서 script 태그를 지원하지 않을 수 있다.

//모바일웹브라우저의 경우 javascript를 해석할 수 없는 경우도 있기 때문에 html주석으로 하도록 한다.

<!--

document.write("자바스크립트를 알지 못하는 웹브라우저를 위해서");

-->

</script>

<script language="javascirpt" type="text/javascript">

<!--

//여기에 경고 대화상자를 하나 출력 

/*

메시지박스를 출력하고자 할때는 window.alert() 명령어를 사용한다.

*/

window.alert("경고 대화상자 출력");

-->

</script>


 

3.자바스크립트삽입방법

Programming/Javascript | 2012. 12. 13. 23:10
Posted by 오요미

<body>

<!-- 3. on~ 속성에다 javascript명령을 직접삽입하는 방법 -->

<input type = "button" value="버튼" style = "background-color:Yellow; border:solid 1px red;"

onclick="window.alert('클릭');"onmouseover="this.style.backgroundColor='green';"/>

</body>


=> 버튼을 마우스로 클릭하면 alert창이 뜨고 버튼 위에 마우스를 갖다대면 버튼 색이 녹색으로 변한다.

(backgroundColor:대소문자주의)

 

2. 자바스크립트 삽입방법

Programming/Javascript | 2012. 12. 13. 22:43
Posted by 오요미

html파일

<body>
<!-- javascript와 html코드를 분리 -->
<script language = "text/javascript" type = "text/javascript" src="js/Alert.js"></script>
<body></body>
</html>
====================================================================================
ALert.js파일
window.alert("외부에 자바스크립트 코드 사용");
document.write("메시지박스 출력 후 문서 영역에 출력");


 
블로그 이미지

오요미

공부할 수 있는 순간을 감사하며 공부하라.

카테고리

분류 전체보기 (121)
Electronics (1)
Programming (72)
Culturallife (30)
English (11)
취업 (1)
대학원 (4)
Life (1)