프로그래밍 원리 Chapter 05 자바스크립트 기초 신한대학교 IT융합공학부 박 호 균
이번 장에서는 무엇을 다룰까요? 자바스크립트를 작성 기초
강의 주제 및 목차 자바스크립트 기초 강의 주제 자바스크립트 기본 형식 목 차 입출력과 자료처리 함수(Function) 1 2 목 차 2 입출력과 자료처리 3 함수(Function)
1. 자바스크립트 기본 형식
자바스크립트의 특징 자바스크립트? 자바스크립트의 특징 썬마이크로시스템과 넷스케이프 커뮤니케이션에서 공동 제작한 웹 브라우저용 언어 객체지향 프로그램 언어 독립적으로 실행되지 않고, 주로 HTML 언어에 포함되어 실행(홈페이지 제작에 주목적) 자바스크립트의 특징 브라우저의 인터프리터가 소스코드를 실행. 번역기(Compiler) 불필요 다른 언어로 작성된 프로그램(Java, PHP, HTML 등)들에 포함되어서 실행 클라이언트에서 실행되어 N/W을 통한 데이터 전송 없이 작업 처리 가능 변수를 선언할 때 자료형 구분 없이 예약어 var로 선언
자바스크립트 기본 형식 자바스크립트 기본 형식 HTML문서 안에서 <script>태그를 사용하여 코딩 사용 스크립트가 javascript임을 명시적으로 선언
자바스크립트 기본 형식 자바스크립트 기본 형식 JavaScript 소스 코드를 외부에 파일(*.js)로 저장해 두고 HTML문서에 포함시켜 사용할 것임을 선언
자바스크립트 기본 형식 자바스크립트 실습 (1) BODY내 <SCRIPT>태그에서 JavaScript 직접 작성하는 예제 <html> <head> <title>BODY에서 자바스크립트 태그 사용</title> </head> <body> <h1>BODY에서 자바스크립트 태그 사용 실습</h1> <SCRIPT> document.write("<H2>BODY에서 자바스크립트 태그 출력 결과</H2>"); document.write("자바스크립트 사용 성공<BR>"); </SCRIPT> </body> </html> [실행 결과]
자바스크립트 기본 형식 자바스크립트 실습 (2) HTML 문서에 외부의 JavaScript 파일(*.js)을 사용할 것을 선언하는 예제 <html> <head> <title>BODY에서 자바스크립트 외부파일 선언</title> </head> <body> <h1>BODY에서 자바스크립트 파일 선언 실습</h1> <SCRIPT LANGUAGE = "JavaScript" SRC="test1.js"> </SCRIPT> </body> </html> document.write("<H2>test1.js 파일 출력 결과</H2>"); document.write("외부 스크립트 연동 성공<BR>"); [test1.js 파일] [실행 결과]
자료형 변수에 저장되는 자료형은 정수, 실수, 문자, 논리형 등으로 구분 자료형 변환
3. 입출력과 자료 처리
자료의 입력 키보드로 자료를 입력 받을 때 : prompt()함수 prompt() 함수 - 형식 : var 변수명 = prompt(“메시지”, “초기값”); - prompt()함수는 문자열 형태의 자료 입력만 받게 되므로 숫자를 입력하여도 문자열로 처리된다. var name; name = prompt(“이름을 입력해 주세요”);
자료의 입력 실습) 키보드로 두 수를 입력 받아 합을 출력하는 예제 왜 이런 결과가 나왔을까??? <html> <head> <title>prompt()함수 실습(1)</title> </head> <body> <SCRIPT> var num1, num2, sum; num1 = prompt("첫번째 숫자를 입력하세요"); num2 = prompt("두번째 숫자를 입력하세요"); sum = num1 + num2; document.write("두 수의 합 = " +sum); </SCRIPT> </body> </html> 왜 이런 결과가 나왔을까???
자료 변환 처리 parseInt( ) : 지정된 변수나 문자열을 정수로 변환 시키는 함수 var score = prompt(“점수를 입력하세요”); // 변수 score에는 문자열이 저장된다. var n = parseInt(“100”); // 변수 n에 정수 100으로 변환되어 저장된다. var score = parseInt(prompt(“점수를 입력하세요”)); // 괄호 안의 prompt()함수를 먼저 실행하여 입력 받은 값을 문자열로 입력받고, // parseInt() 함수를 실행하여 문자열을 정수로 변환한 후 변수 score에 저장한다.
자료 변환 처리 ParseFloat( ) : 지정된 변수나 문자열을 실수로 변환 시키는 함수 var weight = prompt(“체중(Kg)를 입력하세요.”); // 변수 weight에 문자열이 저장 var weight = parseFloat((prompt(“체중(Kg)를 입력하세요.”));
자료의 출력 document.write( ) 함수 : 화면에 값을 출력할 때 사용 - 출력할 숫자는 괄호( ) 안에 그냥 기술하고, 문자열은 큰 따옴표 안에 반드시 표시한다. - 출력할 문자열들을 서로 연결하려면 문자열결합 연산자인 ‘+’ 연산자를 사용한다.
토론 및 질문하기 오늘 배운 내용을 옆의 학우와 간단히 이야기를 나누어 보세요!