JavaScript 예외 처리






: 에러가 발생하였을 시 에러가 발생한 위치를 특정하거나 어떠한 에러가 발생하였는지를 확인 할 수 있다.




		try {
			document.write("예외처리 발생<br>");
			throw new Error("전달할 메시지");
		} catch(e) {
			document.write(e.name + " 가 발생<br>");
			document.write("전달받은 메시지 : " + e.message + "<br>");
		} finally {
			document.write("상관없이 실행");
		}

실행 결과

- 3라인에서 throw를 사용하여 임의적으로 에러를 발생시켰다. 에러가 발생하여 catch문이 실행된다.


- 5라인에서는 전달받은 에러 객체의 name 속성을 이용하여 어떠한 에러가 발생하였는지 이름을 확인할 수 있다.


- 6라인에서는 에러의 관한 설명을 담은 message 속성을 이용하여 설명을 볼 수 있다.


- finally는 에러의 발생 여부와 상관없이 실행되는 문으로써 문법상 명확하기 위하여 사용한다.





		try {
			document.write("예외처리 발생<br>");
			throw new ReferenceError("전달할 메시지");
		} catch(e) {
			document.write(e.name + " 가 발생<br>");
			document.write("전달받은 메시지 : " + e.message + "<br>");
		} finally {
			document.write("상관없이 실행");
		}

실행 결과


- ReferenceError가 발생한 것을 볼 수 있다.


- 해당 코드에서는 에러를 임의적으로 발생시켰지만 실제 try문에서 에러가 발생한 경우 발생한 에러의 종류에 따라서 그에 맞는 서로 다른 처리를 해줄 수 있다.





'JavaScript > 기초' 카테고리의 다른 글

JavaScript eval 함수  (0) 2020.03.14
JavaScript 함수  (0) 2020.03.14
JavaScript 제어문  (0) 2020.03.13
JavaScript 형변환  (0) 2020.03.12
JavaScript 변수  (0) 2020.03.12

JavaScript 제어문





1. if 문

let a = 2;
if(a ) {

} else if( a == 1) {

} else {

}




2. switch 문

let a = 2;
switch(a) {
    case 1 :
          break;
    case 2 :
          break;
}




3. for 문

for(let i=0; i<5; i++) {
} // 혹은 for(let b in a) {
}




4. while 문

let a = 4;
while(a == 4) {

}




5. do~while 문

let a = 5;
do {

} while(a == 5);




※ 실행흐름을 제어 - Lable(레이블)

