JavaScript 기초 Chapter 8 Part II

Slides:



Advertisements
Similar presentations
Copyright © 2015 Pearson Education, Inc. 6 장 : 프로그래밍 언어.
Advertisements

Copyright © 2006 The McGraw-Hill Companies, Inc. 프로그래밍 언어론 2nd edition Tucker and Noonan 5 장 타입 “ 타입은 컴퓨터 프로그래밍의 효소이다 ; 프로그래밍은 타입을 통해 소화할만한 것이 된다.” 로빈.
C 언어 컴퓨터학과 C 언어 ( STS ) (Chap5. Selection-Making Decisions ) C 언어.
CHAPTER 10. DOM과 이벤트 처리, 입력 검증.
제 1장 자바스크립트란 ?.
제 11 장 구조체.
PHP programming 2000년 11월 13일 데이터베이스 연구실 김호숙.
Chapter14 위치 정보 & 모바일 HTML5 Programming.
웹 2.0 및 Ajax 개요.
HTML과 CSS HTML과 CSS 세미나에 오신 것을 환영합니다.
CSS List & Table Chapter 5 Part 2
10장 동적 HTML (Dynamic HTML)
HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
제 1장 C 언어의 소개.
2017년 1월 교육 일정표 인재혁신센터 ※ 교육일정 및 담당자는 상황에 따라 변동될 수 있습니다.
제 4장 문 장 배정문 혼합문 제어문 표준 입출력.
구조체 활용 구조체 활용.
9장. 요청 흐름제어와 모듈화 #1: <jsp:forward> 액션태그 사용
10장. 에러 처리 제10장.
01. Index StarPlayer API Guide 01. Index 02. 상수값 정의 03. API 정의
Web Server와 DB 연동.
Chapter09 JavaScript 구구단표 만들기
HTML CSS 자바스크립트 무작정 따라하기
2. PHP 프로그래밍 웹 브라우저로 데이터 전송 주석 작성하기 변수/상수 문자열/숫자형 HTML 폼 만들기
9장 자바스크립트.
JavaScript.
HTML5 웹 프로그래밍 입문(교수용) 2장.HTML5 문서의 기본.
AJAX 커머스아이 박준열.
명품 Java Programming.
jQuery Chapter 12 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다.
5. JSP의 내장객체1.
Javascript Basic Sample Programs
HTML5+CSS3 실무 테크닉 김은기 저.
CHAPTER 8. 자바 스크립트 기초.
4. JSP의 스크립트 요소 Script 요소의 이해 선언문(Declaration) Scirptlet 표현식 주석
Cookie 와 Session.
Web Socket.
HTML5 웹 프로그래밍 입문 (개정판) 9장. 자바스크립트 객체와 DOM.
프로그래밍 원리 Chapter 05 자바스크립트 기초 신한대학교 IT융합공학부 박 호 균.
2003년도 학생용 달력 이 서식 파일을 인쇄해서 벽걸이 달력으로 사용할 수 있고 사용자의 프레젠테이션에 필요한 부분만 복사해서 사용할 수도 있습니다. 새 디자인 서식 파일을 적용하면 달력의 모양을 바꿀 수 있습니다.
Chapter11 웹 스토리지 & 웹 데이터베이스
JavaScript COOKIE Chapter 10 Part III
컴퓨터의 기초 제 2강 - 변수와 자료형 , 연산자 2006년 3월 27일.
기초 프로그래밍 Yang-Sae Moon Department of Computer Science
HTML 문서 작성 PART 1 Chapter 2 Part 1
인터넷응용프로그래밍 JavaScript(array).
제2장 제어구조와 배열 if-else 문에 대하여 학습한다. 중첩 if-else 문에 대하여 학습한다.
Chapter13 파일 접근 & 오프라인 접근 HTML5 Programming.
명품 웹 프로그래밍.
4장 - PHP의 표현식과 흐름 제어-.
3장. 변수와 연산자. 3장. 변수와 연산자 3-1 연산자, 덧셈 연산자 연산자란 무엇인가? 연산을 요구할 때 사용되는 기호 ex : +, -, *, / 3-1 연산자, 덧셈 연산자 연산자란 무엇인가? 연산을 요구할 때 사용되는 기호 ex : +, -, *, /
17장 웹 사이트 제작 완성 한빛미디어(주).
Java의 정석 제 4 장 조건문과 반복문 Java 정석 남궁성 강의
JavaScript 객체(objects)
[INA470] Java Programming Youn-Hee Han
LOGIN할 때 아이디, 비번 입력 여부 체크하기
교수와 함께하는 독서토론세미나 운영 안내용 PPT 중앙도서관 학술정보지원팀.
세션 (Session) Yang-Sae Moon Department of Computer Science
Chapter 08 조건문.
명품 웹 프로그래밍.
반복문의 기능 반복문 반복문 특정 영역을 특정 조건이 만족하는 동안에 반복 실행하기 위한 문장 while문
HTML HTML 기본 구조와 태그 다양한 태그 다루기
이번 시간에는... 지난 시간까지 2회차에 걸쳐 WML의 택스트 포맷, 이미지 처리, 페이지 이동, 태스크 수행과 이벤트 처리 및 WML 사용자 Input 처리 태그 등, WML 개발에 대해서 알아보았습니다. 이번 시간에는 2회차에 걸쳐, WML 스크립트 개발에 대해서.
2015 DESK CALENDER CHECK YOUR SCHEDULE FOR 365 DAYS.
Data Base Web Programming
DataScience Lab. 박사과정 김희찬 (화)
Choi Younghwan CSE HUFS
머니투데이 메인 UI수정 Moneytoday.co.kr - 작성자 : 한정환 - 작성일 :
PHP 기초문법 PHP를 공부하는데 있어 가장 기초가 되는 PHP기초문법에 대해서 배워 봅니다.
Python 기본.
Presentation transcript:

