7월8일 - JavaScript 1

UI 개발 도구 분류

- 화면설계할 시, 파워포인트 주로 씀.

- 대강의 틀을 적을 시에

CSS Media Queries

웹-> 태블릿-> 앱 보이는 화면의 갯수 조정하는 거.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Bootstrap

- 트위터에서 개발한 UI 라이브러리

- 제일 많이 쓰는 유형의 앱 화면구현

JavaScript

- 종류 : JS, jQuery, AJAX 등

- 위치 : <head> of <body>

- <style></style> 안은 css문법

- <body></body> 안은 html문법

- <script></script> 안은 JS문법

1. JavaScript 기본문법

1) interpreter 방식의 스크립트언어

2) Server Side Interface 실행

3) on Server 실행 : JSP, ASP, PHP (서버에 따라 언어사용이 다르다)

4) 대소문자를 구분한다

5) 종결문자 ;

6) 변수의 자료형이 없다.

7) 변수 선언 형식 : var 변수명

8) 대입되는 값의 형태에 따라 자동으로 변수의 자료형이 결정된다.

9) 변수를 선언하지 않아도 변수를 사용할 수 있다.

10) 함수 선언 형식 : functiono 함수명(){}

11) 함수의 리턴형이 없다. (리턴값은 존재함)

12) 이벤트(마우스의 움직임, 클릭, 드래그 등)를 발생시켜 함수를 호출하는 방식으로 대부분 실행된다.

2. JS Objects

https://www.w3schools.com/jsref/default.asp

1) 자바스크립트는 Object(객체)로 구성되어있다.

- Object = property(field) + method로 구성

- 자바스크립트의 최상위 객체 window

- window객체명은 생략가능하다.

- property, field, 멤버변수 : window.location

- method, 멤버함수 : window.alert()

*bootstrap alerts

https://www.w3schools.com/bootstrap/bootstrap_alerts.asp

- alert(); confirm(); 함수 -> 확인, 취소창 띄우기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>01_자바스트립트기본문법.html</title>
	<style>/*css영역*/</style>
</head>
<body>
	<!--html 본문영역-->
	<script>
	//JavaScript영역
	/*여러줄 주석*/
	/*1) 자바스크립트는 Object(객체)로 구성되어있다.*/
	//window.alert(); //경고창(확인버튼)
	//alert(); 
	//alert(123);
	//alert("태국");
	//alert('방콕');
	//alert("오필승\n코리아") //줄바꿈
	//alert("\""); //"
	//alert("\\"); //\
	//alert('\''); //'
	//alert("'");  //'
	//alert('"');  //"

	//window.confirm(); //확인, 취소
	//confirm();        //window생략가능
	confirm("영구히 삭제됩니다\n지울까?");
	확인->true, 취소->false 반환
	</script>
</body>
</html>

2) 변수의 자료형 var만 존재한다.

- 값이 변수에 대입이 되면서 자료형이 결정된다.

- 변수 선언하지 않아도 사용가능하다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>01_자바스트립트기본문법.html</title>
	<style>/*css영역*/</style>
</head>
<body>
	<!--html 본문영역-->
	<script>
	//2) 변수의 자료형 var만 있다.
	var name="홍길동";
	var age=25;
	height=178.5;
	//alert("이름:"+name);
	//alert("나이:"+age);
	//alert("키:"+height);	

	var str="";
	str += "이름:"+name+"\n";
	str += "나이:"+age+"\n";
	str += "키:"+height+"\n";
	alert(str);

	var now=new Date(); //날짜형
	var cars=[];        //배열선언
	</script>
</body>
</html>

3) document 객체

- 웹페이지의 본문 <body>가 가리키는 객체

*document object

https://www.w3schools.com/jsref/dom_obj_document.asp

- 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>01_자바스트립트기본문법.html</title>
	<style>/*css영역*/</style>
</head>
<body>
	<!--html 본문영역-->
	<script>
	//3) document 객체
	document.write(123);
	document.write("대한민국");
	document.write('456');
	//HTML tag사용시 ""안에서 사용
	document.write("<hr>");
	document.write("무궁화<br>라일락<br>");
	document.write("<strong>코알라<strong>");
	document.write("<img src='../images/monkey.png'>");
	</script>
