createElement를 이용한 리스트 추가 html5

by dbfud
2012/01/11 08:10
newstyle.egloos.com/2891215
덧글수 : 0

나는 지금까지 웹페이지의 기본틀은 모두 html에서만 만들고 그것에 대해서 자바스크립트가
관여 할 수 없다고 생각하였는데 이번 예제를 공부하면서 쉽게 그것이 깨어졌다.
목적이 플레이 리스트를 javascript로 만드는 것이었는데. createElement메소드를 이용하여서
바로 그냥 리스트에 추가 하는 것을 보고 말이다.

var li = document.createElement("li");

li.innerHTML = songName;

var ul = document.getElementById("playlist");

ul.appendChild(li);


이 부분인데 먼저 ul 에 들어갈 li 엘리먼트를 생성한 다음에 그 생성된 엘리먼트에 값을 넣어주고
원래 html의 ul부분을 얻어온 다음 바로 appendChild로 붙이는 ㅋ
정말 최고 였다. 참고로 모든 부분소스는 head first html5에 나오는 소스이다.

트랙백(0)덧글(0)

javascript event 다루기 (버튼 클릭 이벤트) html5

by dbfud
2012/01/11 08:05
newstyle.egloos.com/2891214
덧글수 : 0

자바스크립트를 이용한 버튼 클릭 이벤트 다루기는 매우 쉽다.
단순히 html 부분에서 form형태를 이용하여 버튼의 아이디를 설정해준 다음
자바스크립트를 모아놓은 js파일에서 선언하고 버튼의 onclick메소드를 이용하여
클릭시 실행될 함수만 지정하면 땡이기 때문이다. 게임프로그래밍 공부를 할떄 c/c++이나 윈도우
API를 이용하면 구현하기 껄끄러운 것들이 자바스크립트에서는 이렇게 쉽게 되는게 무척이나 신기했다.
아래는 중요부분만 나오는 코드이다.

test.html

<head>
...
<script src="playlist.js"></script> // 연동시킬 자바스크립트
...
</head>

<body>
...

<form>

<input type="text" id="songTextInput" size="40" placeholder="Song name"> 

<input type="button" id="addButton" value="Add Song"> // 버튼의 정보를 설정함

</form>
... </html>

playlist.js

window.onload= init;

function init() {
var button = document.getElementById("addButton"); // 아이디를 이용하여서 버튼의 정보를 얻고
button.onclick = handleButtonClick; // 버튼 클릭시에 handleButtonClick을 호출하게 함.
}

function handleButtonClick(e) 
{
    alert("Please enter a song"); // 버튼을 누르면 나오게 되는 메세지.
}

이걸 테스트 할때 실제로 동작이 잘안되 의아해 했었는데
문제는 handleButtonClick함수 작성시 마지막 }을 해주지 않아서
오작동 한 것이었다. 오작동이 있으면 버그가 있다.
웹페이지에서 이러한 메세지를 보여주지 않아서 당황스럽기도 했다. 

트랙백(0)덧글(0)

python 모듈 만들기 & 설치하기 python

by dbfud
2012/01/10 13:24
newstyle.egloos.com/2890965
덧글수 : 0

파이썬에 모듈을 올릴라면 다음을 명심하여야 한다.
먼저 파이썬으로 작성된 모듈이 있어야 하고, 두 번째 그것을 뒷받침 해주는 setup.py가 있어야한다.
이것은 head first python책의 예제로 있던 내용인데 기억하기 위해서 적어 둔다.

1. 모듈을 작성한다.

def print_lol(the_list):

for each_item in the_list:
    if isinstance(each_item, list):
        print_lol(each_item)
    else:
        print(each_item)

2. 그것을 서포트 해주는 setup.py파일을 작성한다.

from distutils.core import setup

setup(
        name    = 'nester', // 모듈의 이름
        version = '1.0.0', // 버전
        py_modules = ['nester'], // 어떤 파일 명으로 된 모듈인가?
        author = 'hfpython', // 작성자
        author_email = 'hfpython@headfirstlabs.com', // 저자 메일
        url = 'http://www.headfirstlabs.com', // 관련 사이트 주소
        description = 'A simple printer of nested lists', // 설명
        )

