웹 프로그래밍 4/28 - DOM 실습

DOM 실습

http://jyheo.github.io/javascript/exercise3.html

추가 버튼을 눌렀을 때 이미 동일한 이름의 동물이 존재하면 alert('동일한 이름이 존재합니다!')라고 경고창을 나타내고 추가하지 않도록 코드 추가

목록을 선택하면 아래와 같이 나타다도록 코드 추가

임베디드OS 4/28 실습: 라즈베리파이 2와 8x8 Dot Matrix LED

실습: 라즈베리파이 2와 8x8 Dot Matrix LED

Java 4/26 - 6장 패키지 개념과 자바 기본 패키지(실습)

6장 패키지 개념과 자바 기본 패키지(실습)

java.util.Calendar

실습:

https://github.com/jyheo/JavaExercise/blob/master/src/javalang/javalang.java

웹 프로그래밍 4/26 9장 문서 객체 모델(DOM)

9장 문서 객체 모델(Document Object Model, DOM)

실습+과제: 간단한 계산기 만들기

http://jyheo.github.io/javascript/calc.html

• 뺄셈 버튼 동작하게 만들기
• display_debug() 함수를 수정하여 debug_area의 스타일을 꾸며보기(보더, 배경색, 폰트 등을 지정해본다.)
• 기타 다른 기능(예를 들어 곱하기, 나누기 등) 추가하기
• 이런 저런 동작을 하다보면 버그가 있는데, 이 버그를 찾아서 수정해보기.

결과물 제출

1. 실습 결과는 자신의 github.io 페이지에 calc.html로 넣어두기. 즉 ID.github.io/calc.html 로 접속 가능해야 함.

2. 아래 목차로 실습 보고서(hwp, doc, pdf, html 모두 가능)를 작성하여 jyheo.report@gmail.com으로 보내기

목차

- 실습 개요

- 각 실습 지시에 대한 해결 방법 코드와 설명

- 결론(요약)

Java 4/26 - 6장 패키지 개념과 자바 기본 패키지

6장 패키지 개념과 자바 기본 패키지

패키지(package)

멤버 접근 한정자(member access modifiers) 

https://docs.oracle.com/javase/tutorial/java/javaOO/accesscontrol.html

Access Levels

Modifier	Class	Package	Subclass	World
public	Y	Y	Y	Y
protected	Y	Y	Y	N
no modifier	Y	Y	N	N
private	Y	N	N	N

Object 클래스와 Wrapper 

Object 클래스 - http://hyeonstorage.tistory.com/178

Wrapper 클래스

https://en.wikipedia.org/wiki/Primitive_wrapper_class

http://hyeonstorage.tistory.com/168

java.lang.*

String, java.lang.StringBuffer

java.lang.Math

java.util.*

java.util.StringTokenizer

java.util.Calendar

인터넷시스템 4/18 - 2장 Application Layer (P2P, Socket Programming)

2장 Application Layer (P2P, Socket Programming)

P2P

• BitTorrent
• Distributed Hash Table

Socket Programming with Python

• UDP
• TCP
• https://github.com/jyheo/python365_hansung/tree/master/socket

실습:

DNS실습

C:\> nslookup -type=NS hansung.ac.kr

C:\> nslookup -type=MX hansung.ac.kr

C:\> nslookup ns.hansung.ac.kr

C:\> nslookup antispam.hansung.ac.kr

C:\> ipconfig /flushdns

http://gaia.cs.umass.edu/wireshark-labs/Wireshark_DNS_v6.01.pdf

2016년 1학기 중간시험 안내.

2016년 1학기 중간시험 안내.

Java B반: 4월19일 화요일 5교시(오후1시) 공학관A 405호

임베디드OS A반: 4월19일 화요일 3교시(오후11시) 수업 강의실(공학관A 403호)
임베디드OS N반: 4월19일 화요일 야2교시(오후6시55분) 수업 강의실(학과사무실 옆)

웹프로그래밍 B반: 4월21일 목요일 4교시(오후12시) 공학관A 405호

웹 프로그래밍 4/14 - 자바스크립트(객체)

자바스크립트(객체)

