웹 프로그래밍 및 실습
This presentation is the property of its rightful owner.
Sponsored Links
1 / 68

웹 프로그래밍 및 실습 (Web Programming & Practice) 자바스크립트 최미정 강원대학교 IT 대학 컴퓨터과학전공 PowerPoint PPT Presentation


  • 139 Views
  • Uploaded on
  • Presentation posted in: General

웹 프로그래밍 및 실습 (Web Programming & Practice) 자바스크립트 최미정 강원대학교 IT 대학 컴퓨터과학전공. 강의 내용. 자바스크립트. 자바스크립트의 기초 자바스크립트의 기본 문법 자바스크립트 제어 구조 함수 내장 객체 자바스크립트를 이용한 다양한 효과주기. 자바스크립트 개요. 자바스크립트. 사용자와 상호작용하는 동적 웹 문서 작성 웹에서 사용할 수 있도록 만들어진 스크립트 언어 선 마이크로시스템스와 넷스케이프사가 공동으로 개발 주요 특징

Download Presentation

웹 프로그래밍 및 실습 (Web Programming & Practice) 자바스크립트 최미정 강원대학교 IT 대학 컴퓨터과학전공

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Web programming practice it

웹 프로그래밍 및 실습

(Web Programming & Practice)

자바스크립트

최미정

강원대학교 IT대학 컴퓨터과학전공


Web programming practice it

강의 내용

자바스크립트

자바스크립트의 기초

자바스크립트의 기본 문법

자바스크립트 제어 구조

함수

내장 객체

자바스크립트를 이용한 다양한 효과주기


Web programming practice it

자바스크립트 개요

자바스크립트

  • 사용자와 상호작용하는 동적 웹 문서 작성

  • 웹에서 사용할 수 있도록 만들어진 스크립트 언어

  • 선 마이크로시스템스와 넷스케이프사가 공동으로 개발

  • 주요 특징

    • 웹 문서(HTML 문서)에 포함되어 웹 서버에서 브라우저로 다운로드됨

    • 웹 브라우저가 자바스크립트를 실행 (실행 엔진을 브라우저 내에 포함)

    • 마우스 클릭, 키보드 입력 등의 이벤트 처리를 서버와 연동 없이 실행

    • 윈도우 프레임을 조절하거나, 윈도우 방문 히스토리를 기억하는 등의 프로그래밍 가능


Web programming practice it

자바스크립트의 실행

자바스크립트

  • 컴파일러 같은 특수한 개발 도구가 필요하지 않음 브라우저에 내장된 인터프리터(interpreter)에 의해 실행됨

  • 메모장 등의 에디터 프로그램과 웹 브라우저만 있으면 쉽게 프로그래밍 할 수 있음

  • 클라이언트 스크립트

    • 브라우저(클라이언트)에서 수행되는 스크립트

    • JavaScript, VB Script  작성이 간단하나, 복잡한 프로그래밍이 어렵고, 소스가 공개됨

  • 서버 스크립트

    • 서버에서 수행되고, 결과만 브라우저에 전달됨

    • ASP, PHP, JSP  복잡한 프로그래밍이 가능하고, 소스가 공개되지 않으나, 어려움


Web programming practice it

자바스크립트의 특징

자바스크립트

웹 문서에 바로 코딩하여 삽입할 수 있기 때문에 작성 및 편집이 쉽다.

클라이언트에서 바로 실행되므로, 처리 과정이 신속 (컴파일 불필요)

플랫폼에 독립적 (거의 모든 브라우저에서 지원)

객체지향 언어이나, 클래스의 상속을 지원하지 않으며, 자바 언어에 비해 한정된 객체와 메소드만을 지원


Web programming practice it

자바스크립트의 구조

자바스크립트

자바스크립트는 HTML문서에서 <head>부분이나 <body>부분에 <script>태그로 자바스크립트를 정의하여 삽입


Web programming practice it

자바스크립트의 주석문(1/2)

자바스크립트


Web programming practice it

자바스크립트의 주석문(2/2)

자바스크립트


Web programming practice it

자바스크립트의 삽입 방법 (1/2)

자바스크립트

문서 내부에 자바스크립트 포함시키기


Web programming practice it

자바스크립트의 삽입 방법 (2/2)

자바스크립트

외부파일에 작성된 자바스크립트 불러오기


Web programming practice it

강의 내용

자바스크립트

자바스크립트의 기초