JavaScript 기초 Chapter 8 Part II 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 8 Part II

프로그래밍 언어의 요소 상수와 변수 연산자 배열 조건문 반복문(loop) 함수(function), 객체(class) 정수형/실수형: 1, 123, -5, 1.0, -1.2 문자형: “a”, “My Name is” Boolean: true, false 연산자 +, -, *, /, % 배열 array=[1,2,3]; name=[“John”,”Sam”] 조건문 if, if-else, if-else if-else, switch 반복문(loop) for, while, do while 함수(function), 객체(class) 표준 입력 및 출력

자바스크립트 문법 C 언어와 매우 유사 문장의 끝에는 semi-colon(;) block 지정은 중괄호( { } ) 사용 주석은 // 또는 /* */

자바스크립트 주석(comment) // Change heading: document.getElementById("myH").innerHTML = "My First Page"; // Change paragraph: document.getElementById("myP").innerHTML = "My first paragraph."; /* The code below will change the heading with id = "myH" and the paragraph with id = "myP" in my web page: */ document.getElementById("myH").innerHTML = "My First Page"; document.getElementById("myP").innerHTML = "My first paragraph.";

출력 document.write() alert() confirm() innerHTML HTML 문서에 결과를 출력 경고 창 confirm() 확인 창 innerHTML DOM에서 문서의 내용을 교체할 때 사용

예제 – js-output.html <!DOCTYPE html> <html> <head> <script> document.write("<h1>Welcome to the Javascript World!</h1>"); document.write("<h2>앞으로 고생 좀 많이 합시다.</h2>"); </script> </head>

예제 – js-output.html (계속) <body> <h1>My First Web Page</h1> <p>My First Paragraph.</p> <h3 id="demo" style="background-color:cyan">Hi!</h3> <button onclick="alert('This is ALERT!!! 경고');"> ALERT</button> <button onclick="confirm('Are you sure?');"> CONFIRM</button> <button onmouseover="changeDemo();" onmouseout="resetDemo();"> 여기에 마우스를</button> <button onclick="writeNewMsg();">여기 클릭</button>