자바스크립트에서 객체는 원소마다 이름을 붙여 놓은 집합

원소는 이름:값 의 쌍으로 되어 있음.

배열은 인덱스로 접근하나 객체는 이름으로 접근

var Array = [1, 2, 3, 4];

Array[0]

var Object = {first:1, second:2, third:3, fourth:4};

Object['first']

또는

Object.first

http://jyheo.github.io/javascript/object.html

실습

http://jyheo.github.io/javascript/exercise2.html

obj_list를 아래와 같이 테이블로 나타나도록 바꾸기.

임베디드OS 4/14 - 라즈베리 GPIO: LED와 버튼

라즈베리파이 GPIO: LED와 버튼

임베디드 OS 4/12 - 교착상태

교착상태

강의 슬라이드
https://drive.google.com/open?id=0B5tRdB4hr8Dfc0wyZVhLSnpILTA

웹 프로그래밍 4/12 - 8장 자바스크립트(배열과 함수)

8장 자바스크립트(배열과 함수)

배열(Array)이란?

수학에서 배운 집합을 생각하면 되겠음.
단, 집합과 다른점이라면 중복 원소도 허용한다는 정도.

집합은 A = { 1, 2, 3, 4} 와 같이 쓴다면,
자바스크립트의 배열은
var A = [1, 2, 3, 4];
var a0 = A[0];    // 배열 A의 첫 번째 원소
var a1 = A[1];    // 두 번째 원소

예제)
http://jyheo.github.io/javascript/array.html

참고: 배열 다루기
http://www.w3schools.com/js/js_array_methods.asp

함수(function)란?

수학에서는...
f(x) = x + 3
f(2)는 5가 되고, f(3)은 6이 됨.

자바스크립트에서는...
function fname(x) {
    return x + 3;
}

var y = fname(2);

예제)
http://jyheo.github.io/javascript/function.html

실습

문자열 원소로 주어진 배열에서 특정 문자(대소문자 구분 없이)로 시작하는 단어를 골라서 리턴하는 함수를 작성한다.

http://jyheo.github.io/javascript/exercise1.html

getAwords(words) 함수는 words배열에서 'a'나 'A'로 시작하는 단어를 골라서 배열로 리턴.
getWordsBeginWith(words, begin_char) 함수는 words배열에서 begin_char로 시작하는 단어를 골라서 배열로 리턴. 단, begin_char가 'b'라고 하더라도 'b'와 'B'로 시작하는 모든 단어를 배열에 넣어서 리턴.

완성한 exercise1.html은 자신의 github 페이지에 넣어 둘 것.
ID.github.io/exercise1.html 로 접속 가능하도록

Java 4/11 - 5장 상속(추상 클래스와 인터페이스)

5장 상속(추상 클래스와 인터페이스)

추상 클래스

추상 메소드 - 선언은 했으나 내용이 정의되지 않은 메소드, 추상 메소드를 갖는 클래스는 무조건 추상 클래스가 되어야 함
추상 클래스 - 바로 객체 생성할 수 없고, 상속을 해서 추상 메소드를 정의한 후에 객체 생성이 가능하도록 하는 클래스, 추상 메소드가 없는 경우에는 상속만 하면 객체 생성이 가능해짐

abstract class AbsClass {
public AbsClass () { }
public abstract void abs_method(); // 추상 메소드
}

abstract class AbsClass { // 추상 메소드는 없지만 추상 클래스로 선언됨
public AbsClass () { }
public void abs_method();
}

http://www.tutorialspoint.com/java/java_abstraction.htm

인터페이스

- 모든 메소드가 추상 메소드임
- 상속 관계가 없는 객체에게 특정 동작(메소드)을 갖추도록 요구할 때 사용함.
예를 들어 호수에 물고기랑 플랑크톤, 다이버들 모두 '움직임'이란 메소드를 가질 수 있는데, 이들이 상속 관계라고 보기는 어렵다. 그런데, 공통 메소드를 갖는 객체들에 대해 처리하고 싶을때가 생긴다.

public interface AbsInterface {
        public void abs_method();
}

인터페이스는 상속이 아니라 구현(implements)을 통해 사용
class AbsImpl implements AbsInterface {
        public void abs_method() {}
}

