'자바스크립트' 카테고리의 글 목록 19개

네이버 스톱워치 같은 스톱워치를 블로그에 달아보자

자바스크립트/기타등등 · 2018. 11. 16. 16:22

네이버 스톱워치 같은 스톱워치를 블로그에 달아보자

0:00:00:00 시작 리셋 태그를 대충 만들어서 핸드폰에서는 제대로 화면 구성이 셋팅이 안되어 있습니다. 휴대폰에서는 좀 허접하게 나올 것입니다. 공부하는 의미로 그냥 올립니다. 휴대폰에서 제대로 나오게 할려면 미디어쿼리를 사용하시던지 margin이나 font size를 수정하면 될 것 같습니다. 오늘은 html, css, javascript를 이용해서 네이버 스톱워치 같은 스톱워치를 티스토리 블로그에 한번 달아 봤습니다. 자바스크립트 소스는 공개되어 있는 소스를 약간 수정해서 사용했습니다. 워드프레스에도 달아 보고 이번에 티스토리 블로그에도 한번 달아봤는데 잘 적용이 되네요. 아래에 html, css, javascript 소스를 올립니다. 블로그에 적용하는 방법은 간단합니다. 블로그 포스팅할 때 H..

[강좌 009] 자바스크립트 Function II

자바스크립트/Learn · 2014. 12. 19. 17:55

[강좌 009] 자바스크립트 Function II

Function(함수)는 다른 프로그램 언어에서 Procedure나 subroutine와 비슷합니다. 프로시쥬어나 서브루틴처럼 코드를 재사용할 수 있으며, 같은 함수에서도 다른 인수를 사용하여 다른 결과들을 도출할 수 있습니다. 함수는 변수의 값으로도 사용할 수 있습니다. temp = vanxy(3,2);text = "값은 " + temp + " 입니다."; Local 변수 (지역변수)함수내에서 var 키워드를 사용하여 변수를 선언하게 되면 그 변수가 영향을 미치는 범위는 함수내부로 한정됩니다. 지역변수는 함수가 시작되면 역할을 시작했다가 함수가 종료되면 지역변수로서의 역할도 끝나게 됩니다. Global 변수 (전역변수)함수 바깥에서 선언된 변수를 말합니다. 전역변수는 함수내부에서도 접근이 가능하고 함수..

[강좌 008] 자바스크립트 Function (I)

자바스크립트/Learn · 2014. 12. 17. 19:00

[강좌 008] 자바스크립트 Function (I)

함수(Function)이란 ?Function(함수)는 특별한 일을 수행하기 위한 코드들의 집합이라 할 수 있습니다.또한 자바스크립트에서의 Function(함수는) 호출될 때 실행됩니다. 단지 함수를 정의만 한경우에는 실행되지 않는다는 말입니다. 함수 문법자바스크립트 함수의 문법은 아래와 같이 Function이라는 키워드를 쓰고 그다음에 함수이름을 씁니다. 함수이름 다음에는 (매개변수1,매개변수2,...)등과 같이 매개변수를 사용할 수 있습니다. 또한 실행될 코드들은 중괄호{}로 사이에다 적게됩니다. Function 함수이름 (매개변수들) { 실행될 코드들; } 함수가 호출된다는 말은 보통 "이벤트가 발생할때 (예;마우스클릭 등)" 또는 또는 "다른 자바스크립트 함수나 코드가 함수를 실행시킬때", 또는 "..

[강좌 007] 자바스크립트 자료형 (DataType)

자바스크립트/Learn · 2014. 12. 10. 12:40

[강좌 007] 자바스크립트 자료형 (DataType)