예제 – js-output.html(계속) <script> function changeDemo() { document.getElementById("demo").innerHTML = "Hello. Welcome to My World!!!!!"; } function resetDemo() { document.getElementById("demo").innerHTML = "Hi!"; function writeNewMsg() { document.write("<h1>문서가 로드된 후에 document.write를 사용하면 새로운 페이지가 열려요.</h1>") </script> </body> </html>

변수 변수(variable)는 데이터를 저장하는 상자 var 키워드를 사용하여서 선언(declare)한다.

변수의 타입 숫자형 변수 문자형 변수 Boolean: true 또는 false의 값을 가지는 변수 자바스크립트에서는 정수형, 실수형을 구분하지 않는다. var a,b; // 변수만 선언 var a=1, b=5.0; // 변수 선언과 값 지정 동시에 s=a+b; // var 선언 없이 사용도 가능하다 // +는 덧셈 문자형 변수 var a,b; var a=“Computer ”, b=“Engineering”; s=a+b; // 문자열에서 +은 붙이기 Boolean: true 또는 false의 값을 가지는 변수 var result = true; result=false;

js-variables.html <!doctype html> <body> <script> var a=3; var name="Computer"; var bool=(3>4); document.write("a = " + a); document.write("<br>"); document.write("name = " + name); document.write("bool = " + bool); </script> </body>

연산자 문자형 변수에서의 덧셈(+) 연산자는 두 문자열을 합친다. a=“Computer ”; b=“Engineeing”; dept=a+b;  dept=“ComputerEngineering”이 된다.

js-number.html <!doctype html> <html> <body> <script> var a=31, b=5; document.write("a + b = " +(a+b) + "<br>"); document.write("a - b = " +(a-b) + "<br>"); document.write("a * b = " +(a*b) + "<br>"); document.write("a / b = " +(a/b) + "<br>"); document.write("a % b = " +(a%b) + "<br>"); // 31을 5로 나눈 나머지 document.write("a + b = " +a+b+ "<br>"); // 괄호에 조심하자… </script> </body> </html>

document.write()로 표 만들기 document.write()함수를 이용하여 출력할 때 HTML 문서 작성시와 같이 태그를 사용하여 출력한다.

js-table-1.html <!doctype html> <html> <head> <style> td {width:50px} </style> </head> <body> <script> var colorR="#FF0000", colorG="#00FF00", colorB="#0000FF"; document.write("<table border=1 cellspacing=0>\n"); document.write("<tr>"); document.write("<td>"+colorR+"</td>"); document.write("<td style=background-color:"+colorR+"> </td>\n"); document.write("<td>"+colorG+"</td>"); document.write("<td style=background-color:"+colorG+"> </td>\n"); document.write("<td>"+colorB+"</td>"); document.write("<td style=background-color:"+colorB+"> </td>\n"); document.write("</tr>\n"); document.write("</table>"); </script> </body> </html>

엄청 긴 문자열 만들어 출력하기 자바스크립트로 한 요소(예: 테이블, 리스트 등)을 하나의 문자열로 만들어 출력하는 경우가 많다. var str=“”; // 빈 문자열 선언 str += “<ul>”; // += 연산자를 이용하여 문자열 합치기 str += “<li>리스트1</li>”; // str+=“A” --> str = str + “A” str += “<li>리스트2</li>”; str += “</ul>”; document.write(str); // 마지막에 str을 출력하면 리스트 완성

js-table-2.html 문자열 변수 table에 표만들기 소스 코드를 모두 모두 합쳐서 하나의 변수로 작성한 후, 출력 <!doctype html> <html> <head> <style> td {width:50px} </style> <script> function insertTable() { var table; var colorR="#F00", colorG="#0F0", colorB="#00F"; table = "<table border=1 cellspacing=0>\n"; table += "<tr>"; table += "<td>"+colorR+"</td>"; table += "<td style=background-color:"+colorR+"> </td>\n"; table += "<td>"+colorG+"</td>"; table += "<td style=background-color:"+colorG+"> </td>\n"; table += "<td>"+colorB+"</td>"; table += "<td style=background-color:"+colorB+"> </td>\n"; table += "</tr>\n"; table += "</table>"; document.getElementById("place").innerHTML=table; } </script> </head>

문자열을 생성하여 원하는 위치(요소)에 출력하기 아이디로 요소의 위치를 찾아 내용을 바꿀 수 있다. document.getElementById(“”).innerHTML=문자열

js-table-3.html <!doctype html> <html> <head> <style> td {width:50px} </style> <script> function insertTable() { var table; var colorR="#FF0000", colorG="#00FF00", colorB="#0000FF"; table = "<table border=1 cellspacing=0>\n"; table += "<tr>"; table += "<td>"+colorR+"</td>"; table += "<td style=background-color:"+colorR+"> </td>\n"; table += "<td>"+colorG+"</td>"; table += "<td style=background-color:"+colorG+"> </td>\n"; table += "<td>"+colorB+"</td>"; table += "<td style=background-color:"+colorB+"> </td>\n"; table += "</tr>\n"; table += "</table>"; document.getElementById("place").innerHTML=table; }

js-table-3.html(계속) function hideTable() { document.getElementById("place").innerHTML="없어졌지롱"; } </script> </head> <body> <h1>테이블을 만들어 봅시다.</h1> <p id=place>요기가 테이블 들어올 자리</p> <button onclick=insertTable()>Create Table</button> <button onclick=hideTable()>Hide Table</button> </body> </html>

제어문

조건문의 종류 if 문 if...else 문 switch 문

비교 연산자와 논리연산자 and: && or: || not: !

js-if.html <!doctype html> <html> <body> <script> var msg = ""; var time = new Date().getHours(); if (time < 12) { // 12시 이전이면 msg = "Good Morning"; } else if (time < 18) { // 오후 6시 이전이면 msg = "Good Afternoon"; else { // 그렇지 않으면(오후 6시 이후이면) msg = "Good evening"; alert(msg); </script> </body> </html>

js-numberGame.html <html> <head> <title></title> <script> var computerNumber; // 정답 var nGuesses = 0; // 추측 횟수 function createNumber() { computerNumber = Math.round(Math.random()*100); // 난수로 생성 document.getElementById("ans").innerHTML=computerNumber; } function guess() { var result = ""; // 결과 메시지 // 사용자가 입력한 값을 받아서 변수 number에 대입한다. var number = Number(document.getElementById("user").value); nGuesses++; // 추측 횟수를 증가시킨다. if (number == computerNumber) result = "성공입니다."; else if (number < computerNumber) result = "낮습니다."; else result = "높습니다."; document.getElementById("result").value = result; document.getElementById("guesses").value = nGuesses; </script> </head>

js-numberGame.html(계속) <body onload=createNumber()> <h2>숫자 맞추기 게임</h2> 이 게임은 컴퓨터가 생성한 숫자를 맞추는 게임입니다. 숫자는 1부터 100 사이에 있습니다. <form> 숫자: <input type="text" id="user" size="5"> <input type="button" value="확인" onclick="guess();"> 추측횟수: <input type="text" id="guesses" size="5"> 힌트: <input type="text" id="result" size="16"> </form> <p id="ans" style="color:white"></p> </body> </html>

switch 문 switch(expression) { case 값1: statement1; break; case 값2: default: statement3; }

사용 예 switch (new Date().getDay()) { case 0: day = "Sunday"; break; day = "Monday"; case 2: day = "Tuesday"; case 3: day = "Wednesday"; case 4: day = "Thursday"; case 5: day = "Friday"; case 6: day = "Saturday"; }

예제 – js-switch.html <!doctype html> <html> <body> <script> var grade = prompt("성적을 입력하시오:", "A-F사이의 문자로"); switch (grade) { case 'A': alert("잘했어요!"); break; case 'B': alert("좋은 점수군요"); case 'C': alert("괜찮은 점수군요"); case 'D': alert("좀더 노력하세요"); case 'F': alert("다음 학기 수강하세요"); default: alert("알 수 없는 학점입니다.") } </script> </body> </html>

반복문 같은 처리 과정을 여러 번 되풀이하는 것 for, while문이 있다.

while 문

<script> var i = 0; while (i < 10) { document.write("카운터 : "+i+"<br>"); i++; } </script>

for 문

<script> for (i = 0; i < 10; i++) { document.write("카운터 : "+i+"<br>"); } </script>

예제- js-for.html <!doctype html> <body> <script> for(i=1; i<=6; i++) { document.write("<h"+i+">"); document.write("This is Heading"+i+"."); document.write("</h"+i+">"); } </script> </body>

nested for loop for loop안에 또 for loop를 사용하는 것을 nested loop(중첩 for문)이라고 한다. for(i=0; i<10; i++) { for(j=0; j<10; j++) { }

js-nestedloop.html <html> <head> <style> table,td {border:1px solid black;;border-collapse:collapse} td {width:50px} </style> </head> <body> <script> document.write("<h1>표 만들기</h1>"); document.write("<table>"); var k=1; for (var i = 1; i <= 5; i++) { document.write("<tr>"); for (var j = 1; j <= 7; j++) { document.write("<td>" + (k++) + "</td>"); } document.write("</tr>"); document.write("</table>"); </script> </body>

배열 많은 값을 저장할 수 있는 공간이 필요할 때 배열을 사용한다. 서로 관련된 데이터를 차례로 접근하여서 처리할 수 있다.

배열을 생성하는 2가지 방법 리터럴로 배열 생성 Array 객체로 배열 생성 var fruits = ["apple", "banana", "peach"]; Array 객체로 배열 생성 var fruits=new Array(“apple",“banana",“orange“);

예제 – js-array.html <!DOCTYPE html> <html> <body> <script> var i; var fruits = new Array(); fruits[0] = "Apple"; fruits[1] = "Banana"; fruits[2] = "Orange"; for (i = 0; i < fruits.length; i++) { document.write(fruits[i] + "<br>"); } </script> </body> </html>

함수 함수는 입력을 받아서 특정한 작업을 수행하여서 결과를 반환하는 블랙 박스

예제 – js-function.html <!DOCTYPE html> <html> <head> <script> function showDialog() { alert("안녕하세요?"); } </script> </head> <body> <button onclick="showDialog()">대화상자오픈</button> </body> </html>

인수와 매개 변수 <!DOCTYPE html> <html> <head> <script> function greeting(name, position) { alert(name + " " + position + "님을 환영합니다."); } </script> </head> <body> <button onclick="greeting('홍길동', '부장')">눌러보세요!</button> </body> </html>

함수의 반환값 return 문장을 사용하여 외부로 값을 반환

지역변수와 전역변수 변수는 프로그램이 실행중 저장 공간으로 사용되고 프로그램이 종료하면 없어진다. 지역변수는 함수가 호출되어 실행될때 사용되고 함수의 호출이 끝나면 소멸된다. 전역변수는 프로그램 어디에서나 사용할 수 있는(값의 지정이 가능한) 변수이다. 함수 외부에서 변수 선언한다.

Js-global.html <!doctype html> <body> <script> var number=0; document.write("<p>처음에는 number is "+number+"</p>"); function myFunction1() { var number=20; document.write("<p>함수1에서는 number is "+number+"</p>"); } myFunction1(); document.write("<p>함수1 호출이 끝나고 난 후에는 number is "+number+"</p>"); function myFunction2() { number=40; document.write("<p>함수2에서는 number is "+number+"</p>"); myFunction2(); document.write("<p>함수2 호출이 끝나고 난 후에는 number is "+number+"</p>"); </script> </body>