자바스크립트 - 배열과 정렬을 활용하여 테이블 구성하기

안녕하세요

이번 시간에는 자바스크립트에서

특정한 데이터를 배열에 넣고, 그 데이터를 정렬하여 테이블로 구성하는 것을 올려봅니다.

먼저 결과 화면을 보면 다음과 같습니다.




자 그럼 소스 코드를 한번 보시죠~!!


var cars=[
{type:"BMW", year:"2016"},
{type:"Sonata",year:"2013"},
{type:"Volvo",year:"2014"},
{type:"Saab",year:"2011"}];
var str="";
str+="";
str+="";
str+="";
for(var i=0;i<4 i="" str="" tr="">
유형년도
"; str+="

"+cars[i].type+"

"; str+="
"; str+="

"+cars[i].year+"

"; str+="
"; } str+=""; var obj=document.getElementById('demo'); obj.innerHTML=str; // 출시 연도별로 내림차순으로 정렬하여 테이블 형태로 보여주기 var obj2=document.getElementByid('demo2'); cars.sort(function(a,b){ return b.year-a.year; }); var str3=showTable(cars); function showTable(cars){ var str="
"; str+=""; for(var i=0;i
유형연도
"+cars[i].type+""+cars[i].year+"
"; } return str; } obj2.innerHTML="

출시연도별

"; obj2.innerHTML+=str3; cars.sort(function(a,b){ return b.year-a.year; });

자바스크립트 - 배열의 함수를 사용해보자~!

안녕하세요

이번 시간에는 자바스크립트에서 배열의 함수를 사용한 예제를 볼까 합니다.

http://www.w3schools.com/ 에 들어가니 정말 많은 함수들이 있더군요

하지만 이번 예제에서는 10개 정도만 쓰겠습니다.

제가 예제에서 사용한 함수들은 아래와 같습니다.

 [1] join(str) : 배열 내 요소들을 구분문자 str로 연결하여 문자열을 반환
 [2] pop() : 배열 끝의 요소를 삭제
 [3] push(data) : 배열 끝에 요소(data)를 추가
 [4] shift() : 배열 선두의 요소를 삭제
 [5] unshift(data,..) : 배열 선두에 지정 요소를 추가
 [6] sort([func]) : 요소를 오름차순으로 정렬
 [7] reverse() : 역순으로 정렬(반전)
 [8] concat(arr) : 지정 배열을 현재의 배열에 추가
 [9] splice(start, len) : start위치에서 len만큼을 삭제
     splice(start, len, data, data...)
     :start위치에서 len만큼 삭제하고 date들을 추가
[10] slice(start [, end]) : start에서부터 end-1번째 요소들을 추출하여 배열객체를 반환


위의 사진은 결과 화면이고,

자 그럼 예제 바로 들어가봅니다~!!



var fruits = ["Banana", "Orange", "Apple", "Mango"];
var obj=document.getElementById('demo');
var x=fruits.pop();;
var y=fruits.push("Kiwi"); // 배열 마지막에 추가
fruits.shift(); //배열 맨 앞의 요소를 제거
fruits.unshift("Lemon"); // 배열 맨 앞의 요소를 추가
var z=fruits.slice(0,3);
//splice()이용해서 "Apple"을 삭제해보세요.
fruits.splice(2,1);
var greenLine=["당산","합정","홍대입구","신촌"];
var goldLine=["여의도","노량진","동작","고속터미널"];
var line=greenLine.concat(goldLine);
line.sort();//오름차순으로 정렬
line.reverse(); //내림차순으로 정렬
var kor=[95,20,55,45,88,77,100];
kor.sort(); // sort()는 문자열을 기준으로 정렬함 "95" "20" "100".. 식으로
//오름차순으로 정렬
kor.sort(function(a,b){
 return a-b;
});
kor.sort(function(a,b){
 return b-a;
});

자바스크립트 - 정규식 활용 예제

안녕하세요

이번 시간에는 자바스크립트에서 정규식을 활용하는 간단한 예제를 올려봅니다.

정규식은 문자열에서 문자 조합에 일치 시키기 위하여 사용되는 패턴으로

대표적인 규칙은 아래와 같습니다.

- 정규식 -

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

/ 규칙 / : 정규식의 규칙을 쓸 때는 제일 문장 앞과 뒤에 '/'으로 감쌉니다.

^ : 시작을 의미

$ : 끝을 의미

[] : 범위

+ : 1개 이상 나타난다는 것을 의미

[^abc] : a,b,c를 제외한다는 의미

a-z: 알파벳 소문자

A-Z: 알파벳 대문자

0-9: 숫자

[!,_,@] 기호를 허용한다

? : 0이거나 1개

* : 0개 이상 반복된다는 의미

\b : 단어의 경계를 나타내며, 해당 패턴이 정확히 일치해야 함을 의미한다.

\d{4}: 숫자 4개가 와야 한단 의미

\d{1,2}: 숫자가 1개 또는 2개 올 수 있단 의미

[-\/]: -이 오거나 /가 올 수 있단 의미

정규식을 이용해서 제가 구현한 결과 화면은 아래와 같습니다.


사실 앞선 예제와 비슷하긴 하지만

이번 예제는 정규식을 이용한겁니다.

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

제가 쓴 규칙들은 위와 같고, 다른 규칙들이 사실 더 있습니다.

그런 규칙들은 정규식을 검색해서 보시면 됩니다.

자 어쨋든 그럼 시작하죠


// 아이디 체크
// RegExp객체를 사용하여 패턴 생성
var isUserid=function(){
	var pattern=new RegExp(/^[a-zA-Z0-9!@/]+$);
	var bool=pattern.test(obj.value);
	//val이 정규식 패턴에 맞으면 true를 반환하고 틀리면 false를 반환한다.
	return bool;
}
// 전화번호 체크
var isTel=function(obj){
	//0-9 뒤에 있는 -,+는 각각의 기호를 의미
	var pattern=new RegExp(/^[0-9-+]+$/);
	var val=obj.value;
	var bool=pattern.test(val);
	return bool;
}
// 이메일 체크
var isEmail=function(obj){
	var pattern=new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.[a-zA-Z]+$/);
	/*^[\w-] : 알파벳문자, 숫자, 하이픈(-)이 처음에 올 수 있단 의미
			  (\.[\w-]+)* : 마침표(.)와 그 다음에 하나 이상의 알파벳 문자,숫자,- 이 0번 이상 나올 수 있단 의미(*)
			  @ : 해당 위치에 @가 와야한단 의미
			  ([\w-]+\.)+ : 알파벳, 숫자, -이 한번 이상 나오고 그 다음 마침표(.)가 나온다는 의미
			  그리고 이 조합이 한번 이상 나올 수 있단 의미
			  [a-zA-Z]+$ : 알파벳 대문자, 소문자 상관없이 문자로 끝나야 함을 의미 
			*/
	var bool=pattern.test(obj.value);
	return bool;
}
// 날짜체크
var isDate=function(obj){
	/*생년월일 날짜 유형 체크
		[2016-02-15] [2016/02/15]
		\b : 단어의 경계를 나타내며, 해당 패턴이 정확히 일치해야 함을 의미한다.
		\d{4}: 숫자 4개가 와야 한단 의미
		\d{1,2}: 숫자가 1개 또는 2개 올 수 있단 의미
		[-\/]: -이 오거나 /가 올 수 있단 의미
		*/
	var pattern=new RegExp(/\b\d{4}[-\/]d{1,2}[-\/]\d{1,2}\b/);
	var bool=pattern.test(obj.value);
	return bool;
}
var check=function(){
	if(!isUserid(frm.uid)){
		alert("아이디는 영문자,숫자,!,_,@여야 해요");
		frm.uid.select();
		return;
	}
	if(!isTel(frm.tel)){
		alert("연락처가 숫자가 아니에요");
		frm.tel.focus();
		return;
	}
	if(!isEmail(frm.email)){
		alert("이메일 형식이 맞지 않아요");
		frm.email.select();
		return;
	}
	if(!isDate(frm.birth)){
		alert("날짜형식이 맞지 않아요");
		frm.birth.select();
		return;
	}
	frm.submit();
}