자바스크립트에서의 자료형(DataType)은 어떤 것들이 있을까요? 문자형,숫자형,불린형,배열형,오브젝트형,Underfined 등이 있습니다. 자바스크립트의 자료형은 다른 언어에 비해 자료형이 좀 단순한 편입니다. 다른 언어를 보면 숫자형만 해도 정수형, 실수형, 부동소숫점형 등 여러가지가 있고 또한 미리 선언(ex: int)해야 예기치 못한 에러를 피해갈 수 있습니다. 하지만 자바스크립트는 동적인 자료형(DataType)의 성질을 갖습니다. 다른말로 하면 같은 변수가 값에 따라 각각 다른 자료형으로 자동적으로 인식된다는 말입니다. var x; //자료형: undifined var x = 5; //자료형: 숫자형 var x = "Gold"; //자료형: 문자형 1.문자형(string)은 앞선 강좌에서 봤..

[강좌 006] 자바스크립트 문자열 01

자바스크립트/Learn · 2014. 12. 8. 18:12

[강좌 006] 자바스크립트 문자열 01

1.문자열(Strings)은 ""또는''으로 둘러 싼다. 내부에 따옴표를 넣고 싶다면 큰따옴표 안에 작은따옴표를 또는 작은따옴표 안에 큰따옴표를 사용한다. var test1 = "This is a JavaScript Book" ; var test2 = "This is a 'JavaScript' Book" ; var test3 = 'This is a "JavaScript" book' ; 2.문자열을 합칠때는 + 기호를 사용한다. 보통 + 기호는 숫자를 더할 때 사용되는 것이지만 자바스크립트 에서는 문자를 합칠때도 + 기호를 사용한다. var test1 = "This" + " is a Book"; var test2 = " JavaScript" ; var test3 = test1 + test2 ; //결과 :..

[강좌 005] 자바스크립트 기본 문법 2

자바스크립트/Learn · 2014. 12. 2. 20:38

[강좌 005] 자바스크립트 기본 문법 2

1.HTML도 그렇지만 자바스크립트도 코드가 쓰여진 순서대로 실행됩니다. ① var test = 10;② var exam = test + 20;☞ 먼저 test라는 변수에 10을 저장하는 것을 실행하고 이후에 exam 변수에 test+20을 계산해서 저장함. ①과 ②의 순서를 바꾸면 예상치 못한 결과가 나올 수 있음. 2.세미콜론(;)은 자바스크립트의 문장을 구분해주는 역할을 합니다. 때에 따라 세미콜론을 생략할 수도 있지만 세미콜론을 항상 붙이는 버릇을 갖는 것이 좋습니다. 또한 세미콜론으로 구분하면 한 줄에 여러 문장을 쓸 수도 있습니다. abc = 10;bcd = 20;cde = 30; abc = 10; bcd = 20; cde = 30; 3.자바스크립트는 코드 사이에 있는 추가적인 공백들을 무시합..

[강좌 004] 자바스크립트 기본 문법 1

자바스크립트/Learn · 2014. 12. 1. 23:58

[강좌 004] 자바스크립트 기본 문법 1

1. 자바스크립트 문장은 ;(세미콜론)으로 구분된다. 문장이 끝나는 지점에 세미콜론을 찍어준다. var test="Good Morning";document.getElementById("test").innerHTML=test; 2. 문자열(String)은 "(쌍따옴표) 또는 '(단따옴표)를 붙여서 사용한다. "Hello"'Hello' 3. 변수는 값(value)를 저장하는데 사용한다. 자바스크립트에서 변수는 var 키워드를 사용한다. 자바스크립트에서 = 표시는 변수에 값을 할당한다는 뜻이지 같다는 등호표시가 아니다. var test;test = 10; [test라는 변수에 10이라는 값을 저장(할당)한다는 뜻이다] 4. 자바스크립트에서 주석은 // 를 사용하며 // 뒤에 있는 모든 것은 실행되지 않는다. ..

[강좌 003] 자바스크립트는 어디에 위치해야 하는가 ?

자바스크립트/Learn · 2014. 11. 29. 22:57

[강좌 003] 자바스크립트는 어디에 위치해야 하는가 ?

자바스크립트는 어느 부분에 위치해야 할까요? 1.자바스크립트는 HTML페이지의 Head부분 Body부분 Example Example w3school에서 많이 인용하였습니다. 즐거운 하루 Vanxy..