olabel:
  for(let i =0; i<3; i++) {
for(let j=0; j<3; j++) {
document.write(i+", " + j+ "<br >"); if(j==2) break; // 1번 if(j==2) break olabel; // 2번 } }
중첩된 반복문을 break하거나 continue할 때 유용하게 사용할 수 있다.

1번 결과



2번 결과










'JavaScript > 기초' 카테고리의 다른 글

JavaScript eval 함수  (0) 2020.03.14
JavaScript 함수  (0) 2020.03.14
JavaScript 예외 처리  (0) 2020.03.13
JavaScript 형변환  (0) 2020.03.12
JavaScript 변수  (0) 2020.03.12

JavaScript 형변환








1. 암시적 변환

 형을 직접적으로 변환해주는 것이 아닌 자동적으로 변환한다.

	let a = 5;
	document.write(a+"10");	// 510
	document.write(a*"10");	// 50

ㄴ 숫자 -> 문자열 : 2 라인에서는 a가 문자열 5로 변환되어서 510이 출력된다.

ㄴ 문자열 -> 숫자 : 3 라인에서는 문자열 10이 숫자로 변환되어서 5*10의 결과인 50을 출력한다.




2. 명시적 변환

- 문자열 -> 숫자 

ㄴ Number("문자열") : 해당 문자열을 숫자로 변환한다. 단, 문자열에 숫자 외 문자열, 즉 숫자로 바꾸지 못하는 문자가 포함되어있는 경우는 NaN(Not a Number)을 리턴한다.

ㄴ parseInt("문자열") : 해당 문자열을 Int형(=정수형) 숫자로 변환한다. 정수형이므로 소수점 아래는 잘린다. Number함수와 달리 문자열에 숫자로 바꾸지 못하는 문자가 포함되어있어도, 문자 이전까지의 숫자를 숫자로 변환해 준다.

또한, 2번 째 인수로 진수를 설정해줄 수도 있다. 4라인을 보면 10을 16진수로 출력하여 16이 보여진다.


ㄴ parseFloat("문자열") : 해당 문자열을 Float형(=실수형) 숫자로 변환한다. parseFloat도 문자열에 처리못할 문자가 있으면 parseInt와 마찬가지로 처리한다.


		let a = "5.14g35";
		document.write(Number(a));	// NaN
		document.write(parseInt(a));	// 5
		document.write(parseInt("10", 16));	// 16
		document.write(parseFloat(a));	// 5.14




- 숫자 -> 문자열

ㄴ String(숫자) : 해당 숫자를 문자열로 변환한다. 이는 사실 ""를 더해주는 암시적 형변환을 사용하면되므로 사용성이 떨어진다.




3. 논리형 변환

- false : 0, "", NaN, null, undefined 같은 경우

- true : 그 외에 경우




4. 변수의 타입 확인 typeof()

- typeof(변수) : 여기에는 변수 뿐만아니라 객체를 사용할 수도 있다. 이 함수는 자료형을 리턴해주며 리턴되는 값은 "number", "string", "boolean" 처럼 소문자 문자열이다.




※ == vs. ===

- == : 값만 비교한다.

- === : 값뿐만 아니라 타입까지 비교한다.




'JavaScript > 기초' 카테고리의 다른 글

JavaScript eval 함수  (0) 2020.03.14
JavaScript 함수  (0) 2020.03.14
JavaScript 예외 처리  (0) 2020.03.13
JavaScript 제어문  (0) 2020.03.13
JavaScript 변수  (0) 2020.03.12

JavaScript 변수





 변수형

 변수 데이터 형으로는 숫자, 문자열 외에도 클래스, 객체, 함수 등등이 있다.




ㄴ 변수 선언 방법
// 기본적인 변수 선언
let i = 5;     // 숫자형
let s = "test" // 문자열
const PI = 3.14 // 상수

// 클래스(Class)
function MyC() { }
let myC = MyC();


// 객체(Object)
function MyC() { }
let myO = new MyC();


// 함수(Function)
function fun() { }
let func = fun;
 

클래스, 객체, 함수 형을 구현할 때는 모두 function을 사용한다.




 주석

- 한 줄 : // 

- 여러 줄 : /*   */




 변수 값 확인하기

1. document.write() 

: html의  body 영역에 출력할 수 있다. 이곳에는 html 태그를 사용할 수도 있다.


let v = 20;
document.write("변수 : ", v);   // ','를 사용
document.write("변수 : " + v);  // '+'를 사용

ㄴ 문자열과 숫자형을 +하면 숫자형을 문자열로 변환 한다.


※ 개행을 위해서는 document.write("텍스트<br>"); 처럼 <br>을 사용해 주어야 한다.



2. console.log()

: 디버깅 함수 중 하나로서 특정 부분에 삽입하여 값을 확인하기 용이하다. 이를 사용하면 오류를 찾거나 특정 어느 부분에서 값이 잘못되었는지를 확인하기 편하다. 

단, document처럼 body영역에 출력하는 것이 아니라 Console에 출력한다.            ( Chrome일 경우 [F12] - Console 에서 확인 )





알림 창 띄우기


1. alert("출력할 문자열")

: 알림 창을 띄워 값을 출력한다. 값을 확인하거나 할 때 사용한다.

 


2. prompt("텍스트", "기본값")

: 알림 창을 띄워 값을 입력 받는다. 


	function say() {
		let who;
		who = prompt("입력 테스트 중", "기본");
		if(who) {
			alert(who + "확인함");
		}
		else {
			alert(who + "취소함");
		}
	}

 위 코드처럼 if문을 사용하여 확인과, 취소에 따라 실행을 다르게 해줄 수 있다.

 단, 취소를 눌렀을 때는 변수의 값이 저장 안 됨으로 초기화 된 변수를 사용해야 한다.





※ undefined  vs.  null

 보통 변수를 선언하고 값을 할당하지 않으면 값이 아직 없다는 의미로 undefined가 들어간다.

null 또한 값이 없다는 의미로 의미상으로는 같다.

 하지만 null은 '아무것도 참조하지 않는다'는 의미로서 주로 객체를 초기화할 때 사용한다는 차이점이 존재한다.


'JavaScript > 기초' 카테고리의 다른 글

JavaScript eval 함수  (0) 2020.03.14
JavaScript 함수  (0) 2020.03.14
JavaScript 예외 처리  (0) 2020.03.13
JavaScript 제어문  (0) 2020.03.13
JavaScript 형변환  (0) 2020.03.12

포토샵 단축키 정리

 

 

 

 

 

레이어


단축키 기능
Ctrl + Shift + N 새 레이어 생성
Alt + Delete 해당 레이어 전경색1)으로 채우기
Ctrl + Delete 해당 레이어 배경색2)으로 채우기
Ctrl + E 레이어 병합 [병합할 레이어들 선택 후]
Ctrl + J 레이어 복사 [복사할 레이어(들) 선택 후]
Ctrl + ] 선택한 레이어 위로 이동
Ctrl + [ 선택한 레이어 아래로 이동
Ctrl + Shift + ] 선택한 레이어 맨 위로 이동
Ctrl + Shift + [ 선택한 레이어 맨 아래로 이동
Alt + ] 레이어 선택 위로 이동
Alt + [ 레이어 선택 아래로 이동
Ctrl + G 레이어 그룹 [그룹할 레이어들 선택 후]
Ctrl + / 레이어 잠금
Ctrl + , 레이어 숨기기
Ctrl + Alt + A 모든 레이어 선택

 

 

 

 

 

편집


단축키 기능
Ctrl + T 자유 변형 [크기, 회전]
Ctrl + Z 되돌리기
Ctrl + Shift + Z 되돌리기 취소
Ctrl + Alt + C 캔버스 크기
Ctrl + Alt + I 이미지 크기

 

 

 

 

 

 

파일


단축키 기능
Ctrl + S 파일 저장
Ctrl + O 파일 불러오기
Ctrl + N 새 파일 만들기
Ctrl + Shift + S 다른 이름으로 저장
Alt + Ctrl + Shift + W 파일 내보내기

 

 

 

 

 

 

화면


단축키 기능
Ctrl + R 눈금자 보이기/숨기기
Ctrl + ' 그리드(격자) 선 보이기
Ctrl + ; 안내선 보이기/숨기기
   

 

 

 

 

 

 

 

Html 특수 문자, 기호 사용

 

 

 

 

Html은 'UTF-8' 를 표준으로서 다양한 종류의 문자, 기호, 특수 문자를 표현할 수 있다.

 

하지만 태그를 감싸줄 때 사용하는 '<', '>' 처럼 Html에서 예약어로 지정되어 있는 문자나 특수 문자들을 입력하기 위해서는 다른 방법을 사용해야 한다.

 

 

 

 

 

자주 사용되는 특수 문자들

특수 문자 엔티티표현
< &lt;
> &gt;
& &amp;
" &quot;
' &apos;
공백(한 칸) &nbsp;

 

 

 

 

 

예시 코드


<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="utf-8">
        <title>제목</title>
    </head>
    <body>
        <h1>특수 문자들</h1>
        & quot;
        & apos;
        <br><br>
        & uarr;
        & rarr;
        & larr;
        & darr;
        <br><br>
        & lt;
        & gt;
        <br><br>
        & sum;
        & nbsp;
        & sub;
        & infin;
        & divide;
    </body>
</html>

 

해당 예시 코드에서는 입력한 값이 무엇인지 보기 위하여 '&' 이후 한칸을 띄어쓰기 해주었지만 붙여주어야 문자로 보인다.

 

 

 

 

 

결과

셀 수 없을 정도로 많은 기호들이 있으므로 자주 사용하는 것 몇 개만 기억하고, 나머지는 사용할 때마다 찾아서 사용하면 된다.

 

 

 

 

 

안드로이드 뷰페이저, 탭 레이아웃 구현 - 탭 연동하기

 

 

 

 

2020/02/12 - [Android] - 안드로이드 뷰페이저, 탭 레이아웃 구현 (1) - 좌우로 밀어서 페이지 전환

불러오는 중입니다...

해당 글은 이전 글과 이어진다.

 

 

 

 

 

결과

 

 

 

 

 

 

 

구현

 

1. MainActivity

- 23 ~ 32라인이 추가되었다.

 > 24 ~ 25 라인 : 탭과 뷰 페이저를 연동시키는 과정

 > 27 ~ 32 라인 : 이미지들을 ArrayList에 저장한 후 탭에 넣어준다. 이미지를 넣지 않을꺼면 생략하여도 된다.

 

 

※ 이미지는 직접 파일을 구하여 이름의 맞게 넣어주어야 한다. 아래 사이트에 가면 사용할 여러 이미지를 받을 수 있다.

 

https://material.io/resources/icons/?style=baseline

 

Resources

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

 

 

 

 

 

 

 

* MainActivity

package com.example.myapplication;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager vp = findViewById(R.id.viewpager);
        VPAdapter adapter = new VPAdapter(getSupportFragmentManager());
        vp.setAdapter(adapter);

        // 연동
        TabLayout tab = findViewById(R.id.tab);
        tab.setupWithViewPager(vp);

        ArrayList<Integer> images = new ArrayList<>();
        images.add(R.drawable.cal);
        images.add(R.drawable.sea);
        images.add(R.drawable.set);

        for(int i=0; i<3; i++) tab.getTabAt(i).setIcon(images.get(i));
    }
}

 

 

 

 

 

 

 

 

 

