질문 정정. 자바스크립트로 만들 수 있는 한계...

spark1000의 이미지


자바스크립트로 만들 수 있는 한계에 대해서 질문 드리고 싶은데요,

심지어 자바스크립트로 그림도 그릴 수 있나요?

자바스크립트로, 그 다양한 리스트 박스와 버튼을 만드는 것이,

과연 코드 하나 가지고서 가능할까 하는 생각이 드는데요..

그 다양한 박스와 버튼이 컴퓨터에 내장 돼 있는 것도 아니고,

내가 상상하는 리스트 박스와 버튼을 컴퓨터가 표현하게 하려면,

이렇게 명령해야 할듯 하네요

그러면 컴퓨터가 어떤 미키마우스를 그리겠죠.

그러면 만약 제가 원하는 모양이 아닐 때에,

이런 식으로 명령해서 미키마우스를 그리게 되나요?

리스트 박스도,

라고 명령했을 때 컴퓨터가

어떤 리스트 박스를 그리면, 또 마음대 안들어서

이런 식으로 명령하나요?

그게 아니면, 자기가 리스트 박스가 되게 하고 싶은 어떤 그림을 가져와서

<컴퓨터. 이게 내가 원하는 리스트 박스 이미지이다. 앞으로 listbox. 하면

이 이미지가 리스트박스가 되게 하라.>

이런 식으로 명령하는것인가요?

spark1000의 이미지

아 질문을 잘못 올렸네요

코드 부분이 엑박으로 떠서... 다시 질문을 올려드리면

자바스크립트로 만들 수 있는 한계에 대해서 질문 드리고 싶은데요,

심지어 자바스크립트로 그림도 그릴 수 있나요?

자바스크립트로, 그 다양한 리스트 박스와 버튼을 만드는 것이,

과연 코드 하나 가지고서 가능할까 하는 생각이 드는데요..

그 다양한 박스와 버튼이 컴퓨터에 내장 돼 있는 것도 아니고,

내가 상상하는 리스트 박스와 버튼을 컴퓨터가 표현하게 하려면,

이렇게 명령해야 할듯 하네요