한개 이상의 인터페이스를 상속하여 다른 인터페이스를 만들 수 있음
http://www.tutorialspoint.com/java/java_interfaces.htm

실습

https://github.com/jyheo/JavaExercise/blob/master/src/classes/Lake_If.java

1. Movable만 구현하는 Plankton 클래스와 Drawable과 Movable을 모두 구현하는 Diver 클래스를 만들어서 객체를 생성하여 Lake_If에 넣어보자.

다음 수업 첫 번째 시간 실습 내용(집에서가서 고민해보기)

2. 인터페이스 상속하기
Movable과 Drawable을 상속한 MoveDrawable interface를 만들고, 이를 이용하여 Lake_If에 addMoveDrawable(MoveDrawable md) 메소드를 추가하여 다음과 같이 main()이 가능하도록 해보자. 물론 MyFish도 약간 고쳐야 함.
        Lake_If lake = new Lake_If(80, 20);
        MyFish f = new MyFish("FIsh", "<#--<", 1, 1);
        lake.addMoveDrawable(f);
        lake.addDrawable(new MyRock("Rock", "(##)", 10, 10));

3. 메소드를 좀 더 심플하게!
Lake_If에 addObject(MyObject)라는 메소드를 추가한다. 그리고 인자로 받은 객체가 Moveable 인터페이스를 구현하고 있는지, Drawable 인터페이스를 구현하고 있는지 확인하여 해당 배열에 넣는 addDrawable()과 addMovable()을 적절히 호출한다.
힌트: instanceof 연산자 사용.

웹 프로그래밍 4/7 - 8장 자바스크립트 기본

8장 자바스크립트 기본

자료형(type)
변수(variable)

문자열

디버그 콘솔에 출력하기
console.log("출력 내용");

실습:

구구단 출력하기
<script>
var i;
for (i = 2; i < 10; i++) {
    for (j = 2; j < 10; j++) {
        console.log(i + "x" + j + "=" + (i*j));
    }
}
</script>

임베디드 OS 4/7 - 경쟁조건,상호배제 실습

경쟁조건,상호배제 실습

POSIX Thread 라이브러리를 사용하여 경쟁조건과 상호배제를 실습

경쟁조건(race condition)

https://github.com/jyheo/OperatingSystemExercise/blob/master/race_cond.c

상호배제(mutual exclusion)

https://github.com/jyheo/OperatingSystemExercise/blob/master/race_mutex.c

빌드&실행

$ gcc race_cond.c -o race_cond -l pthread

Makefile을 이용하기
https://github.com/jyheo/OperatingSystemExercise/blob/master/Makefile

해보기.

https://github.com/jyheo/OperatingSystemExercise/blob/master/race_cond_2.c

실행결과가 원하는 값 2000000이 나오지 않는 이유는?
해결하기 위한 방법은?

웹 프로그래밍 4/5 - 7장 CSS응용과 레이아웃(계속)

7장 CSS응용과 레이아웃

종합 예제

드랍메뉴 추가하기(CSS만으로)
.outer-menu-item:hover .inner-menu {
    display: block;
}

github에 자신의 홈페이지 만들기

1. github.com에 계정 만들기
2. 자신의ID.github.io 저장소(repository) 만들기
3. 저장소에 index.html 만들기

실습

github에 홈페이지 만들고 자신의 포트폴리오 페이지를 만들어 보자.
예제)
http://chrispederick.com/
http://zachhoefler.com/

실습 후 자신의 github 아이디를 jyheo@hansung.ac.kr로 다음과 같이 보내기.

제목: 웹 프로그래밍 github 아이디
내용:
안녕하세요. IT응용시스템공학과 1학년 홍길동 입니다.
웹 프로그래밍 수업 실습과 관련한 아래 정보를 보내드립니다.
홍길동/ 학번 /github아이디

홍길동 드림

Java 4/5 - 5장 상속(계속)

5장 상속(계속)

이전 시간 실습

http://jylecture.blogspot.kr/2016/04/java-44-5.html

누군가의 실습 내용:

https://github.com/amdjd/JavaExercise/blob/110d54c2e5d0ccbe184ee9a57bef1ddcf4b11e41/src/classes/Lake.java