2. Adapter

- 탭과 연동을 해주면 탭의 텍스트가 표시가 안되게 된다. 그래서 이를 표시해주기 위하여 Adapter파일로 간다.

 

- 'Ctrl + O' 를 눌러 getPageTitle을 타이핑하여 찾은 후 추가해 준다.

 

- 탭 아이템들의 표시할 텍스트를 ArrayList를 선언하여 저장해준 후 getPageTitle에서 position에 따라 표시하도록 한다.

 

 

 

 

 

 

 

 

3. Tab Layout

- app:tabIndicatorColor 를 사용하여서 탭의 indicator 색을 변경해 줄 수 있다.

 

- app:tabSelectedTextColor 를 사용하여서 선택된 탭의 텍스트 색을 변경해 줄 수 있다.

 

- 더욱 복잡한 효과를 적용하고 싶다면 직접 파일로 만들어 적용해 주어야 한다.

 

( ※ app: 속성을 찾지 못할 때는 'app:' 까지 입력하면 추가할 것인지 물으면 'Alt + Enter' 를 해주면 된다. )

 

 

 

 

 

 

 

4. 실행 결과

- 이전 글에서와 달리 탭을 눌러도 그에 따라 페이지가 변하며 페이지를 변경하여도 그에따라 탭도 변경된다.

 

 

