유혁스쿨

지난 포스팅에 이어서 시작한다. 그리드는 굉장히 다양한 이벤트가 있다. , 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..

XMLHttpRequest는 자바스크립트에서 Ajax를 사용할때 사용되는 객체이다. var request = new XMLHttpRequest(); request.open('get','/data.json',true); request.send(); XMLHttpRequest객체의 open() 메서드에 전송방식, 전송위치, sync방식을 지정해준다. 3번째 매개변수의 true속성을 통해 sync를 비동기방식으로 설정하여 Ajax 데이터 전송을 진행하였다. var request = new XMLHttpRequest(); request.onreadystatechange = function(event){ if(request.readyState == 4){ if(request.status == 200){ conso..

app.use(express.bodyParser()); 위 코드방식을 사용하면 node.js 서버를 구동시킨 cmd상에 위와같은 오류가 발생한다. 해당 코드를 삭제하고 파라미터 데이터를 전송하면 아래 콘솔창과 같은 텍스트열이 출력되면서 node.js 서버를 구동시킨 cmd상에서는 파라미터값들이 undefined로 출력된다. npm에서 body-parser 를 install 해줘야한다. > npm install body-parser install 해준 뒤 script부분 대체코드 var bodyParser = require('body-parser') app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()); https://..

선택자 $()의 형태는 $('요소') 혹은 $('속성') 과 같이 사용해왔다. ( 요소[속성=값] 혹은 요소:속성 ) 매개변수를 하나만 넣었을 경우 해당하는 요소나 클래스를 모두 찾아간다. https://u-it.tistory.com/entry/%EC%86%8D%EC%84%B1%EC%84%A0%ED%83%9D%EC%9E%90-%ED%95%84%ED%84%B0%EC%84%A0%ED%83%9D%EC%9E%90?category=1019283 속성선택자 , (입력양식)필터 선택자 / 요소[속성=값] , 요소:속성 [속성 선택자] 속성 선택자 문법은 기본적으로 요소[속성=값] 의 형태이다. 속성 선택자는 요소에 명시적으로 지정하는 name, id, class 등의 속성 값과 일치한 요소를 찾는 선택자이다. 여기서..

$(document).ready(function (){ $('h1').on('mouseenter',function(){ $(this).addClass('reverse'); }); $('h1').on('mouseleave',function(){ $(this).removeClass('reverse'); }); }); 태그 요소에 마우스를 올려놓았을때 'reverse' 클래스 속성을 추가하고, 다시 마우스를 요소로부터 떨어트리면 추가된 'reverse'클래스 속성을 제거한다. 이와 같은 문법을 한번에 객체형태로 만들 수 있다. $(document).ready(function (){ $('h1').on({ mouseenter: function(){ $(this).addClass('reverse'); } , mo..

https://u-it.tistory.com/entry/each-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%EB%AC%B8%EB%B2%95 each() 함수 '요소' 관리 사용 문법 선택자를 변수에 담은 후 변수로 접근하여 사용 가능 선택자를 변수에 담은 후 변수를 매개변수로 담아 접근하여 사용 가능 Object 배열에서는 다음과같이 변수로 사용이 불가능해진다. u-it.tistory.com 지난 시간에 each 함수를 통해 요소를 반복하여 관리하는 문법을 구현했었다. $(document).ready(function (){ $('h1').each(function(index,item){ $(item).addClass('item'+index); }); }); 선택자를 지정하고 eac..

1. css() 메서드의 매개변수에 {backgroundColor : 'black , color : 'white'} 와 같은 형태로 속성을 지정할 수 있다. 2. css() 메서드의 매개변수에 'background','black' 와 같은 형태로 속성을 지정할 수 있다. 1번의 형태 경우에는 $('h1').css( { backgroundColor : 'white' , color : 'red' } ) stylesheet방식과 유사한 형태로 {중괄호}안에 변경할 속성을 나열하여 한번에 지정할 수 있다. 2번의 형태 경우에는 $('h1').css('background', 'white').css('color','red') 와 같이 지정할 스타일이 복수개일 경우 메서드를 각각 두번 호출하여 설정해야한다. 주의할 ..

[filter] Header-0 Header-1 Header-2 위와같이 fiter를 사용할 때 적용은 되지만 정확한 설정에 맞게 적용이 되지 않는다. 여기서 개발자가 의도하는 정확한 설정은 h1, h1의 홀수요소, h1의 짝수요소 각각의 스타일 속성을 다르게 지정한다. 하지만 위의 코드상의 순서대로 적용된다면 h1요소의 홀수에 filter를 걸고 h1요소의 홀수중 짝수에 filter가 걸리기 때문이다. filter를 한번 사용할 때 마다 h1 이라는 문서 객체의 범위가 점점 좁아진다. h1 -> h1:even(홀수) -> h1:even:odd(홀수중 짝수) [end] 올바른 범위는 h1 -> h1: even(짝수) -> h1:odd(홀수) 가 되어야 하며 end() 메서드를 사용한다. end() 메서드..

선택자를 변수에 담은 후 변수로 접근하여 사용 가능 선택자를 변수에 담은 후 변수를 매개변수로 담아 접근하여 사용 가능 Object 배열에서는 다음과같이 변수로 사용이 불가능해진다.

[속성 선택자] 속성 선택자 문법은 기본적으로 요소[속성=값] 의 형태이다. 속성 선택자는 요소에 명시적으로 지정하는 name, id, class 등의 속성 값과 일치한 요소를 찾는 선택자이다. 여기서 말하는 요소란 태그의 이름을 말한다. 이렇게 하면 input type이 text인 입력 양식의 value 속성이 'Hi jQuery..!' 값이 정의되고 text input박스에 Hi jQuery..! 라는 문자열 값이 입력된 상태로 페이지가 출력된다. [필터 선택자] 선택자 중에 : 기호를 포함하는 선택자이다. 필터선택자는 요소에 명시적으로 지정된 특정 속성을 찾아간다. input 요소에는 type속성 혹은 checked속성을, option 요소에는 selected속성을 찾아갈 수 있다. input 입력..