자바스크립트의 기본 문법

자바스크립트 제어 구조

함수

내장 객체

자바스크립트를 이용한 다양한 효과주기


Web programming practice it

기본 자료형

자바스크립트


Web programming practice it

변수(variable) (1/2)

자바스크립트

  • 변수란?

    • 프로그램에서 자료형 값을 저장하기 위한 기억장소의 이름

    • (상수와 다르게) 프로그램이 실행되면서 기억된 내용이 변경될 수 있음

    • 지역 변수(local variable)와 전역 변수(global variable)로 분류

  • 지역 변수

    • 함수 안에 선언된 변수로, 함수 안에서만 사용될 수 있음

    • 지역 변수 선언의 예

      • var sum; // sum이라는 변수를 지역 변수로 선언한다.

      • var total = 100; // 지역 변수 sum을 선언하고, 값을 100으로 초기화한다.


Web programming practice it

변수(variable) (2/2)

자바스크립트

  • 전역 변수

    • 함수 밖에 선언된 변수로, 여러 함수에 걸쳐 사용될 수 있음

    • 전역 변수 선언의 예:sum = 200; // 전역 변수 sum을 선언하고, 값을 200으로 초기화

  • 변수를 만드는 예

    • 변수명의 첫 글자는 반드시 영문자나 밑줄로 시작

    • 변수명에는 영문자 (A~Z, a~z), 숫자(0~9), 밑줄(_)만을 사용

    • 이미 정의한 예약어는변수명으로 사용 불가

    • 예약어의 예: abstract, in, static, void, super, long, break, final, if, …


Web programming practice it

연산자의 종류

자바스크립트

산술 연산자(사칙연산을 수행할 때사용하는 연산자):+, -, *, /, %

대입 연산자(값(숫자)을 대입할 때 사용하는 연산자):=, +=, -=, *=, /=, %=

관계 연산자(두 값의 크기를 비교하는 연산자):>, <, >=, <=, ==, !=

논리 연산자(여러 조건(관계 연산 결과)을 연결할 때 사용하는 연산자)!, &&, ||

증감 연산자(변수 값을 1 증가 혹은 감소시키는 연산자):++, --


Web programming practice it

산술 연산자

자바스크립트


Web programming practice it

대입 연산자

자바스크립트


Web programming practice it

관계 연산자

자바스크립트


Web programming practice it

논리 연산자

자바스크립트


Web programming practice it

증감 연산자

자바스크립트


Web programming practice it

강의 내용

자바스크립트

자바스크립트의 기초

자바스크립트의 기본 문법

자바스크립트 제어 구조

함수

내장 객체

자바스크립트를 이용한 다양한 효과주기


Web programming practice it

IF (1/6)

자바스크립트

  • 조건(condition)이 참인경우에만 해당 문장들을 수행하고자 할 때, 사용하는 제어문

  • 단순 IF문

    • 조건을 만족하는 경우에만, 명령문(들)을 실행

    • 조건이 만족하지 않으면 명령문(들)을 실행하지 않고, 다음 단계로 진행함

if(조건)

명령문1;

if(조건) {

명령문1;

명령문2;

명령문n;

}


Web programming practice it

IF (2/6)

자바스크립트

단순 IF문 예제


Web programming practice it

IF (3/6)

자바스크립트

  • IF ELSE

    • 조건을 만족하면, 명령문A(들)를 실행

    • 조건을 만족하지 않으면 명령문B(들)를 실행

if(조건)

명령문A;

else

명령문B;

if(조건) {

명령문A1;

명령문An;

} else {

명령문B1;

명령문Bn;

}


Web programming practice it

IF (4/6)

자바스크립트

IFELSE 예제


Web programming practice it

IF (5/6)

자바스크립트

  • 다중 IF ELSE

    • 조건1을 만족하면, 명령문1을 실행

    • 조건2을 만족하면, 명령문2를 실행

    • 만족하는 조건이 없으면 명령문n을 수행

if(조건1)

명령문1;

else if(조건2)

명령문2;

else

명령문n


Web programming practice it

IF (6/6)

자바스크립트

다중 IFELSE


Web programming practice it

WHILE (1/2)

자바스크립트

  • 주어진 조건이 만족하는 한 WHILE문 내의 문장(들)을 반복해서 실행

    • 조건이 참(true)이면,WHILE 블록 안의 명령문들을 (반복) 수행

    • 조건이 거짓(false)인 경우, WHILE문을 수행하지 않고 루프를 빠져나감