탭의 텍스트만 넣고 싶다면 위에서 이미지를 넣는 부분을, 이미지만을 넣고 싶다면 텍스트를 넣는 부분을 빼주면 된다.

 

 

 

 

안드로이드 뷰페이저 + 탭  구현하기

 

 

 

 

결과

실행 화면

 

 

 

 

뷰 페이저(ViewPager)

 

좌우로 화면을 밀어 페이지를 전환할 수 있는 뷰

 

 

 

 

탭(Tab Layout)

 

뷰 페이저와 연동하여 뷰 페이저의 페이지들의 메뉴처럼 사용할 수 있다.

 

 

 

 

 

 

 

구현

 

1. 레이아웃 구현

- TabLayout 을 추가해주면 다음과 같은 창이 뜬다면 OK를 누른다. ( 필요로 하는 라이브러리를 추가하겠다고 묻는거다)

 

 

 

 

 

 

- 라이브러리를 추가하고 sync를 하느라 잠시 기다려야 한다. Module: app의 가보면 가장 하단의 material이 추가되었다.

 

 

 

 

 

 

- 이제 다음과 같이 레이아웃을 구성해 준다.

 

 

 

 

 

* 레이아웃 코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_Item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab1" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_Item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab2" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_Item3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab3" />
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

 

 

 

 

 

 

 