[강좌 002] 자바스크립트로 할 수 있는 것은 뭘까요?

자바스크립트/Learn · 2014. 11. 28. 19:07

[강좌 002] 자바스크립트로 할 수 있는 것은 뭘까요?

자바스크립트는 DOM(HTML 요소들에 접근하기 위한 기준 모델)을 사용함으로써 HTML을 변화시키고 제어할 수 있습니다. 즉 HTML의 내용, 속성, Style, 기타등등 것들을 직접적으로 변경시키거나 조절 가능하다는 말입니다. 내용을 바꾸는 예시 document.getElementById("test").innerHTML = "요것은 테스트 입니다."; 위의 예제는 document.getElementById()를 이용해서 "test"라는 id를 찾아서 텍스트를 바꾸는 내용입니다. 스타일을 바꾸는 예시 document.getElementById("test").style.fontSize = "30px"; 태그 id중에 "test"를 찾아서 폰트크기를 30px로 바꾸라는 내용입니다. ★ 자바스크립트는 대소문..

[강좌 001] 왜 자바스크립트를 배워야 하지?

자바스크립트/Learn · 2014. 11. 28. 00:11

[강좌 001] 왜 자바스크립트를 배워야 하지?

자바스크립트는 웹 페이지의 프로그래밍 언어입니다. 최근의 거의 모든 웹페이지에서 자바스크립트가 사용되고 있습니다. 자바스크립트는 다른 언어에 비해 배우기가 비교적 쉬운 언어입니다. 왜 자바스크립트를 배워야 하는가? 자바스크립트는 웹개발자가 반드시 배워야하는 3가지 언어중 하나이기 때문입니다. HTML : 웹 페이지 내용(Content)를 정의 해주는 언어 CSS : 웹 페이지의 레이아웃을 지정 해주는 언어 JAVASCRIPT : 웹 페이지의 움직임을 제어 해주는 언어 자바스크립트 코드를 한번 보시고 실행해보는 것으로 오늘은 이만~~ 오늘날짜 출력하기 나를 클릭하면 날짜와 시간이 나옵니다. 오늘날짜 출력하기 나를 클릭하면 날짜와 시간이 나옵니다. 즐거운 하루 되세요 Vanxy

시작하며..

자바스크립트/Learn · 2014. 11. 28. 00:08

시작하며..

자바스크립트를 스스로 배워보기위해 블로그 연재를 시작해 봅니다.포스팅을 하면서 좀 더 많이 배우길 기대해 보지만 게으름만 피우다 중단 될지도 모르겠습니다. 일단 말 그대로 맨땅에 헤딩하는 것이나 마찬가지일 정도로 실력이 일천하기 때문에 틀린내용도 있을지 모릅니다.이 카테고리는 온~리 나만을 위한 카테고리이기 때문입니다.

온라인 에디터 6종류 (HTML CSS Javascript Jquery mySQL 등 편집)

자바스크립트/기타등등 · 2014. 10. 29. 20:15

온라인 에디터 6종류 (HTML CSS Javascript Jquery mySQL 등 편집)