자바스크립트 - 유효성체크 예제

안녕하세요

이번 시간에는 일반적으로 홈페이지 같은 곳에서

회원가입을 할 때 아이디, 연락처, 이메일 등 다양한 정보를 적을 때

이 값들에 유효성을 체크하는 자바스크립트 예제를 올려봅니다.



위의 그림과 보시다시피 비밀번호를 입력하지 않으면 비밀번호를 입력하세요 라는 메시지가 나오거나 연락처를 문자로 입력하면 숫자로 입력하라는 등의 메시지를 체크하는 예제입니다.

폼 화면은 간단하니 직접 구현하시고

자바스크립트에서 함수 기능을 구현해봤으니 참고 하시면 되겠습니다.





function check()
{
 if(!frm.uid.value){
  alert("아이디를 입력하세요");
  frm.uid.focus(); // 입력 포커스 주기
  return;
 }
 if(!frm.upwd.value){
  alert("비밀번호를 입력하세요");
  frm.upwd.focus();
  return;
 }
 if(!frm.tel.value){
  alert("전화번호를 입력하세요");
  frm.tel.focus();
  return;
 }
 if(!frm.email.value){
  alert("이메일을 입력하세요");
  frm.email.focus();
  return;
 }
 // 아이디 4자~8자 길이 체크
 var objId=frm.ui.value;
 if(objId.length<4 objid.length="">8){
  alert("ID 길이는 4자이상 8자이내여야 합니다.");
  frm.uid.select(); // 마킹 포커스 주기
  return;
 }
 if(!isUserid(frm.uid)){
  alert("아이디는 영문자, 숫자, !, @, _여야 해요");
  frm.uid.select();
  return;
 }
 // 아이디가 알파벳, 숫자, !, @, _인지 체크
 if(!isUserid(frm.uid)){
  alert("아이디는 영문자, 숫자, !, @, _여야 해요");
  frm.uid.select();
  return;
 }
 function isUserid(obj){
  var str="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_!@";
  return containChars(obj,str); // obj는 사용자가 입력한 값, str은 id를 체크하는 유효성 값
 }
 function containChars(obj, chars){
  var val=obj.value.toUpperCase(); // 소문자를 대문자로 변환
  for(var i=0;i

자바(Java) - 사용자 정의 예외 클래스 예제

안녕하세요

이번 시간에는 자바에서 제공해주는 예외 클래스외에

사용자가 직접 정의할 수 있는 예외 클래스의 사용 방법을 올려봅니다.

사용자 정의 예외 클래스를 만들기 위해서는..

- Exception을 상속받는 클래스를 만들어야 합니다.

- 생성자를 구성하고, 생성자 안에서 super(예외 메시지); 를 호출해야 합니다.
-->여기에 들어간 예외 메시지가 getMessage()를 호출할 때 반환되는 메시지가 됩니다.

- 사용자 예외 클래스 객체를 생성해서 throw 라는 키워드로 던져주고, 반드시 메소드 헤더부분에 해당 예외를 throws 해줘야 합니다.


public class PongSite {
 public static void login(String name, String pwd) throws NotSupportedNameException{
  System.out.println("***Login Page***");
  char lastName=name.charAt(0); // 첫번째 글자를 lastName 변수에 저장
  if(lastName=='퐁'){
   System.out.println(name+"님 환영합니다.");
  }else if(lastName=='콩'){
   //사용자 정의 예외 발생
   throw new NotSupportedNameException("콩씨는 절대로 입장 불가");
   /* throw new 예외();
    * throw와 throws는 세트로 함께 사용하자.
    * */
  }else{
   //기타 성씨인 경우
   throw new NotSupportedNameException("기타 성씨분들은 이용에 제한이 있어요");
  }
 }
 public static void main(String[] args) {
 //명령줄 인수로 이름, 비번을 받자.
 if(args.length!=2){
  System.out.println("명령줄 인수 2개를 입력하세요[이름, 비밀번호]");
  return;
 }
 
 String name=args[0];
 String pwd=args[1];
 try{
  login(name,pwd);
 }catch(NotSupportedNameException e){
  String msg=e.getMessage; // 예외 메시지를 문자열로 반환한다.
  System.out.println(msg);
  //스택기록을 출력하여 예외가 발생된 지점을 보여줌(디버깅용으로 사용)
  e.printStackTrace();
  return;
 }
 System.out.println(">>>사이트 이용<<<");
}


위의 소스 코드를 실행하면 다음과 같은 결과가 나옵니다.


자바(Java) - FileReadException 처리

안녕하세요

이번 시간에는 파일을 읽어들어 출력하는 클래스를 만들어 보고,

파일을 읽어들일 때 처리하는 예외 처리에 관련된 예제를 올려봅니다.

전에 올렸던 예외처리 예제와 큰 틀은 벗어나지 않지만

이 역시, 이런게 있다는 정도로만 보시면 좋을것 같습니다.

결과 화면은 아래와 같습니다.



파일의 속성에 들어가 주소값을 복사한 후에..




입력창에 파일 주소 값을 붙여넣고 '확인'을 누르면..




출력문에 해당 소스 코드가 출력된느 것입니다.


예제 소스코드는 아래와 같으니 참고하시면 좋을것 같습니다.



public class FileReadExceptionTest{
 public static String readFile(String filename){
  FileReader fr=null; //파일을 읽는 메소드를 갖는다.
  char[] data=new char[1000]; //파일 내용을 char 배열에 담아 읽자.
  try{
   fr=new FileReader(filename);
   //FileNotFoundException 발생할 수 있음
   fr.read(data, 0, data.length);
   // 배열 인덱스 0부터 끝까지 읽어들인다, 파일을 읽어서 파일내용을 data배열에 담는다.
   //IOException
   if(fr!=null) fr.close();
  }catch(FileNotFoundException e){
   System.out.println(filename+"파일을 찾을 수 없습니다");
   return null;
  }catch(IOException e){
   System.out.println("입출력 오류 발생");
  }catch(Exception e){
   System.out.println("기타 오류 발생");
  }
  String fileData = new String(data);
  return fileData; // 메인 함수로 리턴 해줌
 }
 public static void main(String[] args) {
  String filename=JOptionPane.showInputDialog("읽을 파일명을 입력하세요");
  String contents=readFile(filename);
  if(contents!=null){
    System.out.println(">>>>"+filename+"<<<<");
    System.out.println(contents);
  }
 }
}

자바(Java) - 예외(Exception) 이란?

안녕하세요

이번 시간에는 자바에서 오류 처리를 위해 자주 쓰이는 Exception에 대해

개념과 예제를 보여드리는 시간을 가지겠습니다.


자바에서 Exception 이란?
프로그램이 진행하는 과정에서 만나게 되는 오류(가벼운 정도의 에러)입니다.

예외 관련 상속도는 아래와 같이 구성되어 있습니다.




예외 처리의 목적은 프로그램 진행시 발생할 수 있는 상황들을 미리 정해놓고, 해당하는 예외가 발생했을 경우 적절한 조치를 취해서 프로그램이 정상적으로 작동하도록 하기 위함입니다.

예외 처리의 방법은 두 가지가 있습니다.

1) Handle하는 방법: 직접 처리하는 방법 try~catch 절을 이용

-사용예-
try
{
    예외 발생 코드
}
catch(해당예외클래스 e)
{
    예외처리코드
}

2) Declare하는 방법: 선언하는 방법 throws 절을 이용
예외 처리를 직접 하지 않고 메소드를 호출하는 쪽으로 넘긴다.

-사용예-
public void sub() throws IOException{
   int r=System.in.read();
} // 위 처럼 선언하면, sub()를 호출하는 쪽으로 IOException 을 넘겨준다.

그리고 finally절이 try~catch문에서 맨 마지막에 나오는데

이것은 선택 사항입니다. finally를 넣는 다는 것은 반드시 한번은 코드를 실행해야 한다는 부분을 넣겠다는 것입니다.

[심지어 return 문이 오더라도 finally블럭은 반드시 실행되며,
단 System.exit(0)의 경우는 실행되지 않고 종료됩니다.]

자 그럼 예를 한번 볼까요~

public class ExceptionTest5 {
 public static void main(String[] args) {
  try{
   int num2=Integer.parseInt(JOptionPane.showInputDialog("숫자 입력하세요");
   System.out.println("입력하세요=>");
   String a= "나무";
   int num=System.in.read()-48;
   int num3=50/(num*num2);
   System.out.println("num : "+num);
   System.out.println("num2 : "+num2);
   System.out.println("num3 : "+num3);
  }catch(NumberFormatException e){
   System.out.println("숫자를 입력하세요");
   return; // return문이 오면 반드시 실행돼야 할 코드가 안 옴->finally 문장을 추가
  }catch(ArithmeticException e){
   System.out.println("분모가 0이 되면 안됩니다");
   System.exit(0);//시스템 종료
  }catch(java.io.IOException e){
   System.out.println("입출력 오류 발생");
  }catch(Exception e){
   System.out.println("기타 오류");
  }finally{
   System.out.println(":::반드시 실행돼야 할 코드:::");
  }
  System.out.println("***The End***************");
}



실행 결과는 아래와 같습니다.

정상적인 상황

ArithmeticException 발생


NumberFormatException 발생



자바스크립트 - 배열 생성 방법 및 예제

안녕하세요

이번 시간에는 자바스크립트에서 배열을 생성하는 방법과 간단한 예제에 대해

글을 써볼까 합니다.

먼저 배열을 생성하는 방법은 2가지가 있습니다.

1) 배열 리터럴을 사용하는 방법

2) Array()라는 생성자 함수를 이용하는 방법


자 그럼 위의 2가지 방법을 활용하여 직접 배열을 만들어보겠습니다.




//1번 방식
var arr1 = [1,2,3,4];
var arr2 = [1,'ABC',true,12.3];
for(var i=0;i<<4;i++){
 document.write(arr1[i]+", ");
}
for(var i=0;i<4;i++){
 document.write(arr2[i]+", ");
}
//2번 방식
var arr3= new Array(90,80,70);
for(var i=0;i<3;i++){
 document.write(arr3[i]+", ");
}
var arr4= new Array(5);
arr4[0]='Hello';
arr4[1]=10;
arr4[2]=[100,200];
for(int i=0;i<3;i++){
 document.write(arr4[i]+", ");
}
var arr5=new Array(true, false, ['A', 'b', 1]);



위의 소스 코드를 실행하면 아래와 같은 결과가 나옵니다.


자바스크립트 - history 객체를 활용한 아주~~ 간단한 예제

안녕하세요

이번 시간에는 자바스크립트에서 history 객체를 활용한 예제를 올려봅니다.

너무너무 간단하니 허무하지 마십시오 ㅋ


결과 화면은 위와 같습니다. 참 간단하죠? ㅋ

소스코드도 매우 간단합니다.
var goBack=function(){
 // 하나 이전 페이지로 이동한다/
 window.history.back();
}
var goForward=function(){
 window.history.forward();
}
var goNaver=function(){
 location.href="http://www.naver.com";
}


아래는 html 예제로 위의 자바스크립트 소스 코드 밑에 이어서 코딩하셔야합니다.



자바스크립트 - 실제 달력을 만들어보자~!!

안녕하세요

이번 시간에는 자바스크립트에서 실제 달력을 만들어 보는 시간을 갖겠습니다.




보시다시피 위의 두 개의 버튼이 있습니다.

각각의 버튼을 누르면 해당 날짜가 보여지는 예제입니다.


var btn=document.getElementById('btn1');
btn1.onclick=function(){
 var year=2016;
 var month=9;
 
 show(year,month);
}
var btn2=document.getElementById('btn2');
btn2.onclick=function(){
 var year=2017;
 var month=2;
 
 show(year,month);
}
function show(year,month){
 var total_days; // 각 달의 총 일수
 switch(month)
 {
  case 1: case 3: case 5: case 7:
  case 8: case 10: case 12:
  total_days=31; break;
  case 4 : case 6: case 9:
  case 11:
  total_days=30; break;
  /*윤년(29일)
    1)기원 연수가 4로 나누어 떨어지는 해를 우선 윤년(29일)
    2)그 중에서 100으로 나누어 떨어지는 해는 평년(28일)
    3)다만 400으로 나누어 떨어지는 윤년(29일)
    */
  case 2 :{
   if(year%4==0 && year%100!=0 || year%400==0){
    total_days=20;
   }
   else
    total_days=28;
  }break;


아래의 소스는 이미지로 보여드리겠습니다.

직접 보고 이해하면서 타이핑 해주세요~!



자바스크립트 - Date 객체 활용으로 달력 만들어보자~!

안녕하세요

이번 시간에는 자바스크립트에서 Date 객체를 활용하여

특정 날짜를 나오게 하는 이벤트를 처리하는 소스 코드를 올려봅니다.



자 그럼 아래의 소스코드를 참고해보세요~!



// 작년 날짜를 보여주는 함수
function showLast(lastYear){
 var str="";
 var lastYear = new Date(2015, (9-1), 20);
 var obj=document.getElementById('msg');
 show(lastYear);
}
// 오늘 날짜를 보여주는 함수
function show(lastYear){
 if(!lastYear){
  var today=new Date();
 }else{
  today=lastYear;
 }
 //년도 월 일 요일
 var str="";
 str+=today.getFullYear()+"년 "; // 4자리수 년도 정보
 str+=today.getMonth()+1+"월 ";
 //Jan:0, Feb:1 ... Dec:11 따라서 +1을 해야함
 str+=today.getDate()+"일 ";
 str+=myDay(today.getDay())+"요일 "; // 사용자 정의 함수 myDay 만들기
 //Sun:0, Mon:1 ...
}
function myDay(day){
 var str="";
 switch(day){
  case 0: str="일"; break;
  case 1: str="월"; break;
  case 2: str="화"; break;
  case 3: str="수"; break;
  case 4: str="목"; break;
  case 5: str="금"; break;
  case 6: str="토"; break;
 }
 return str;
}

자바스크립트 - location 객체 활용 예제

안녕하세요

이번 시간에는 자바스크립트에서 BOM의 location 객체의 간단한 활용 예제 올려봅니다.

정말 간단하니 이런것이 있구나 하고 봐주세요~


먼저 결과 화면은 위와 같습니다.

특정한 경로로 페이지를 이동하는 버튼과, 새로고침 하는 버튼.

마지막으로 버튼을 누른 후 3초후에 특정 경로로 이동하는 특성을 가진 버튼

총 세개의 버튼이 있습니다.

구현하기 위해서는 아래의 소스 코드를 참고하시면 됩니다.


 function go(){
  //[1]href 속성
  window.location.href="이동할 경로.html";
 }
 function refresh(){
  location.reload(); // 새로고침
 }
 function goUrl(url){
  window.setTimeout('location.href="'+url+'"',3000);
 }

자바스크립트 - document 객체 활용

안녕하세요

이번 시간에는 자바스크립트에서 BOM(Browser Object Model)에서 document 객체에

관련된 간단한 소스코드를 올려봅니다.

그냥 이런게 있다 정도로만 보시면 될 것 같습니다.



  //doucment 속성:[1]title 속성
  window.document.title="현재 문서 제목입니다";
  //[2] write()함수:문서영역에 문자열/데이터 출력
  document.write("

"+document.title+"

"); //[3] lastModified속성 : 현재 html 문서가 마지막에 저장된 시간 document.write("

"+document.lastModified+"

"); function change(){ //[4] bgColor속성: 배경색 //[5] fgColor속성: 글자색 document.bgColor="#ff0066"; document.fgColor="#009966"; }



결과 화면은 위와 같습니다. 색상변경 버튼을 누르면 글자색과 배경색이 바뀝니다.