while(조건) {

명령문 1;

명령문 2;

명령문 n;

}


Web programming practice it

WHILE (2/2)

자바스크립트


Web programming practice it

DO WHILE (1/2)

자바스크립트

  • 조건을 검사하여 조건이 만족하는 한 루프를 반복 수행

  • WHILE과의 차이점

    • WHILE은 조건을 먼저 검사한 후 실행여부를 결정, DO WHILE은 먼저 실행한 후 조건을 검사

    • WHILE의 경우 명령문들이 한번도 수행되지 않을 수 있으나,DO WHILE의 경우 명령문들은 적어도 한번은 수행됨

do {

명령문 1;

명령문 2;

명령문 n;

} while(조건);


Web programming practice it

DO WHILE (2/2)

자바스크립트


Web programming practice it

FOR (1/2)

자바스크립트

  • 조건이 만족하는 동안에 FOR문 내의 문장들을 반복하여 수행

    • FOR문 내부는 초기화 부분, 조건 부분, 증감 부분으로 구성됨

    • 초기화 부분은 처음 한 번만 수행되고,조건 부분은 루프 수행 시마다 계속 수행할지 여부를 판단하며,증감 부분은 매 루프 마지막에 인덱스(index) 변화를 위해 수행되는 부분임

for(초기화 부분; 조건 부분; 증감 부분) {

문장1;

}


Web programming practice it

FOR (2/2)

자바스크립트


Web programming practice it

CONTINUE & BREAK (1/3)

자바스크립트

  • CONTINUE

    • 명령문(들)을 반복하는 과정에서 현 단계(반복)의 진행을 중단시키고,다음의 새로운 반복 단계를 위한 조건 검사 부분으로 되돌아가고자 할 때 사용

  • BREAK

    • 반복 과정을 벗어나고자 할 때 사용 (루프를 벗어나고자 할 때 사용)


Web programming practice it

CONTINUE & BREAK (2/3)

자바스크립트


Web programming practice it

CONTINUE & BREAK (3/3)

자바스크립트


Web programming practice it

SWITCH (1/2)

자바스크립트

  • 여러 가지 조건에 맞추어 수행해야 하는 명령문이 있는 경우 사용

    • 주어진 값이 value1인 경우, 명령문들1이 수행되고,주어진 값이 valueN인 경우, 명령문들N이 수행되며,주어진 값에 해당하는 value가 없는 경우, default의 명령문들X가 수행된다.

switch(값) {

case value1:

명령문들1;

break;

case valueN:

명령문들N;

break;

default:

명령문들X;

break;

}


Web programming practice it

SWITCH (2/2)

자바스크립트


Web programming practice it

강의 내용

자바스크립트

자바스크립트의 기초

자바스크립트의 기본 문법

자바스크립트 제어 구조

함수

내장 객체

자바스크립트를 이용한 다양한 효과주기


Web programming practice it

함수(function) 개념

자바스크립트

  • 특정한 작업을 수행하도록 만들어진 독립적인 프로그램 모듈

  • 프로그램에서 반복되는 부분을 함수로 만들어 놓음

    • 해당 함수가 필요할 때마다, 호출(call)하여 사용

    • 프로그램 크기를 줄일 수 있고, 작성 시간도 단축 시킬 수 있음

  • 프로그램의 모듈화 가능

    • 하나의 큰 프로그램을 작은 단위의 여러 함수로 분해하여 작성

    • 함수를 통한 모듈화가 가능하여, 알아보기 쉽고 수정이 용이함

  • 함수의 입출력과 처리

    • 함수는 매개변수(parameter)를 입력으로 받아서,

    • 내부 처리를 수행한 후(즉, 함수의 기능을 수행한 후),

    • 결과를 리턴(출력)한다.


Web programming practice it

자바스크립트 함수의 구조

자바스크립트


Web programming practice it

함수예제

자바스크립트


Web programming practice it

내장 함수 (1/2)

자바스크립트

자바스크립트에 기본으로 포함된 함수


Web programming practice it

내장 함수 (2/2)

자바스크립트

alert() 함수의 사용 예


Web programming practice it

강의 내용

자바스크립트

자바스크립트의 기초

자바스크립트의 기본 문법

자바스크립트 제어 구조

함수

내장 객체

자바스크립트를 이용한 다양한 효과주기