2. 페이지로 사용할 Fragment 생성

- 뷰 페이저의 보여줄 페이지를 작성하기 위하여 Fragment를 만들어 준다.

(반드시 Fragment일 필요는 없지만 Fragment를 사용하여 쉽게 구현이 가능하다.)

 

 

 

 

 

- 해당 예시에서는 3개의 페이지만을 이용하므로 위 과정을 반복하여서 Fragment1부터 3까지 만든다.

 

 

 

 

 

- 각 페이지가 전환된 것을 구분하기 편하게 하기 위하여 3개의 Fragment 레이아웃에서 각각 다른 background-Color를 입혀준다.

 

 

 

 

 

 

 

3. ViewPager 의 Adapter 생성

- Java Class 파일을 하나 생성한 후 FragmentPagerAdapter를 상속받도록 한다. 상속받는 것 까지 하였으면 위 이미지처럼 빨간 라인이 보인다.

 

- 커서를 클래스 안에 두고 'Ctrl + i' 를 누르면 위 이미지 처럼 창이 뜨며 2가지를 추가해준다.

 

- 이후 'Alt + Insert' -> Constructor(생성자)를 선택하여 추가해주면 빨간 라인이 사라지며 기본적인 구조가 완성된다.

 

 

 

 

 

 

- ArrayList를 Fragment형으로 정의하여 선언 후 이전에 생성하였던 Fragment 1~3까지 add를 이용하여 추가해 준다.

(※ Fragment 이름을 위와 다르게 하였다면 이름을 맞추어주어야 한다.)

 

 

 

 

* Adapter 코드

package com.example.myapplication;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.ArrayList;

public class VPAdapter extends FragmentPagerAdapter {
    private ArrayList<Fragment> items;
    public VPAdapter(FragmentManager fm) {
        super(fm);
        items = new ArrayList<Fragment>();
        items.add(new Fragment1());
        items.add(new Fragment2());
        items.add(new Fragment3());
    }

    @Override
    public Fragment getItem(int position) {
        return items.get(position);
    }

    @Override
    public int getCount() {
        return items.size();
    }
}

 

 

 

 

 

 

 

4. MainActivity

- ViewPager와 구현하였던 Adapter를 생성해 준 후 연결해 준다.

 

 

 

 

 

 

 

5. 실행 결과

- 실행을 한 후 페이지를 끌어 옆으로 넘기면 페이지가 전환되는 것을 확인할 수 있다. 하지만 tab과 페이지는 따로 동작한다.

 

 

 

 

위 문제를 해결하기 위해서는 탭과 페이지를 연동해주어야 하며 이는 다음글에서 다룬다.

또한, 추가적으로 탭 레이아웃의 이미지를 넣어 볼 것이다.

 

 

 

 

2020/02/13 - [Android] - 안드로이드 뷰페이저, 탭 레이아웃 구현 (2)

불러오는 중입니다...

 

 

 

 

 

 

 

+ Recent posts