{button. 그런데 미키마우스 모양이고, 귀가 약간 크게 해라.

그러면 컴퓨터가 어떤 미키마우스를 그리겠죠.

그러면 만약 제가 원하는 모양이 아닐 때에,

{no. no. 눈이 너무 크다. 눈을 작게해라

이런 식으로 명령해서 미키마우스를 그리게 되나요?

리스트 박스도,

{listbox. 그런데, 그 모서리가 둥그스름한 처리가 되게 그려라.

라고 명령했을 때 컴퓨터가

어떤 리스트 박스를 그리면, 또 마음에 안들어서

{no. no. 모서리가 너무 많이 깎였다. 조금 덜 둥그스름하게 하라.

이런 식으로 명령하나요?

그게 아니면, 자기가 리스트 박스가 되게 하고 싶은 어떤 그림을 가져와서

{컴퓨터. 이게 내가 원하는 리스트 박스 이미지이다. 앞으로 listbox. 하면

이 이미지가 리스트박스가 되게 하라.

이런 식으로 명령하는것인가요?

champion의 이미지

공부해보고 모를게있으면 물어봐야죠~

완벽한 세상을 위하여!

snowall의 이미지

모든 물음표에 대한 답은 no입니다.

일단은, 질문의 층위가 하위수준에서 고위수준까지 걸쳐 있어서 답을 할 수가 없네요. 아주 저수준에서 본다면, 컴퓨터에는 화면에서 (x, y) 좌표가 나타내는 지점에 어떤 색을 칠할지 전부 다 지정되어 있습니다. 1024*768해상도라고 하면 대략 80만개에 대한 정보가 전부 저장되어 있는 셈이죠. 이 수준에서 컴퓨터는 이게 점인지 선인지 구분하지 않습니다. 좌표와 색을 알려주고 점을 찍으라고 하면 그대로 찍을 뿐입니다. 여기서 "좌표와 색을 알려주고 점을 찍으라고 한다"는 명령어는 컴퓨터 내부에 전자회로로 짜여져 있습니다. 영어가 아니예요.

그 다음, 좌표와 색을 알려주고 점을 찍으라는 명령어를 사용하는 프로그램을 만들 수 있는데, 이 수준이 기계어와 어셈블리어 수준입니다. 여기에는 컴퓨터 내부에 있는 전자회로에 좌표값과 색을 입력할 수 있는 명령어가 있습니다. 어셈블리어에는 더하기, 빼기, 저장, 불러오기 같은 명령어들이 있는데, 이 명령어를 이용해서 컴퓨터를 제어합니다. 예를 들어, 컴퓨터 내부의 전자회로에 "입력받은 좌표와 색을 저장하라"라는 식으로 명령을 하겠죠. 물론 영어가 아닙니다.

그 위에 중간수준이나 고급수준 언어가 있습니다. 이건 C언어나 포트란같은, 그나마 사람이 이해할 수 있는 언어가 있습니다. 여기엔 "주어진 두 점 사이에 직선을 긋는다"라는 명령어를 만들 수 있는데, 이 명령어는 두 점 사이에 있는 모든 점에 색칠해주는 기계어 명령어를 포함하는 함수가 됩니다. 이 함수를 불러오는 거죠. 물론 여전히 영어가 아닙니다.

이걸 이용해서 웹 브라우저를 만드는데, 웹 브라우저는 HTML이라는 언어를 해석해서 그림으로 그립니다. 그리고 HTML에 여러가지 조작을 할 수 있게 만든 것이 자바스크립트가 되겠죠. 이쯤 되면 "어느 위치에 몇칸짜리 리스트박스를 그려라"라는 명령어가 존재합니다. 물론 이 명령어는 영어가 아닙니다. 한국어도 아닙니다. drawBox(x, y, items)같은 식으로 적혀있겠죠. 이게 아직도 영어로 보이면 공부를 전혀 안한 것과 같습니다.

화면에 그려진 미키마우스의 눈이 큰지 작은지 컴퓨터는 모릅니다. 심지어 그게 미키마우스인지도 모릅니다. 컴퓨터에겐 그냥 어떤 하나의 수일 뿐이죠.

자바스크립트로 할 수 있는 한계라면, 도대체 뭘 하고 싶은데 한계를 물어보시는지를 물어보고 싶네요. 운영체제 같은걸 돌리시려고 하는건가요? 됩니다.
http://kldp.org/node/123301
http://bellard.org/jslinux/

피할 수 있을때 즐겨라! http://melotopia.net/b

spark1000의 이미지

감사합니다 제가 원하던 답변이네요

그러면, 자바스크립트로 그림을 그리는 것이 가능했군요!

익명 사용자의 이미지

매번 답변을 받으면서 감사하다고만 하지 마시고, 스스로 공부해서 지금보다 더 높은 수준의 질문을 보여주는 것을 기대합니다. 지금까지 올리신 질문을 쭉 지켜봤는데, 간단한 검색만으로도 해결할 수도 있는 게 태반이며 배우려는 의지가 전혀 없는 것 같습니다.

익명 사용자의 이미지

다른 분들이 한 것까지 합하면 수십은 안되고 십수는 한 것 같고요...

기대는 기대할만한 사람한테 해야 배신당하지 않으며 만족을 얻습니다.

snowall의 이미지

저도 이 얘기를 하고 싶었는데요. 고맙다고 말씀하실 시간에 더 공부하시면 감사드리겠습니다.

피할 수 있을때 즐겨라! http://melotopia.net/b

jick의 이미지

혹시 목표가 "프로그램은 짤 줄 모르지만 프로그래머에게 이런저런 걸 시켜서 내가 원하는 프로그램을 만드는 기획자"가 되고 싶으신 건가요?

그런 목표가 아니라면, 일단 javascript로 (아니면 아무 언어로나) Hello world를 찍는 프로그램부터 만들어 보시고요,

혹시라도 그게 목표라면...

...하지마세요. 그렇게 안됩니다. -_-;;;

익명 사용자의 이미지

내가 프로그래밍 좀 해봐서 아는데~ 하는 사람이 되고 싶은 것 같습니다.

cleansugar의 이미지

HTML으로는 이미지 파일과 함께 작동하도록 자바스크립트를 포함할 수 있습니다.

AJAX가 이런 걸 하는데 구글맵도 AJAX로 만들어졌죠.

HTML5로는 플래시처럼 모든 것이 가능합니다.

HTML5로 둠 게임 만든 분도 있습니다.

재벌 2세가 재벌이 될 확률과
금메달리스트 2세가 금메달을 딸 확률이 비슷해지도록
자유오픈소스 대안화폐를 씁시다.

아이디의 아이디어 무한도전
http://blog.aaidee.com

귀태닷컴
http://www.gwitae.com

dehetdehet의 이미지

'이런 식으로 명령하는것인가요?'

결국 그동안 자바스크립트란 키워드로 질문을 그렇게나 하시고도

헬로월드는 고사하고, 자바스크립트 코드 한줄이 어떻게 쓰여진지도 안보셨다는 말씀이신지...

입문자를 낮추어 보는것이 아니라 이건 정말 해도해도 너무하신 듯해서 그동안 키보드위에 놓인 손가락이 꼼지락꼼지락

하다가 한마디 쏘게 됩니다.

사실 이정도쯤 되면 이분이 여기계신 분들을 낚고있다는 쪽이 더 자연스러울 정도인 듯 합니다- _-;;

snowall의 이미지

그 리스트 박스 그리는 jquery의 소스 코드의 일부입니다. 물론 이 소스코드가 다 리스트박스 그리는데 사용되는건 아니고, 리스트박스 그리는데는 별 쓸모없는 명령어들도 많이 있습니다. 다른 일들을 하겠죠.

http://code.jquery.com/jquery-1.8.3.js

/*!
 * jQuery JavaScript Library v1.8.3
 * <a href="http://jquery.com/
" rel="nofollow">http://jquery.com/
</a> *
 * Includes Sizzle.js
 * <a href="http://sizzlejs.com/
" rel="nofollow">http://sizzlejs.com/
</a> *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license
 * <a href="http://jquery.org/license
" rel="nofollow">http://jquery.org/license
</a> *
 * Date: Tue Nov 13 2012 08:20:33 GMT-0500 (Eastern Standard Time)
 */
jQuery.fn = jQuery.prototype = {
	constructor: jQuery,
	init: function( selector, context, rootjQuery ) {
		var match, elem, ret, doc;
 
		// Handle $(""), $(null), $(undefined), $(false)
		if ( !selector ) {
			return this;
		}
 
		// Handle $(DOMElement)
		if ( selector.nodeType ) {
			this.context = this[0] = selector;
			this.length = 1;
			return this;
		}
 
		// Handle HTML strings
		if ( typeof selector === "string" ) {
			if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
				// Assume that strings that start and end with <> are HTML and skip the regex check
				match = [ null, selector, null ];
 
			} else {
				match = rquickExpr.exec( selector );
			}
 
			// Match html or make sure no context is specified for #id
			if ( match && (match[1] || !context) ) {
 
				// HANDLE: $(html) -> $(array)
				if ( match[1] ) {
					context = context instanceof jQuery ? context[0] : context;
					doc = ( context && context.nodeType ? context.ownerDocument || context : document );
 
					// scripts is true for back-compat
					selector = jQuery.parseHTML( match[1], doc, true );
					if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
						this.attr.call( selector, context, true );
					}
 
					return jQuery.merge( this, selector );
 
				// HANDLE: $(#id)
				} else {
					elem = document.getElementById( match[2] );
 
					// Check parentNode to catch when Blackberry 4.6 returns
					// nodes that are no longer in the document #6963
					if ( elem && elem.parentNode ) {
						// Handle the case where IE and Opera return items
						// by name instead of ID
						if ( elem.id !== match[2] ) {
							return rootjQuery.find( selector );
						}
 
						// Otherwise, we inject the element directly into the jQuery object
						this.length = 1;
						this[0] = elem;
					}
 
					this.context = document;
					this.selector = selector;
					return this;
				}
 
			// HANDLE: $(expr, $(...))
			} else if ( !context || context.jquery ) {
				return ( context || rootjQuery ).find( selector );
 
			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return this.constructor( context ).find( selector );
			}
 
		// HANDLE: $(function)
		// Shortcut for document ready
		} else if ( jQuery.isFunction( selector ) ) {
			return rootjQuery.ready( selector );
		}
 
		if ( selector.selector !== undefined ) {
			this.selector = selector.selector;
			this.context = selector.context;
		}
 
		return jQuery.makeArray( selector, this );
	},
 
	// Start with an empty selector
	selector: "",
 
	// The current version of jQuery being used
	jquery: "1.8.3",
 
	// The default length of a jQuery object is 0
	length: 0,
 
	// The number of elements contained in the matched element set
	size: function() {
		return this.length;
	},
 
	toArray: function() {
		return core_slice.call( this );
	},
 
	// Get the Nth element in the matched element set OR
	// Get the whole matched element set as a clean array
	get: function( num ) {
		return num == null ?
 
			// Return a 'clean' array
			this.toArray() :
 
			// Return just the object
			( num < 0 ? this[ this.length + num ] : this[ num ] );
	},
 
	// Take an array of elements and push it onto the stack
	// (returning the new matched element set)
	pushStack: function( elems, name, selector ) {
 
		// Build a new jQuery matched element set
		var ret = jQuery.merge( this.constructor(), elems );
 
		// Add the old object onto the stack (as a reference)
		ret.prevObject = this;
 
		ret.context = this.context;
 
		if ( name === "find" ) {
			ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
		} else if ( name ) {
			ret.selector = this.selector + "." + name + "(" + selector + ")";
		}
 
		// Return the newly-formed element set
		return ret;
	},
 
	// Execute a callback for every element in the matched set.
	// (You can seed the arguments with an array of args, but this is
	// only used internally.)
	each: function( callback, args ) {
		return jQuery.each( this, callback, args );
	},
 
	ready: function( fn ) {
		// Add the callback
		jQuery.ready.promise().done( fn );
 
		return this;
	},
 
	eq: function( i ) {
		i = +i;
		return i === -1 ?
			this.slice( i ) :
			this.slice( i, i + 1 );
	},
 
	first: function() {
		return this.eq( 0 );
	},
 
	last: function() {
		return this.eq( -1 );
	},
 
	slice: function() {
		return this.pushStack( core_slice.apply( this, arguments ),
			"slice", core_slice.call(arguments).join(",") );
	},
 
	map: function( callback ) {
		return this.pushStack( jQuery.map(this, function( elem, i ) {
			return callback.call( elem, i, elem );
		}));
	},
 
	end: function() {
		return this.prevObject || this.constructor(null);
	},
 
	// For internal use only.
	// Behaves like an Array's method, not like a jQuery method.
	push: core_push,
	sort: [].sort,
	splice: [].splice
};
 
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

피할 수 있을때 즐겨라! http://melotopia.net/b

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.