본문 바로가기
반응형

자바스크립트7

[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.
JS 기초 : 난수 생성하기 - 숫자 맞추기 게임 실습 예) 1~100 사이의 난수 생성 Math.random()*100 +1 하시면 1.0~100.0까지의 실수를 반환하겠죠? 소수점을 자르고 정수로 만들고 싶으시다면 , ParseInt()나 Math.floor()를 쓰시면 되겠습니다! Math.floor(Math.random()*100 +1); 자바스크립트(JS)는 객체 기반의 스크립트 프로그래밍 언어로, 웹 브라우저 내에서 컴파일 돼서 사용됩니다.(node.js 제외) 일단 지금은 브라우저 없이 실습을 할 수 없으니까 html파일과 css파일을 미리 다운 받고, JS를 직접 작성해봅시다. HTML에서 외부 CSS , JS 파일을 참조하는 법 html head태그안에 css는 link , JS는 script태그를 만듭니다. CSS는 herf , JS는 sr.. 2022. 4. 15.

티스토리툴바