여러분은 HTML, CSS, JS, jQuery 등의 코드를 온라인에서 에디팅할때 어떤 에디터를 사용하시나요 ? 이전에 JsBin이라는 온라인 에디터의 사이트를 알려 드린적이 있었는데 오늘은 Jsbin과 더불어 몇가지 많이 사용되고 있는 온라인 에디터사이트를 알려 드리겠습니다. 1.CodePen .mkt{ color:red; background-color:yellow; width:300px; height:50px; line-height:50px; font-size:31px; text-align:center; margin:20px; border:1px solid #eee; box-shadow:3px 3px 3px #999; } See the Pen btyAl by yoonsj (@yun1653) on Co..

Jquery CDN

자바스크립트/기타등등 · 2014. 10. 9. 19:37

Jquery CDN

가끔씩 Jquery의 CDN path를 타이핑 하다가 오타가 나는 경우가 있어서 여기에 저장해 놓고 카피 앤 붙여넣기 해야겠다. Jquery CDN Jquery 1.11.1 버전 Jquery 최신버전 Jquery-UI CDN Jquery UI 또는 Google Hosted Libraries - Developer's Guide https://developers.google.com/speed/libraries/devguide여기에서 찾아도 됩니다.

JavaScript 코드 최적화 사이트 JSLint

자바스크립트/기타등등 · 2014. 10. 9. 18:33

JavaScript 코드 최적화 사이트 JSLint

코드를 집어넣고 아래의 JSLint 버튼을 클릭하면 아래쪽으로 여러가지 에러가 나온다. 하나씩 수정을 해서 에러를 없애보는 것도 괜찮을 것 같다. http://jslint.com/

이미지 애니메이션 Javascript 코드

자바스크립트/기타등등 · 2014. 10. 9. 14:42

이미지 애니메이션 Javascript 코드

오늘도 초간단 애니메이션 입니다. 페이지를 새로고침하면 실행됩니다. F22가 허접하게 날라가는 모양 ㅋㅋㅋ code

초간단 이미지 슬라이드 만들기 II (Javascript)

자바스크립트/기타등등 · 2014. 10. 8. 21:20

초간단 이미지 슬라이드 만들기 II (Javascript)

오늘은 Javascript 중에서 setInterval을 이용해서 위 사진과 같은 초간단 이미지 슬라이드를 만들어 보았습니다. 3초정도 기다리면 다음 이미지로 넘어가는 모양입니다. 이전것은 setTimeout를 사용한 것이었죠. code 즐거운 하루 되세요

code 정리해주는 사이트 모음

자바스크립트/기타등등 · 2014. 10. 6. 00:35

code 정리해주는 사이트 모음

1. http://prettydiff.com/?m=beautify 코드 정리 및 비교도 하고 최소화도 해줍니다. 2. http://jsbeautifier.org/ 몇가지 속성을 주어서 사용자 입맞에 맞게 코드를 정리할 수 있습니다. 3. http://tools.arantius.com/tabifier 그냥 간단하게... 4. http://html.segio.com/ko/ 코드 정리라기 보다는 불필요한 태그등을 "미리보기"화면을 보면서 정리할 수 있는 사이트 5. http://www.dpriver.com/pp/sqlformat.htm SQL 코드를 정리해주는 사이트

초간단 슬라이드 만들기 I (javascript )

자바스크립트/기타등등 · 2014. 10. 5. 18:52

초간단 슬라이드 만들기 I (javascript )

[JavaScript를 이용한 초간단 슬라이드 만들기] 인터넷을 돌아다니다가 유튜브에서 자바스크립트 기초 강좌중에 간단한 슬라이드 만들기가 있어서 가져왔습니다. 원래 강좌에 간단한 CSS 박스만 추가해서 만들어 봤습니다. 아래쪽에 유튜브 강좌도 링크 했습니다. code [JavaScript를 이용한 초간단 슬라이드 만들기]

색상표 [컬러피커 color picker]

자바스크립트/기타등등 · 2014. 9. 20. 15:54

색상표 [컬러피커 color picker]

javascriptsource 사이트에서 다운받아 사용하고 있는 것입니다. 스타일을 약간 수정하고 백그라운드가 색상이 바뀌는 것 없애고 사용하니 좀 낫네요.. 북마크바에다 달아놓고 쓰니 코딩할때 편하네요. [출처: http://www.javascriptsource.com] http://dapysj.speeds.kr/zysj/color.html 홈페이지에 사용하실 분을 위해서 코드 [ 색 상 표 ] 원본 스크립트를 아주 약간 수정했어요 Red Green Blue 칼라박스를 클릭하면 색상이 고정되고 다른 칼라박스를 클릭하면 고정이 풀립니다. [출처: http://www.javascriptsource.com]