연희동

아래는 예제 입니다.1234567891011121314151617181920212223242526272829303132 Title $(function(){ // jquery 시작 //클릭 >> 노랑 var $p01 = $(".p01"); $p01.on("click",function(){ $p01.css("color","yellow"); }); //클릭 >> 파랑 var $p02 = $(".p02"); $p02.click(function(){ $p02.css("color","blue"); }) }); 클릭하면 노랑 클릭하면 파랑 Colored by Color Scriptercs 아래는 실행 화면입니다. 실제 작동되니 클릭해보세요. 클릭하면 노랑클릭하면 파랑 이벤트 종류는 여러가지가 있지만 이번 예제에서는 ..

아래는 예제와 실행 화면입니다.12345678910111213141516171819202122232425 Title $(function(){ // jquery 시작 var $p01 = $(".p01"); $p01.css("color","red"); var $p02 = $(".p02"); $p02.css({color : "blue", fontSize : "20px"}); }); 첫번째 p태그 두번째 p태그 세번째 p태그 Colored by Color Scriptercs jquery 선택자와 css() 함수를 활용해 css를 변경하는 예제입니다. 예제를 라인별로 보겠습니다.먼저 HTML 부터 보겠습니다.2122232425 첫번째 p태그 두번째 p태그 세번째 p태그 cs라인 22. body 태그 안에 p태그를..

아래는 예제와 실행 화면입니다.12345678910111213141516171819202122232425 Title $(function(){ // jquery 시작 //선택자 alert( "'tag' 로 찾은 text = "+$("p").text()+"\n" +"'id' 로 찾은 text = "+$("#line01").text()+"\n" +"'class' 찾은 text = "+$(".line02").text()+"\n" +"'name' 으로 찾은 text = "+$("[name=line03]").text() ); }); 첫번째 줄 두번째 줄 세번째 줄 Colored by Color Scriptercshtml 소스내의 tag 이름, 또는 별도로 값을 준 id, class, name 값으로 요소를 찾을 수..

아래는 예제와 실행화면입니다.12345678910111213141516171819202122232425 Title $(function(){ // jquery 시작 //실수 >> 문자 var num = 10.555; alert( "num.toFixed(0) = "+num.toFixed(0)+"\n"+ "num.toFixed(1) = "+num.toFixed(1)+"\n"+ "num.toFixed(2) = "+num.toFixed(2)+"\n"+ "num.toFixed(3) = "+num.toFixed(3)+"\n" ); }); Colored by Color Scriptercs 이번 예제는 문자를 실수로 형변환하는 예제입니다. toFixed()는 단순하게 실수를 문자로 형변환 할때 사용하기도 하지만 반올림을..

아래는 toString(16)의 예제와 결과 화면입니다.12345678910111213141516171819202122 Title $(function(){ // jquery 시작 //정수 >> 16진수문자 var num = 10; var result = num.toString(16); var resultSum = result + 10; alert("result = "+result+"\n"+"resultSum = "+resultSum); }); Colored by Color Scriptercs 16진수 값은 문자 값 같지만 16진수 이기 때문에 문자로 사용하려면 형변환을 해주어야 합니다. 예제를 한줄씩 자세히 봐보겠습니다.1011121314 //정수 >> 16진수문자 var num = 10; var res..

아래는 String() 의 예제와 결과화면입니다.123456789101112131415161718192021 Title $(function(){ // jquery 시작 //숫자 >> 문자 var num = 10; var result = String(num); var resultSum = result + 10; alert("result = "+result+"\n"+"resultSum = "+resultSum); }); Colored by Color Scriptercs 예제를 자세하게 보겠습니다.1011121314 //숫자 >> 문자 var num = 10; var result = String(num); var resultSum = result + 10; alert("result = "+result+"\n"..

1234567891011121314151617181920212223242526 Title $(function(){ // jquery 시작 //문자 >> 정수 var str1 = '10'; document.write("str1+10 = ",str1+10,""); document.write("Number(str1)+10 = ",Number(str1)+10,""); //문자 >> 실수 var str2 = '10.50'; document.write("str2+10 = ",str1+10,""); document.write("Number(str2)+10 = ",Number(str2)+10,""); }); Colored by Color Scriptercs위는 Number()의 예제입니다. 아래는 결과 화면입니다. 소..

아래는 예제 입니다.12345678910111213141516171819202122232425 Title $(function(){ // jquery 시작 var str = "10.50"; // 문자값 var num = 5; // 정수값 //parseInt() document.write("str + num = " ,parseInt(str) + num ,""); //parseFloat() document.write("str + num = " ,parseFloat(str) + num ,""); }); Colored by Color Scriptercs "10.50" 라는 문자값을 parseInt() ,parseFloat()을 사용하여 변형해보았습니다. pasreInt()에 대한 설명은 이전글에서 확인하세요. 아..

아래는 예제입니다.123456789101112131415161718192021222324252627 Title $(function(){ // jquery 시작 var str = "10"; // 문자값 var num = 5; // 정수값 document.write("str + num = " ,str + num ,""); str = parseInt(str); // 문자를 정수로 형변환 document.write("str + num = " ,str + num ,""); }); Colored by Color Scriptercs 이번 예제는 문자를 숫자(정수)로 바꾸는 방법에 대해서 보겠습니다. jquery 의 변수(var)에 대한 설명은 이전글 보기로 대체하겠습니다.>> [[JQUERY]자바스크립트] - jQu..

클래스는 이전 글에서 알아봤던 함수(function)을 모아서 사용하기 위해 쓰입니다.기본적으로 프로젝트를 진행하게되면 여러사람이 모여서 작업을 하기때문에 함수를 선언 하면서, 이름이 겹치거나 혹은 너무 많은 함수들로 인해 관리 및 수정이 어려울 수 있으 함수를 정리하기 위한 용도로 사용됩니다. 예제를 보기에 앞서 함수(function)이 생소하다면 이전글을 참고해주세요.>> [[JQUERY]자바스크립트] - jQuery 009. 함수 function>> [[JQUERY]자바스크립트] - jQuery 010. 함수 function ,매개변수(파라미터) 아래는 예제입니다. 12345678910111213141516171819202122232425262728293031323334 Title $(functio..

이번 시간에 볼 예제에 앞서 매개변수(파라미터)에 대해 조금 생소하다 싶으면 이전 글을 참고하세요.>> [[JQUERY]자바스크립트] - jQuery 009. 함수 function 아래는 예제 입니다.12345678910111213141516171819202122232425262728293031323334 Title $(function(){ // jquery 시작 //함수호출 fn99dan(2); }); //함수 function fn99dan(dan){ var index = 2; document.write(dan, "단 입니다.",""); document.write(dan, " * ", index, " = ", dan*index++ ,""); document.write(dan, " * ", index, ..

1234567891011121314151617181920212223242526272829303132333435 Title $(function(){ // jquery 시작 //함수호출 fn99dan(); }); //함수 function fn99dan(){ var dan = 2; var index = 2; document.write(dan, "단 입니다.",""); document.write(dan, " * ", index, " = ", dan*index++ ,""); document.write(dan, " * ", index, " = ", dan*index++ ,""); document.write(dan, " * ", index, " = ", dan*index++ ,""); document.write(da..

증감연산자에 대해 알아보자. 아래는 이번 시간에 알아볼 예제와 결과 화면이다. 증감연산자는 반복적으로 증가하거나 감소하는 작업을 할때 사용하면 편리하다. 특히 반복문에 사용된다. 아래는 예제 소스이다. 1234567891011121314151617181920212223242526272829303132333435363738394041 Title $(function(){ // jquery 시작 //증감연산자 //a++ var a = 10; document.write("a++ = " ,a++ ," "); document.write("a++ 연산 이후의 a 값" ," "); document.write("a = " ,a ," "); //a-- var a = 10; document.write("a-- = " ,a-..

복합연산자에 대해서 알아보자 알아보기에 앞서 조금 난해할 수 있으니 이전 글을 보고 보길 권한다. >>[[JQUERY]자바스크립트] - jQuery 006. 연산자 +-*/% 아래는 예제다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 Title $(function(){ // jquery 시작 //복합 연산자 += , -= , *= , /= , %= // += var a = 10; document.write('a = ',a,' '); var result = a + 10; document.write('result = ',result,' '); a += 10; ..

jquery 연산자에대해 알아보자 아래는 예제이다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 Title $(function(){ // jquery 시작 //연산자 // + 연산 var a = 10; var add = a+10; document.write('add = ',add,' '); // - 연산 var a = 20; var sub = a-10; document.write('sub = ',sub,' '); // * 연산 var a = 5; var result = 5*a; document.write('result = ',result,' '); // / 연산 var a = 10; var res..

배열에 대해 알아보자. 아래는 오늘 볼 예제 1234567891011121314151617181920212223242526272829303132333435 Title $(function(){ // jquery 시작 //배열 List //배열 생성방법 (문자) var fruitList = ['사과','포도','오렌지','체리']; //배열 생성방법 (숫자) var priceList = [1000,2000,3000,4000]; //배열(list)의 순서 document.write('fruitList 의 첫번째 값 = ',fruitList[0],' '); document.write('fruitList 의 두번째 값 = ',fruitList[1],' '); document.write('fruitList 의 세번..

이전 강좌 보기.>> [[JQUERY]자바스크립트] - jQuery 002. 알림창 alert()>> [[JQUERY]자바스크립트] - jQuery 003. 출력기능 document.write() 데이터를 확인하는데 가장 많이 사용되는 기능은 console.log이다. 앞서 알아봤던 alert() 이나 document.write() 는 사실 잘 사용되지 않는다. 시작하기에 앞서 혹여 크롬을 설치 하지않았다면 '크롬 브라우저' 를 설치해주자. 기능면이나 활용도에서 ie, edge 보다 좋으니 웹 코딩을 공부하거나 개발중이라면 필수다.설치법이 어렵지 않으니 설치법은 넘어간다. 설치가 완료되면 기본브라우저로 사용해주자. 아래는 오늘 알아볼 console.log() 의 예제다. 123456789101112131..

지난 강좌보기>> [[JQUERY]자바스크립트] - jQuery 002. 알림창 alert() document.write()에 대해 알아보자.html에 출력을 해주는 기능이다. 12345678910111213141516171819202122232425262728293031323334353637 Title $(function(){ // jquery 시작 //document.write() document.write('단순문자내용',' '); document.write('단순','문자','내용',' '); var str = '문자변수'; var num = 123; document.write('변수 ','str',' 의 값은 ',str,' '); document.write('변수 ','num',' 의 값은 ',..

이전시간 강좌.>> [[JQUERY]자바스크립트] - jQuery 001. 변수사용 var 이번 시간에는 alert() 에 대해 알아보자. 웹페이지를 돌아다니 보면 경고창이라던지 알림창들을 볼때가 있다.이때 사용되는게 alert() 이다. -01. 단순 문자 입력하기 단순하게 문자값을 입력해보자.방법은 alert('내용') 이다. 123456789101112131415161718 Title $(function(){ // jquery 시작 //단순 문자 값 alert(''); }); Colored by Color Scriptercs -02. 변수 값 (문자) 12345678910111213141516171819 Title $(function(){ // jquery 시작 //변수 값 var alertMsg ..

제이쿼리 변수(var)에 대해서 알아보자. 아래는 전체 소스.123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 Title $(function(){ // jquery 시작 //변수 생성 및 저장 //변수 1:1 생성 var num1 = 1000; // 숫자 변수 var num2 = 2000; var numSum = num1 + num2; // 변수 1 + 변수 2 //변수 다중? 생성 var str1 = 'a' , str2 = 'b'; //문자 변수 var str3 = 'c' , str4 = 'd'; //문자 변수 var strSum = str1 ..

브라켓 설치 및 설정 방법 보기>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설치하기>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설정하기 앞서 설치한 브라켓에 JQUERY 를 연결해보겠다. JQUERY 사이트에 접속한다. >> https://jquery.com/ 우측에 다운로드 버튼을 누르면 다운로드 페이지로 이동한다. 스크롤을 내려보면jQuery 3.3.1 release notes 가 있다 클릭하자. 종류가 두가지다.https://code.jquery.com/jquery-3.3.1.jsjs는 소스를 보기쉽게 줄맞춤을 해논것이고 https://code.jquery.com/jquery-3.3.1.min.js min.js 는 줄맞춤없는..

브라켓으로 폴더를 설정하고 간단하게 HTML 파일을 만들어보자 아직 설치를 하지않았다면,>>[[JQUERY]자바스크립트] - [CHAPTER_001] 어도비 브라켓(ADOBE Brackets) 설치하기 경로는 아무렇게나 해도된다. 관리하기 쉽게 폴더를 하나만들자. 좌측 상단에 파일 > 폴더열기로 생성한 폴더의 경로를 지정해준다. 폴더 선택을 누르면 생성한 JQUERY01 폴더를 기준으로 HTML 이나 JS, CSS 등등을 생성하고 연결해서 사용할수 있다. 좌측상단을 보면 설정한 파일명이 있는데 그쪽 아랫부분 아무곳이나 오른쪽 마우스를 클릭하면 위 사진처럼 파일을 만들 수 있다. index.html 로 파일명을 설정했다. 파일명에 .html 만 붙여주면 되니, 굳이 index라고 이름을 설정할 이유는 없다..

jquery를 공부하기 위해 가벼운 소스 편집기를 설치하자. >> http://brackets.io/index.htm 설치는 의심하지말고 쭉진행하면된다. 첫 실행 화면이다. 기본적으로 기능 및 브라켓을 소개하고있다. 화살표로 표시한 번개 모양 아이콘을 눌러보자. 위처럼 인터넷 창과 함께 코딩된 내용이 보여진다. 브라켓은 기본적으로 가볍운 텍스트 편집기이고 실시간으로 소스를 확인할 수있다는 장점이있다. 다음 챕터에서는 브라켓 폴더 설정과 제이쿼리를 연결해보겠다 >> [[JQUERY]자바스크립트] - [CHAPTER_002] 어도비 브라켓(ADOBE Brackets) 설정하기