Web programming practice it

자바스크립트 내장 객체(Built-in Object)

자바스크립트

  • 자바스크립트에서 많이 사용되는 객체를 미리 정의하여 제공

  • 주요 내장객체

    • Number

    • Math

    • Screen

    • Date

    • Array

    • String


Web programming practice it

Math (1/2)

자바스크립트

  • 자연로그, 지수 등의 수학적 처리가 필요한 속성 제공

  • sine, cosine, log 등의 메소드를 제공하여 복잡한 계산식 처리

    • abs(), ceil(), cos(), exp(), floor(), log(), max(), min(), pow(), sin(), sqrt(), tan()


Web programming practice it

Math (2/2)

자바스크립트


Web programming practice it

Screen (1/2)

자바스크립트

컴퓨터의 화면 해상도, 색상 수, 화면 크기 등의 정보를 알려주는 객체


Web programming practice it

Screen (2/2)

자바스크립트


Web programming practice it

Array (1/2)

자바스크립트

Array(배열): 동일한 타입을 갖는 객체(데이터)들의 모임

Array 객체 메소드


Web programming practice it

Array (2/2)

자바스크립트


Web programming practice it

Array (2/2)

자바스크립트


Web programming practice it

브라우저 내장 객체

자바스크립트

  • 자바스크립트 내장 객체임

  • 웹 브라우저 자체에 대한 정보 (이름, 버전 정보 등)

  • 대표적인 브라우저 내장 객체

    • Window: 브라우저 객체 중 최상위 객체, 여러 속성과 메소드 제공

    • Document: 브라우저에 보이는 문서의 내용을 제어, 배경 및 글자 색상, 입출력 제어

    • Location: 웹 문서의 주소에 관련된 정보 관리

    • History: 브라우저에서 최근 방문한 주소 목록을 이벤트에 따라 앞뒤로 이동할 수 있는 기능을 제공


Web programming practice it

History 사용 예제

자바스크립트


Web programming practice it

강의 내용

자바스크립트

자바스크립트의 기초

자바스크립트의 기본 문법

자바스크립트 제어 구조

함수

내장 객체

자바스크립트를 이용한 다양한 효과주기 (개념 위주로 이해 바람)


Web programming practice it

팝업 창 띄우기 (1/2)

자바스크립트

사이트를 방문한 사용자에게 중요한 정보를 알려주기 위한 용도로 사용

Window 객체의 open 메소드를 이용하여 만듦

사용자에게 혼란을 주는 많은 수의 팝업 창을 띄우는 것은 자제해야 함


Web programming practice it

팝업 창 띄우기 (2/2)

자바스크립트


Web programming practice it

즐겨찾기에 추가하기 (1/2)

자바스크립트

사용자가 사이트를 방문할 때 마다 직접 URL를 입력 또는 검색을 통해서 찾아오는 불편함을 없애기 위하여 개발

브라우저의 즐겨찾기 항목을 클릭함으로써 원하는 사이트를 쉽게 이동


Web programming practice it

즐겨찾기에 추가하기 (2/2)

자바스크립트


Web programming practice it

프린트하기

자바스크립트

현재 페이지(혹은 원하는 페이지) 내용을 프린트할 수 있음


Web programming practice it

상태바에 흐르는 메시지

자바스크립트

메뉴의 하단의 상태바에 정보를 표시하기 위해 사용

너무 많은 효과를 주면 사용자에게 혼란을 줄 수 있음


Web programming practice it

원하는 배경색으로 바꾸기 (1/2)

자바스크립트

문서에 대한 배경색을 의미 (기본적으로 배경색은 흰색)

Document 객체의 bgColor속성을 이용


Web programming practice it

원하는 배경색으로 바꾸기 (2/2)

자바스크립트


Web programming practice it

마우스 오른쪽 버튼 금지

자바스크립트

보안이 필요하다 생각되어 HTML 코드를 숨기고자 할 경우에 사용

Document 객체의 oncontextmenu속성을 이용


Web programming practice it

마우스 커서를 따라다니는 이미지(1/2)

자바스크립트


Web programming practice it

마우스 커서를 따라다니는 이미지(2/2)

자바스크립트


Web programming practice it

강의 내용

자바스크립트

자바스크립트의 기초

자바스크립트의 기본 문법

자바스크립트 제어 구조

함수

내장 객체

자바스크립트를 이용한 다양한 효과주기


  • Login