moveFish() 함수

    public void moveFish() {
        for (int i = 0; i < fish.length; i += 2) {
            fish[i].move(width, height);
        }
        for (int i = 1; i < fish.length; i += 2) {
            fish[i].move2(width, height);
        }
    }

상속을 이용해서 바꿔보기

https://github.com/jyheo/JavaExercise/blob/master/src/classes/Lake10.java

class FoolFish extends Fish { // 상속
    FoolFish(String name, String shape) {
        super(name, shape); // 부모 클래스의 생성자를 부름, super는 부모 클래스를 가리킴
    }

    public void move(int width, int height) { // 메소드 오버라이딩(overriding), 원래 메소드는?
        x++; // Fish의 x, y가 private int였다고 지금은 protected int로 바뀌어 있음. 왜?
        y++;
        if (x >= width)
            x = 0;
        if (y >= height)
            y = 0;
    }
}

public class Lake10 {
    private int width;
    private int height;
    private Fish[] fishes;

    public Lake10(int width, int height) {
        this.width = width;
        this.height = height;
        fishes = new Fish[10];
        for (int i = 0; i < fishes.length; i++) {
            if (i % 2 == 0)
                fishes[i] = new Fish("Even", "<#--<");
            else
                fishes[i] = new FoolFish("Odd", "<$--<"); // Fish 레퍼런스가 FoolFish를 가리킨다?

                                                          // 업 캐스팅(upcasting)
        }
    }

    public void moveFish() {
        for (Fish f : fishes)         //  f가 Fish 객체일 때도 있고, FoolFish일 때도 있는데,
            f.move(width, height);    //  move()는 누구의 move()가 불리는가?
    }                                 //  동적 바인딩(dynamic binding)

임베디드 OS 4/5 - 병행성,경쟁조건,상호배제

병행성,경쟁조건,상호배제

멀티프로그래밍 > 병행성 > 경쟁조건 > 상호배제

강의 슬라이드:

https://drive.google.com/file/d/0B5tRdB4hr8DfbTA3bGFOcFlaYkk/view?usp=sharing

Java 4/4 5장 상속

5장 상속

객체간의 관계

A has-a B: 객체 A가 객체 B를 가지고 있음, A가 B로 구성됨. A에 B가 포함됨. 자동차는 바퀴4개와 엔진을 가지고 있음.
A is-a B: 객체 A는 객체 B이다. 학생은 사람이다. B가 더 일반화된 객체임.

A has-a B

- composition: 자동차는 엔진을 가지고 있음. 엔진이 없으면 자동차는 의미가 없음.
- aggregation: 호수에 물고기가 있음. 물고기가 없어져도 호수는 존재함.

보통 B는 클래스 A의 필드(속성, 멤버 변수)로 표현됨.

Car has-a Engine

class Engine {
}

class Car {
    private Engine engine;
    Car() {
        engine = new Engine();
    }
    Car(Engine e) {
        engine = e;
    }
}

A is-a B

A는 B의 한정(전문, specialized)된 객체, B는 A의 일반(generalized)화된 객체
Java와 같은 객체지향 언어에서는 상속(inheritance)를 통해 표현됨.

Student is a Person

class Person {
    private String id_card;
}

class Student extends Person {
    private String student_id_card;
}

상속 받은 클래스를 서브클래스(subclass, 자식), 상속된 클래스를 슈퍼클래스(superclass, 부모)라고 함.
Person이 슈퍼클래스, Student가 서브클래스

실습 

호수의 물고기 시뮬레이션

Lake has-a Fish

https://github.com/jyheo/JavaExercise/blob/master/src/classes/Lake.java

1. Lake의 Fish를 10마리로 늘려보자.
Fish를 배열로 만들 것!

2. 10마리 Fish 중 홀수 인덱스는 원래 대로 랜덤하게 움직이게 하고, 짝수 인덱스 Fish는 x, y를 무조건 1씩 증가하도록 움직이게 해보자.

새로운 Fish2 클래스를 만들어도 되고, Fish 클래스에 새로운 움직임 메소드를 만들어도 됨.