하이브리드 프로그래밍의 기본 기반은 HTML5

HTML5는 정적인 언어이기때문에

JAVASCRIPT 가 동적인 부분을 담당

수업 개요d


제3차 실무프로그래밍 강좌 강의계획서.pdf


JAVASCRIPT

JQUERY 

설치

Oracle.com -> JavaSE sdk 7버전 다운로드

강사님이 주신 Eclipse 사용

Ext JS - 데스크탑 환겨에서 사용

데이터 처리하면서 디자인적인면 두곳이 혼합되어 있음 

단점: 느려서 국내에서 사용하지 않았음

센차 터치 - 모바일에서 주로 사용

백엔드 스프링

웹 구현시 - 보통 하던데로 데이터를 받아와서 구현하면 된다.

모바일 구현시 - JSON 혹은 XML 로 데이터르 받아와 센차 터치에서 구현


사물인터넷의 시대를 준비하라


자바스크립트 기초 강의 자료

Javascript.pdf


이클립스 다운로드

톰캣 세팅

Dynamic Web Project 생성

Window -> Browser -> Default System Browser


JavaScript 객체 학습은 필요함 -> Professional JavaScript for Web Development


--------------------------------

자바스크립트 body와 head에서의 실행순서가 다르다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실행 위치</title>
<script type="text/javascript">
document.write('head에서 살행<br>');
</script>
</head>
<body>
<script type="text/javascript">
document.write('body에서 실행');
</script>
</html>
 
cs

- 자바스크립트를외부파일로사용 

<script type="text/javascript" src="자바스크립트파일명.js"></script> 

- HTML 태그에인라인(inline) 형태로삽입해서사용 

<input type=”button” value=”이동” onclick=”location.href=’index.html’”> 

자바 스크립트 출력

document.write('자바스크립트출력구문'); 

자바스크립트주석 

 //  : 한줄주석처리 

 /* ~ */ : 한줄이상의주석처리 

**자바스크립트와 다른 언어와 다른점: 함수를 자료형으로 취급

변수
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수</title>
<script type="text/javascript">
//변수 선언
var num;
 
//변수에 값을 할당
num = 123;
 
//출력
document.write('num = ' + num);
document.write('<br>');
 
//변수 선언과 초기화를 한 번에 함
var c = 10, d = 3.5;
// bracket 을 해주지 않으면 문자열로 변환되서 계산되지 않음
document.write('c+d='+(c+d)));
</script>
</head>
<body>
    
</body>
</html>
cs


자료형 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형</title>
<script type="text/javascript">
//변수를 선언
var stringVar = 'String'; //문자열
var numberVar = 273; //숫자
var booleanVar = true; //boolean
var functionVar = function(){} // 함수
var objectVar = {};
 
//typeof 변수명: 해당 변수에 저장된 데이터의 타입을 알아내는 연산자
document.write('stringVar : '+typeof stringVar + '<br>');
document.write('numberVar : '+typeof numberVar + '<br>');
document.write('booleanVar : '+typeof booleanVar + '<br>');
document.write('functionVar : '+typeof functionVar + '<br>');
document.write('objectVar : '+typeof objectVar + '<br>');
 
 
</script>
</head>
<body>
 
</body>
</html>
cs


자료형과 형변환

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형과 형변환</title>
<script type="text/javascript">
var input = prompt('숫자를 입력하세요', '숫자');
 
document.write(typeof(input)+':'+input);
document.write('<br>');
 
document.write(input*10); // 자동적으로 형변환 
document.write('<br>');
document.write(input+10);
 
//형변환
//문자(문자열)를 숫자로 변환
var numberInput = Number(input); // 문자->숫자
document.write('<br>형변환 이후 <br>');
document.write(typeof(numberInput)+':'+numberInput);
document.write('<br>');
document.write(numberInput+10);
 
</script>
</head>
<body>
    
</body>
</html>
cs

나머지 연산자 기능은 기존 프로그래밍 언어 문법들과 비슷

** 주의해야할 비교 연산자

 ==            a == b              a 와b 의값이같은지비교 

 !=            a != b              a 와b 의값이 다른지비교 

 ===           a === b             a 와b 의값뿐만아니라자료형도같은지비교 

 !==           a!==b               a 와b 의값뿐만아니라자료형도 다른지비교 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비교연산자</title>
<script type="text/javascript">
/* 
연산자 설명
=== 양 변의 자료형과 값이 일치해야 true
!== 양 번의 자료형과 값이 다르면 false
*/
var a = 20, b = '20', c;
 
c = a == b;
document.write('a == b : ' + c + '<br>'); // 자동 형변환이 이루어져서 true
 
c = a != b;
document.write('a != b : ' + c + '<br>'); 
 
c = a === b;
document.write('a === b : ' + c + '<br>');
 
c = a !== b;
document.write('a !== b : ' + c + '<br>');
 
</script>
</head>
<body>
</body>
</html>
cs


'App Development > Hybrid Programming' 카테고리의 다른 글

특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리  (0) 2015.01.06
특강 2일차 (오전) - 자바스크립트  (0) 2015.01.06
특강 1일차 (오후)  (0) 2015.01.05

+ Recent posts

티스토리툴바