본문 바로가기
반응형

javascript15

[jQuery / JS] DOM, CSS 변경 / 반환하기 (text ,attr , css , show...) 목차 DOM 변경 CSS 조작 show / hide / fade DOM (브라우저 객체)에 반환하거나 변경하는 함수들 $(선택자).func(); ---> func에 대해 배워봅시다! 1. 반환하는 jQuery 함수 (get) $(selector).text() : 선택된 요소 반환합니다 $(selector).html() 선택된 요소의 html 반환합니다 $(selector).val() : 입력 필드/value값을 반환합니다 $(selector).attr(attributeName) : 선택된 요소의 인자로 주어진 것에 해당하는 속성의 값을 반환한다 $(selector).position() : top과 bottom 필드를 가지고 있는 객체를 반환합니다. ex) position 함수 사용법 var pos = $.. 2022. 5. 31.
[jQuery] 이벤트 처리 , 기초 세팅 jQuery는 오픈 소스 자바 라이브러리로, js 작성을 더 간편하게 할 수 있습니다. jQuery를 웹사이트에서 실시간 구동을 해주기 위해서는 head 태그에 소스코드를 입력해줘야합니다 핵심은 jQuery 소스코드가 js파일 소스코드보다 더 위에 선언되어야 된다는 것입니다. VScode jQuery 자동완성 extention https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets jQuery 문장의 구조 $("선택자").action(); $("p").show() : 모든 p태그 요소들을 찾아서 화면에 표시 $("#iden").slideup() : id = "iden" 인 요소를 슬라이드업 방식으로 표시한다 $(".c.. 2022. 5. 15.
[HTML/JS] 기본 이벤트 처리 다룰 이벤트 처리 Timing 이벤트 (매초마다, 시간이벤트) onclick 이벤트 (클릭시) onload/onunload 이벤트 (웹페이지 진입시) onchange (focus가 해제될시) onmouseover / onmouseout (마우스를 위에 올려놓을시) onmousedown / onmouseup (버튼을 누른 순간 / 누른 손을 뗀 순간) js를 이용한 이벤트 핸들러 Timing 이벤트 주어진 시간 주기에 따라 코드가 실행되도록 하는 함수입니다. 밀리초(milliseconds)는 천 분의 1초를 가리키는 말입니다. 1000milliseconds 가 1초겠죠?? window는 최상위 객체로 생략해도 됩니다! (java의 object격) 이벤트 처리에서 진짜 주의해야하는것은 함수를 인자로 받을때 .. 2022. 5. 2.
[HTML/JS] DOM(문서 객체 모델) 기초 목차 DOM이란? element 찾기 element 내용, 속성,CSS 변경 element 추가 및 삭제 DOM(Document Object Model) DOM은 HTML 문서의 계층적인 구조를 트리로 표현한 것 입니다. HTML을 구성하는 모든 요소들을 요소(element) , 속성 (attribute) , 문자(text)로 구분합니다. 태그들 -> element , 태그내의 속성 -> attribute , 태그안에 문자 -> text DOM은 트리구조이기 때문에 부모(parent)와 자식(child)로 구분할 수 있습니다. 부모에서 자식으로 접근을 할수 있는데요, firstchild , lastchild 등등으로 자식 노드로 접근 할 수 있습니다. 그리고 DOM의 함수를 이용해서 다음과 같은 기능을 .. 2022. 5. 2.
[HTML/JS] BOM(Browser Object Model) , window객체 브라우저 객체 모델 BOM이란? BOM은 웹브라우저의 객체들의 모음입니다. 최상위 객체는 window고, 그중 html에 해당하는 객체는 DOM(Document Object Model) 문서 객체 모델입니다. 밑의 사진에 노란색 부분이죠. 최상위 객체 , window window는 브라우저 하나의 윈도우를 표현하는 객제입니다. 모든 JS’s global objects, functions, variables는 window 객체의 멤버 중 하나입니다. window의 함수들 (상세내용X , 문법 요약) window.open(url, name, specs, replace); 새로운 윈도우를 엽니다. 반환값은 윈도우, 실패하면 null ex) window.open('http://www.google.com', '_.. 2022. 4. 18.
JS 배열 (Array) - 자바스크립트 배열이란? 하나의 변수 이름에 여러 데이터 값을 저장할 수 있는 자료구조입니다. 배열 생성하는 방법엔 두가지가 있습니다. 1. 리터럴로 선언 var array = [item1, item2, ...]; js 같은 경우 배열 원소의 자료형이 서로 달라도 허용합니다. 객체, 함수, 배열 등도 배열의 원소가 될수 있습니다. 2. Array 객체로 배열 생성 var fruits=new Array(“apple",“banana",“orange“); Array 객체 Array 객체의 속성에는 length가 있습니다. array.length 하면 배열의 size를 반환합니다. - 가장 큰 인덱스의 +1 Array 객체의 함수 push/pop , unshift/shift가 있고 각각 배열의 맨 뒤에서, 맨 앞에서 조작하는.. 2022. 4. 18.
[HTML/JS] JS기초 : 행맨 게임 만들어보기! 기본 파일들이고 여기서 JS파일만 참고해서 작성해보시면 됩니다! 목표 New Game을 누르면 게임이 시작되면서 언더바가 쭉 나오고, 맞추면 해당되는 언더바들이 문자가 출력되고, 틀리면 행맨 그림이 바뀌면서 Guesses에 시도한 문자들이 출력되는 게임을 js으로 만들어 봅시다! HTML Prsee New Game to Play! Guess New Game id="hangmanpic" 행맨 이미지 id="clue" 언더바가 있는 부분 id="hguess" 퀴즈 문자 받는 입력창 id="guessbutton" 입력한 문자를 제출하는 버튼 id ="hguessstr" 현재 게임에서 지금까지 입력한 문자들 전역변수와 게임 시작 함수 newGame() //행맨 var POSSIBLE_WORDS = ["obdur.. 2022. 4. 17.

티스토리툴바