유혁스쿨

createElement , createTextNode , appendChild, setAttribute , getAttribute 문서 객체는 가장 기본적으로 텍스트 노드를갖는 문서 객체와 텍스트 노드를 갖지 않는 문서 객체로 구분할 수 있다. 다음은 텍스트 노드를 갖는 h1태그를 생성하면서 문서 객체를 생성하는 방법을 보여준다. body 태그에는 내용이 없기때문에 아무것도 출력하지 않는다. 텍스트 노드를 갖는 문서 객체를 생성하기 위해서는 요소 노드와 텍스트노드를 생성하고, 텍스트 노드를 요소 노드에 붙여준다. 노드를 생성하는 메서드이다. createElement(tagName) : 요소 노드를 생성한다. createTextNode(text) : 텍스트 노드를 생성한다. window.onload = ..

문서객체 DOM (Document Object Model) 문서 객체 모델은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다. 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다. 자주 사용되는 용어로는 문서객체, 태그, 노드가 있다. 태그 HEADER 위와같이 HTML페이지에 존재하는 이나 를 태그 라고 부른다. 이 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 '문서객체' 가 된다. 문서객체 window.onload = function () { // 함수 호출시 실행할 내용 } 우선 문서객체를 다루기 위해서는 이전 포스팅에서 다뤘던 window객체의 onload 이벤트 핸들러를 사..

브라우저 객체 모델 BOM, Browser Object Model은 웹 브라우저와 관련된 객체의 집합을 의미한다. 대표적인 브라우저 객체 모델로는 Window, Location, Navigator, history, screen, document 객체가 있다. window 객체 ┌────────┬────────┼────────┬────────┐ location 객체 navigator 객체 history 객체 screen 객체 document 객체 └────────────┬────────────┘ │ 브라우저 객체 문서 객체 BOM(Browser Object Model) DOM(Document Object Model) 간단하게 문서 객체 모델 DOM, Document Object Model 이라 통합해서 부..

함수를 리턴하는 함수 지난 포스팅에서 함수를 매개변수로 전달하는 콜백함수에 대해 살펴보았다. 함수를 매개변수로 전달할 수 있다는 것은 함수를 리턴하는 함수도 만들수 있지 않을까 function retufnFunction() { return function() { alert("Hello Function"); } } returnFunction()(); retufnFunction() 함수를 호출하면 함수가 리턴되기 때문에 괄호를 한 번 더 사용하여 리턴되는 함수를 한번 더 호출한다. 다음과 같이 자기 호출 함수 형태로 바꿀수 있다. (function() { alert("Hello Function"); }) (); function returnFunction() { return (function() { alert..

내부함수 내부함수는 프로그램의 규모가 커질수록 다른사람과 함께 프로그램을 개발하게 되는데 이때 발생하는 여러가지 충돌을 막기위한 방법중 하나이다. 다음과 같은 형태로 구현한다. function 외부함수 () { function 내부함수1() { //함수 코드 } function 내부함수2() { //함수 코드 } //함수 코드 } 피타고라스를 정리하는 함수 pythagoras()를 만들어 내부함수를 구현해본다. function pythagoras(width,height) { return Math.sqrt(width*width + height*height); } 숫자를 제곱하는 부분은 피타고라스에서 자주 사용되는 내용이므로 별도의 square()함수로 구현한다. function square(x) { ret..

매개변수와 리턴값 매개변수와 리턴값을 갖는 함수는 다음과 같이 정의한다. function 함수이름 (매개변수1, 매개변수2, 매개변수3, ...) { return 리턴값; } 함수를 호출할 때 (소괄호)안에 값이나 변수등의 인자값을 주입하는것을 매개변수라고 한다. 함수를 선언할 때 사용할 매개변수를 ,쉼표와 함께 (소괄호) 안에 지정해준다. 어떤식으로 활용하는지 다음과같이 구현해본다. function f(x) { return x * x ; } alert(f(3)); 호출되는 f(x) 함수의 매개변수는 x이고 return 내용은 인자값으로 받은 매개변수를 서로 곱하는 식이다. 따라서 매개변수 x에 정수값 3을 담아 호출한다면 3*3 = 9의 값을 반환한다. 함수를 호출하는 쪽과 정의된 함수를 연결하는 매개..

함수 함수는 코드의 집합을 나타내는 자료형으로 크게 익명함수와 선언적 함수로 나뉜다. 코드의 집합이라는 의미는 {중괄호} 내부에 코드를 선언한다는 뜻이다. 함수가 호출되면 {중괄호} 내부에 선언된 코드 내용을 실행시킨다. 익명 함수 var 함수 = function() { }; 선언적 함수 function 함수 () { }; 익명 함수는 변수를 선언하고 선언된 변수에 저장하여 사용된다. 선언적 함수는 변수에 저장하지 않고 이름을 부여하여 사용된다. 함수호출 자바스크립트에서 함수는 하나의 자료형이지만 다른 자료형과 다르게 (괄호)를 열고 닫음으로써 코드를 실행한다. 이렇게 함수를 실행하는 것을 함수를 호출한다 라고 표현한다. 함수(); 익명 함수를 호출할 때에는 함수가 저장된 변수의 변수명(); 과 같이 호..

jqGrid HTML + 스크립트 코드 node.js 스크립트 코드 //모듈 추출 var http = require('http'); var express = require('express'); //express모듈 : http모듈처럼 사용할 수 있지만 훨씬 더 많은 기능이 있는 외부모듈이다. //http에 http모듈을 추출하여 저장한다. express에 express모듈을 추출하여 저장한다. var bodyParser = require('body-parser') var _ = require('underscore'); var array = []; for(var i = 0; i < 10; i++){ array[i] = { id : i, value : i * i }; } var output = _.filte..

w2ui 플러그인을 활용한 그리드 그리기 3번째 포스팅이다. 그리드에서 데이터를 추가 수정 삭제할 때 각각 필요한 메서드가 있다. add(record) : 데이터를 추가한다. getChanged() : 변경사항을 확인한다. getSelection() : 선택하고 있는 데이터를 확인한다. [추가] - add( ) 위 세개의 메서드는 2번째 포스팅에서 다뤘던 이벤트 리스너를 통해 이벤트가 발생했을때 작동할 수 있도록 구현한다. 추가시에는 onAdd리스너를 통해 구현한다. , onAdd: function(target, eventData){ this.add({ recid: this.total + 1 , name: '[입력]' , author: '[입력]' , publisher: '[입력]' , price: '[..

지난 포스팅에 이어서 시작한다. 그리드는 굉장히 다양한 이벤트가 있다. , onAdd: function(target, eventData){} , onChange: function(target, eventData){} , onDelete: function(target, eventData){} onAdd : add버튼을 누를때 실행된다. onChange : 데이터를 수정하면 실행된다. onDelete : delete버튼을 누를 때 실행된다. 그리드 플러그인의 각 이벤트 리스터는 첫번째 매개변수로 자기 자신을 받고, 두번째 매게변수로 이벤트 객체를 받는다. 여기서 자기자신이라함은 그리드를 말하고 이벤트 객체는 그리드 로우행의 데이터 객체를 말한다. , onAdd: function(target, eventDat..

https://w2ui.com/web/home New JavaScript UI Library w2ui JavaScript UI Library for the Modern Web Download w2ui 1.5 w2ui.com w2ui 공식 홈페이지에서 w2ui플러그인을 내려받는다. 내려받은 플러그인에서 w2ui-1.5.js , w2ui-1.5.css 두 파일을 디렉토리에 저장한다. 저장한 파일들을 참조하도록 저장된 디렉토리 경로와 함께 각각 선언해준다. 위 코드와 같이 style 속성을 적용한다. Body영역 본문에는 id가 wrap인 div 태그요소를 추가한다. 이어서 작성할 스크립트 코드로 wrap id를 갖는 div영역에 그리드가 그려질 예정이다. 다음은 그리드를 그려내는 Script 코드이다. na..

HTML 코드입니다. 데이터 추가 닉네임 메시지 Ajax코드입니다. $(document).ready(function(){ $('#write_form').submit(function(){ var data = $(this).serialize(); $.ajax({ url : '/messages' ,type : 'post' ,data : data ,success : function(data){ console.log("채팅 메시지 데이터 저장 성공",data); } }) //Ajax() event.preventDefault(); })//submit() 이벤트 setInterval(function(){ $.ajax({ url : '/messages' ,type : 'get' ,data : {dummy:new Dat..

npm install mysql var mysql = require('mysql'); var client = mysql.createConnection({ user : 'root' ,password : '123qwe' }); 서버 스크립트문에 위와같이 설정한다. createConnection() 메서드는 데이터베이스 접속 메서드이다. 매개변수 인자값에 데이터베이스의 정보들을 각 속성에 주입하여 객체로 받는다. client.query('데이터베이스명'); 테이블이 존재하는 데이터베이스 이름을 입력한다 CREATE DATABASE로 생성한 데이터베이스의 이름이다. 위와같이 선언할 수도 있고, 데이터베이스 접속 메서드인 createConnection()의 매개변수 인자값에 들어가는 객체 속성에 추가가 가능하다...

XML 데이터는 XMLHttpRequest객체의 responseXML 속성을 통해 전달받을 수 있다. 따라서 node.js에 다음과 같이 코드를 구성한다. request.onreadystatechange = function(event){ if(request.readyState == 4){ if(request.status == 200){ console.log(request.responseXML) var xml = request.responseXML; } } } XML문서객체를 조작할 때에는 getElements 키워드가 붙은 메서드를 사용하는데 html태그에서 사용하는 메서드와 동일하다. XML에서는 보통 id속성을 사용하지 않기 때문에 getElementsById() 메서드보다는 getElementsBy..