여행하는 코딩끄적끄적

목차 [Javascript] Jquery HTML 내용 변경하기 javascript로 만든 Jquery에서 html(바꿀내용)함수를 사용하여서 기존의 내용을 변경할 수 있습니다. 우선 jquery 사용을 위해서 에 아래와 같이 선언해주어야 합니다. 사이에 아래와 같이 함수를 정의 합니다. 3번 라인 : #set_btn 이라는 아이디를 가진 버튼을 클릭할 경우 아래 함수를 실행합니다. 4번 라인 : #id_id의 html 구문을 괄호안의 값으로 변경 합니다. 전체 코드>> 나는누굴까? Set Html 결과>> [Javascript] Jquery TEXT(텍스트) 내용 변경하기 이번에는 앞서 동일 예제의 라벨의 텍스트값만 변경해보겠습니다. 구성은 동일하고 앞서 전체 코드에서 19~23번 라인만 아래와 같이 ..

목차 [Javascript] 자바스크립트에서 CSS 변경 하기 (HTML Style) 자바스크립트를 이용해서 고정된 css 값을 동적으로 변경할 수 있습니다. 변경에 필요한 함수는 아래와 같습니다. Syntax>> document.getElementById(id명).style.property = new style 위에 Syntax와 같이 변경하고자 하는 부분을 getElementById 로 찾은 다음에 style을 넣고 변경하고자 하는 css property를 입력하면 됩니다. 앞서 언급한 내용처럼 대부분 자바스크립트로 css 스타일을 변경하는 이유는 페이지 내에서 어떠한 이벤트(event)에 대한 동적인 반응을 위해 넣습니다. 아래 예제를 통해 쉽게 이해 할 수 있습니다. [Javascript] 자바스..

목차 [Javascript] 타입 확인하는 방법 자바스크립트에서 데이타(data) 타입은 아래와 같습니다. string number boolean object function 자바스크립트 객체(object)의 종류는 아래와 같습니다. Object Date Array String Number Boolean 그리고 아무런 정보를 포함하지 않은 형태는 아래와 같습니다. null undefined 자바스크립트에서 타입을 확인하는 방법은 파이썬과 유사하게 typeof 라는 함수를 사용합니다. 아래 예제를 통해 사용 방법을 익힐 수 있습니다. 예제 코드>> 결과>> [Javascript] 숫자를 문자로, 문자를 숫자로 변환(int2string, string2int) 문자열을 숫자로 변경하는 함수는 String()입..

목차 자바스크립트 변수란? 자바스크립트 변수는 아래와 같이 3가지로 정의 됩니다. var let const 파이썬이나 C언어와 달리 정수 실수 string 등을 구분 짓지 않고 모든 변수는 var로 정의할수 있습니다. 변수의 특성에 따라 let이나 const를 사용합니다. let은 다시 선언이 불가능 합니다. 아래와 같이 중복 선언을 하였습니다. 그 결과 아래처럼 var i는 문제가 없었지만 let j는 declared 문제가 발생했습니다. Uncaught SyntaxError: Identifier 'j' has already been declared const는 다시 할당이 안됩니다. 아래와 같이 let과 const를 할당해보았습니다. 그 결과 아래처럼 let k 는 문제가 없었지만 const k 아래..

목차 [Javascript] HTML 이벤트 발생 시 동작 함수 HTML 문서에서 자바스크립트를 이용해서 특정 동작이 발생하면 자바스크립트를 동작시키게 할 수 있습니다. 우선 아래 Syntax를 통해 설명 하겠습니다. HTML "element"에서 특정 "event"가 발생하면 "some JavaScript"가 동작 하는 구조 입니다. element는 div, a, h1, button과 같은 tag가 될 수 있습니다. HTML DOM에서 제공하는 event가 많이 있는데 주요 이벤트만 정리해서 아래와 같이 테이블로 만들었습니다. Event 명 설명 onchange HTML element가 변경될 때 onclick HTML element를 클릭할 때 onmouseover HTML element에 마우스 커..

목차 [Javascript] HTML 태그 사이 element 가져오기 - getElementById() HTML 문서에서 id 값을 이용해서 위치를 파악하고 해당 태그의 정보를 가져 오는 방법입니다. Syntax는 아래와 같습니다. document.getElementById(elementID) 찾은 element는 일반적으로 변수에 넣고 속성을 변경하거나 속성 정보를 가져 올 수 있습니다. 예제 코드>> H1 입니다 두번 째 H1 입니다 1st_li 2nd_li 3rd_li ########출력 결과######### 결과>> [Javascript] HTML 태그 사이 element 가져오기 - getElementsByClassName() HTML 문서에서 class 값을 이용해서 위치를 파악하고 해당 태..

목차 HTML DOM write(), writeln() Method 란? write() 메소드는 괄호안의 입력값을 HTML 문서에 표현해줍니다. 입력값으로 HTML 코드나 자바스크립트 코드를 받습니다. HTML을 바로 쓰기 때문에 실제로 write()를 사용해서 코드를 짜지는 않습니다. write() 는 일반적으로 내 코드가 정상적으로 동작하는지 확인하기 위해 debugging 용으로 사용합니다. writeln() 은 write()와 동일한데 마지막에 줄넘김이 들어가있다는 차이 입니다. HTML DOM write() Syntax document.write(exp1, exp2, exp3, ...) 여러개의 코드를 입력에 넣을 수 있습니다. write() 는 별도의 return 값은 없고 HTML 페이지에 ..

목차 글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) jquery-animate() 애니매이션 기능 animate 기능을 사용하면 웹 브라우져의 요소들을 애니매이션처럼 움직일 수 있다. 다만 애니매이션을 움직일 때 주의 해야 할 점은 css 설정에서 position 정보를 아래와 같이 설정하여야 한다. position 설정값 absolute fixed relative 애니매이션 함수는 아래와 같다. $(selector).animate({params},speed,callback); selector는 웹에서 요소들이고 params는 css의 인자 값들..

목차 글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) jquery - slide 효과로 화면이 나오거나 사라지게 하기 : 정의 jquery slide 관련 함수는 슬라이드처럼 화면이 내려오거나 올라가면서 나오거나 사라지게 만들 수 있다. 관련 함수는 아래와 같다. $(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback); slideDown 은 말 그대로 글이 슬라이방식으로 아래로 나오게 만든다. sl..

목차 글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) jquery - fade 기능, 천천히 사라지거나 나타내게 하기 fade 라는 의미 그대로 천천히 진행되는 것이다. jquery에서 제공하는 fade 기능은 아래와 같다. $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); fadeIn은 천천히 나타나게 하고, fadeO..