</body>
</html>

4) 본문에 있는 id 속성 접근

- Id 표시 : #

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>01_자바스트립트기본문법.html</title>
	<style>/*css영역*/</style>
</head>
<body>
	<!--html 본문영역-->
	<div id="demo"></div>

	<script>
	//4) 본문<body>에 있는 id 속성 접근
	//JavaScript
	//document.getElementById("demo").innerHTML="점심시간";
	//jQuery
	//$("demo")

	var uname="홍길동";
	var age=25;
	var height=178.5;

	var table="";
	table +="";
	table +="<table border='1'>";
	table +="<tr>";
	table +="<th>이름</th>";
	table +="<td>"+uname+"</td>";
	table +="</tr>";
	table +="<th>나이</th>";
	table +="<td>"+age+"</td>";
	table +="</tr>";
	table +="<tr>";
	table +="<th>키</th>";
	table +="<td>"+height+"</td>";
	table +="</tr>";
	table +="</table>";

	document.getElementById("demo").innerHTML=table;
	
	</script>
</body>
</html>

3. JavaScript 연산자

	//논리연산자
	//문) 윤년인지 확인하시오
	var y=2000;
	document.write(y%4==0 && y%100!=0 || y%400==0);
	document.write("<hr>");
	

	//삼항연산자
	//문) 세개의 수 중에서 가장 큰값을 구하시오
	var a=3, b=5, c=7;
	var result1=(a>b)? a: b;
	var result2=(result1>c)? result1: c;
	document.write(result2+"<hr>");

	//1증감연산자
	var x=10,y=10;
	var p=++x;
	var q=y--;

	document.write(x+"<hr>");
	document.write(y+"<hr>");
	document.write(p+"<hr>");
	document.write(q+"<hr>");

4. JavaScript 형변환

1) 숫자형변환

- The Number() Method

- The parseInt() Method

- The parseFloat() Method

	//1) The Number() Method
	document.write(Number(true));    //1
	document.write(Number(false));   //0
	document.write(Number("10"));    //10
        document.write(Number("  10"));  //10
	document.write(Number("10  "));  //10
	document.write(Number(" 10  ")); //10
	document.write(Number("10.33")); //10.33
	document.write(Number("10,33")); //NaN
	document.write(Number("10 33")); //NaN
	document.write(Number("John"));  //NaN
	document.write("<hr>");

	//2) The parseInt() Method
	document.write(parseInt("10"));       //10
	document.write(parseInt("10.33"));    //10
	document.write(parseInt("10 20 30")); //10
	document.write(parseInt("10 years")); //10
	document.write(parseInt("years 10")); //NaN 
	document.write("<hr>");
 
	//3) The parseFloat() Method
	document.write(parseFloat("10"));       //10
	document.write(parseFloat("10.33"));    //10.33
	document.write(parseFloat("10 20 30")); //10
	document.write(parseFloat("10 years")); //10
	document.write(parseFloat("years 10")); //NaN
	document.write("<hr>");

분석-> 여기서 NaN은 에러난 값을 의미한다.

2) 문자형변환

- 자바와 비슷하다

	//1) 문자열길이
	var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var sln = txt.length;
         ->26

	//2) lastIndexOf()
	var str = "Please locate where 'locate' occurs!";
	var pos = str.lastIndexOf("locate");
	 ->7
    
	//3) The substring() Method
	var str = "Apple, Banana, Kiwi";
	var res = str.substring(7, 13);	
         ->Banana

	//4) The toString() Method
	var x=123;
	document.write(x.toString());         //123
	document.write((123).toString());     //123
	document.write((100+23).toString());  //123

	//5) The valueOf() Method (참조형->기본형)
	var y="456";
	document.write(y.valueOf());             //456
	document.write(("456").valueOf());       //456
	document.write(("400"+"56").valueOf());  //456

3) isNaN()

- 숫자모양으로 된 기호로 구성된 값인지 아닌지 알아보는 함수