여기서 까먹은게 있는데 파이썬에서는 주석을 처리할때 # 뿐만 아니라 """으로도 주석처리가 가능하다
한줄로 할때는 #
여러줄을 한꺼번에 할때는 """

3. 이제 올릴 모듈 파일을 만든다.

이것은 cmd 라인 상에서 이루어져야 하는 작업이다.
명령어는 아주 단순히

python setup.py sdist

를 치게 되면 자동으로 모듈이 생성된다 .

4. 이제 다시 모듈을 설치 하려면 어떻게 해야하나?
단순히 그냥

python setup.py install

처 주면 된다 안에 정의되어 있는 setup.py에 따라서 자동으로 모듈이 설치 된다.
설치된 모듈을 사용할라면 아주 간단하게

import (module_name)

해주면 끝, 모듈넴과 관련됨 함수를 쓸때에는 (module_name).function() 하는 걸 잊지 말자.
이것 대신에

from (module_name) import (function) 해서 사용 해도 된다.

트랙백(0)덧글(0)

html5 javascript 연습 2 html5

by dbfud
2012/01/10 10:53
newstyle.egloos.com/2890925
덧글수 : 0

<!doctype html>

<html lang="en">

<head>

<title>Temperatures</title>

<meta charset="utf-8">

<script>

function showTemps() 

{

 	var tempByHour = new Array();

	tempByHour[0] = 59.2;

	tempByHour[1] = 60.1;

	tempByHour[2] = 63;

	tempByHour[3] = 65;

	tempByHour[4] = 62;

	for( var i = 0 ; i < tempByHour.length ; i ++){

		var theTemp = tempByHour[i];

		var id = "temp"+i;

		var li = document.getElementById(id);

		if( i == 0) {

		    li.innerHTML = "The temperature at noon was " + theTemp;

		} else {

		    li.innerHTML = "The temperatrue at " + i + " was " + tempByHour[i];

}

}

}

window.onload = showTemps;

</script>

</head>

<body>

<h1>Temperatures</h1>

<ul>

	<li id="temp0"></li>

	<li id="temp1"></li>

	<li id="temp2"></li>

	<li id="temp3"></li>

	<li id="temp4"></li>

</ul>

</body>

</html>

GetElemnetById를 사용하는 방법과 자바스크립트에서 배열 선언하는 방법 및 

활용법에 대해서 가르쳐 주고 있는 예제임.

트랙백(0)덧글(0)

html5 javascript 연습 html5

by dbfud
2012/01/10 10:41
newstyle.egloos.com/2890922
덧글수 : 1

<!doctype html>

<html lang ="en>

<head>

	<title>My Playlist</title>

	<meta charset="utf-8">

	<script>

		function addSongs() 

{

  		var song1 = document.getElementById("song1");

		var song2 = document.getElementById("song2");

		var song3 = document.getElementById("song3");

		song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";

		song2.innerHTML = "Greate Objects on Fire, by Jerry JSON Lewis";

		song3.innerHTML = "I Code the Line, by Johnny JavaScript";

}

   	window.onload = addSongs

 	</script>

</head>

<body>

	<h1>My awesome playlist</h1>

	<ul id="playlist">

		<li id="song1"></li>

		<li id="song2"></li>

		<li id="song3"></li>

	</ul>

</body>

</html>

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

궁금한 거 몇가지 질문이요 혹시 보시는 분 있으시면 ㅋ

그 뭐냐 왜 onload라는 것을 불러서 사용해 줘야하는지가 무척 궁금함..

책을 봤는데 그 생성 시점에 따른 차이라는 것은 알겠는데 정확히는 모르겠음..

그리고 계속 메모장에 웹페이지 만들기 연습을 하는데 좋은 툴 

아시는 것 있으면 좀 도와주시면 감사하겠습니다 ㅠㅠ 

트랙백(0)덧글(1)

android game (졸업작품) android

by dbfud
2012/01/09 21:09
newstyle.egloos.com/2890748
덧글수 : 4

졸업작품으로 만든 안드로이드 게임인데
소스도 허접하고 ;; 게임도 게임같지도 않고 그렇지만
온라인 이력서라는 목적에 맞게 소스 및 완료된 파일을 올립니다.
게임 실행 화면은 유투브 동영상으로 제공하고 싶은데 링크를 어떻게 올릴 지
모르겠네요. 소스 기반 엔진은 원래 어떤 책에 있는 엔진을 가져다가 사용하였으며
소스에 들어간 내용은 뭐.. 주석은 자세히 없습니다.

버그도 상당히 많구요... 게임의 기본적인 아이디어는
암전된 맵을 다 외워서 화면을 블랙앤 화이트로 전환하여 목적지까지 도달하는 퍼즐 겜입니다.
말로 하면 뭐 알아먹기 힘들죠;; 여튼 두서가 없기는 하지만

인터넷 이력서라는 목적에 맞게 이것도 제가 만든거니까 올리겠습니다.
관심 있으신분은 다운 받아서 즐겁게 활용해 주세요. 상업적으로 쓰시면 저 푼돈좀 쥐어 주시면 고맙겠습니다.

<동영상은 아래의 링크를 눌러주세요>

http://www.youtube.com/watch?v=dQ6KtZUcBSU&context=C3eeaeddADOEgsToPDskLm2HFjqo4KukUFkiHXUi6O

<아래는 실제 소스와 리소스들 - 대부분 인터넷에서 퍼온 리소스들>
FinalWarp_(8)_(2).vol1.egg
FinalWarp_(8)_(2).vol2.egg
FinalWarp_(8)_(2).vol3.egg

트랙백(0)덧글(4)

Semtex Level2 semtex

by dbfud
2011/10/06 03:11
newstyle.egloos.com/2858320
덧글수 : 0

이번 문제는 LD_PRELOAD를 이용하여서 중간에 함수를 가로채서 우리가 원하는 함수를 실행하게끔
만드는 것이 목적이다 먼저 로그인을 해서 /semtex/whoisme 라는 프로그램이 있는데
strings 함수를 이용하여서 내용을 까 보았다.

...
geteuid
.....

j)t29023saJtj209RElzw4%zwZ2%$BW%w54gzW$%MW$(WE5dsE(R/TerW$%W$l%&w456v
EUID == %d
The devils number is 666, the devils password is %c%c%c%c%c%c%c%c
This is not the devils number. Think dynamically!
main

각설하고 중요한 내용을 보면 geteuid 함수를 이용하여서 euid 값을 얻고
euid값이 666이라면 패스워드를 보여주는 것이라는 것을 알 수 있다.

그렇게 하기 위해서는 먼저 프로그램이 작성되는 /home/semtex/semtex2 로 이동하여
간단한 프로그램을 작성 하였다.

#include <stdio.h>
#include <sys/types.h>

int geteuid(void)
{
return 666;
}

이렇게 만든 다음 공유라이브러리로 컴파일을 해주는 명령어를 넣어주면 된다.

gcc -o semtex2.so semtex2.c -fPIC - shared

공유라이브러리를 만들어낸 다음에는 export 명령어를 이용하여서
LD_PRELOAD에 라이브러리의 절대 경로를 넣어주고 whoisme를 실행하게 되면
패스워드가 나오게 된다.

EUID == 666
The devils number is 666, the devils password is jJjl2Msl

트랙백(0)덧글(0)

그래프 만들기 C++

by dbfud
2011/06/29 09:36
newstyle.egloos.com/2818807
덧글수 : 0

#include <iostream>

using namespace std;

void SetValue(int Vertex[], int index, int val)
{
Vertex[index] = val;
}

void SetEdge( int Edge[] , int i , int j, int size )
{
Edge[i*size + j] = 1;
}

void DeleteEdge( int Edge[] , int i , int j , int size)
{
Edge[i*size + j ] = 0;
}

int FindVertex( int Vertex[], int SearchVar, int size)
{
for( int i = 0 ; i < size ; i ++ )
if( Vertex[i] == SearchVar)
return i;

return -1;
}

int main()
{
const int nSize = 3;
int *Vertex = new int[nSize];
int *Edge = new int[nSize*nSize];

memset(Edge,0, nSize*nSize*sizeof(int));

for( int i = 0 ; i < 3 ; i ++ )
{
SetValue( Vertex, i , i );
cout << Vertex[i];
}

cout << endl;

SetEdge( Edge, 1 , 2 , nSize);
SetEdge( Edge, 2, 2 , nSize);

cout << FindVertex( Vertex, 1, nSize);

for( int i = 0 ; i < nSize*nSize ; i++)
{
  if( i % nSize == 0 )
   cout << endl;

  cout << Edge[i];
}

delete Edge;
delete Vertex;

return 0;
}

트랙백(0)덧글(0)

숫자 맞추기 (컴퓨터가 맞추기) C++

by dbfud
2011/04/24 21:06
newstyle.egloos.com/2790394
덧글수 : 0

#include <iostream>
#include <stdlib.h>
using namespace std;

int main()
{
int guessNumber = 0;
int cguessNumber = 0;
int Min = 1;
int Max = 100;

cout << " Input the answer Number(1~100) : " ;

cin >> guessNumber;

while( cguessNumber != guessNumber)
{
cguessNumber = rand() % Max;

if( cguessNumber < Min ) cguessNumber = Min +1;

cout << "Computer Guessed the Number : " << cguessNumber << endl;

  if( cguessNumber > guessNumber)
  {
   cout << " It's greater than answer!!" << endl;
   Max = cguessNumber;

  }

  if( cguessNumber < guessNumber)
  {
   cout << " It's smaller than answer!1" << endl;
   Min = cguessNumber;
  }
}

cout << " you got it !! " << endl;

return 0;
}

트랙백(0)덧글(0)

Semtex level 0 semtex

by dbfud
2011/04/14 14:47
newstyle.egloos.com/2785780
덧글수 : 0

Level 0

Get a shell

semtex.labs.overthewire.org

x86/elf: Connect to port 24000
amd64/elf: Connect to port 24001
ppc/mach-O: Connect to port 24002

Receive data until the port is closed.
Every second byte you receive is trash, ignore it.
The other bytes are an executable that shows you the password.
Then login to semtex1@semtex.labs.overthewire.org

이 문제도 vortex0에서 처럼 네트워크 소켓 프로그래밍을 이용하여서 문제를 푸는 것이다.
보통의 컴퓨터는 x86이므로 24000 포트로 접속을 해야하는데 문제를 해석하면 다음과 같다.
포트가 닫힐때 까지 데이터를 받고 짝수번 바이트는 무시하고 실행 파일을 만들면 패스워드를
얻을수 있다고 한다. 이것도 파이썬을 이용하여서 쉽게 풀 수 있었다.

from socket import *

HOST = "semtex.labs.overthewire.org"
PORT = 2400

sock = socket(AF_INET, SOCK_STREAM)
sock.connect((HOST,PORT))
data = ''
i = 1
fileInfo = ''

while 1:
        data = sock.recv(1)
        if not ( i% 2 ) == 0 : fileInfo += data
        i +=1
        if not data : break;

f = open('passwd' , 'wb')
f.write(fileInfo)
f.close()

PASSWORD IS B#4j%XX

트랙백(0)덧글(0)

프로그래밍 공부

createElement를 이용한 리스트 추가 html5

javascript event 다루기 (버튼 클릭 이벤트) html5

python 모듈 만들기 & 설치하기 python

html5 javascript 연습 2 html5

html5 javascript 연습 html5

android game (졸업작품) android

Semtex Level2 semtex

그래프 만들기 C++

숫자 맞추기 (컴퓨터가 맞추기) C++

Semtex level 0 semtex

Level 0

프로필

달력

카테고리

이전글 목록

메뉴릿

최근 덧글

RSS

이글루스 로고

통계 위젯 (블랙)

이 이글루를 링크한 사람 (블랙)