- NaN : Not a Number

	document.write(isNaN(123));          //false <-
	document.write(isNaN(-1.23));        //false
	document.write(isNaN(5-2));          //false
	document.write(isNaN(0));            //false
	document.write(isNaN('123'));        //false
	document.write(isNaN('Hello'));      //true  <-
	document.write(isNaN('2005/12/12')); //true
	document.write(isNaN(''));           //false
	document.write(isNaN(true));         //false
	document.write(isNaN(undefined));    //true
	document.write(isNaN('NaN'));        //true
	document.write(isNaN(NaN));          //true
	document.write(isNaN(0 / 0));        //true

분석-> undefined, NaN 쓰레기값

4) eval()

- 문자열로 구성된 값을 실제 연산해서 반환

- 예) var a1, a2, a3, a4, a5;

- -> eval(a+"1")

	var x = 10;
	var y = 20;
	document.write(eval("x * y") + "<br>");  //200
	document.write(eval("2 + 2") + "<br>");  //4
	document.write(eval("x + 17") + "<br>"); //27

5. JavaScript 제어문

1) 조건문 : if문, switch~case문

2) 반복문 : for문, while문, do~while문

3) break문, continue문,

* 성적프로그램 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>03_제어문.html</title>
	<style></style>
</head>
<body>
	<div id="demo"></div>
	<script>
	//성적프로그램
	var uname="김유미";
	var kor=100, eng=95, mat=100;
	var total=kor+eng+mat;
	var aver=parseInt(total/3);

	//문) 국어점수의 학점을 구하시오 
	var grade="";
	if(kor>=90){
		grade="국어 : A학점";
	}else if(kor>=80){
		grade="국어 : B학점";
	}else if(kor>=70){
		grade="국어 : C학점";
	}else if(kor>=60){
		grade="국어 : D학점";
	}else{
		grade="국어 : F학점";
	}//if end

	//문) 평균을 기준으로 과락,재시험, 불합격 
	var result="";
	if(aver>=70){
		if(kor<40 || eng<40 || mat<40){
			result="재시험";
		}else{
			result="합격";
		}
	}else{
		result="불합격"
	}//if end

	//문) 평균10점당 별 한개씩, 장학생
	var star="";
	for(n=0;n<parseInt(aver/10);n++){
		star+="*";
	}//for end

	//문) 평균 95점이상 장학생
	var special="";
	if(aver>=95){
		special="장학생";
	}//if end

	//문) 위의 데이터값을 문자열 변수에 모두 모아서 테이블로 작성한 후 id=demo에 출력하시오
	var table="";

	table+="";
	table+="<table border='1'>";
	table+="<tr>";
	table+="<th rowspan='2'>이름</th>";
	table+="<th colspan='3'>과목</th>";
	table+="<th rowspan='2'>평균</th>";
	table+="<th colspan='4'>결과</th>";
	table+="</tr>";

	table+="<tr>";
	table+="<th>국어</th>";
	table+="<th>수학</th>";
	table+="<th>영어</th>";
	table+="<th>국어학점</th>";
	table+="<th>점수결과</th>";
	table+="<th>평균10점당</th>";
	table+="<th>장학생</th>";
	table+="</tr>";
	
	table+="<tr>";
	table+="<td>"+uname+"</td>";
	table+="<td>"+kor+"</td>";
	table+="<td>"+eng+"</td>";
	table+="<td>"+mat+"</td>";
	table+="<td>"+aver+"</td>";
	table+="<td>"+grade+"</td>";
	table+="<td>"+result+"</td>";
	table+="<td>"+star+"</td>";
	table+="<td>"+special+"</td>";
	table+="</tr>";
	document.getElementById("demo").innerHTML=table;

	</script>
</body>
</html>

저작자표시

'공부 > 화면구현 UI' 카테고리의 다른 글

7월10일 - JavaScript 3 (1)	2019.07.10
7월9일 - JavaScript 2 (0)	2019.07.09
7월4일 - UI 구현 CSS (0)	2019.07.04
7월3일 - UI 구현 HTML3 + CSS (1)	2019.07.03
7월2일 - UI 구현 HTML2 (0)	2019.07.02

3XL

7월8일 - JavaScript 1

JavaScript

'공부 > 화면구현 UI' 카테고리의 다른 글

티스토리툴바

7월8일 - JavaScript 1

JavaScript

'공부 > 화면구현 UI' 카테고리의 다른 글

'공부/화면구현 UI' Related Articles

티스토리툴바