반응형

Front-End/Java Script 4

[자바스크립트] 마우스 클릭 또는 키보드 입력시 소리출력하기

⭐ 화면에 보이는 w, a, s, d, j, k, l을 클릭하거나 키보드로 입력을 하게된다면 소리를 출력한다. index.html Drum 🥁 Kit w a s d j k l Made with ❤️ in London. var btns = document.querySelectorAll("button"); //모든 버튼에 이벤트 달기 for(var i = 0; i < btns.length; i++){ btns[i].addEventListener('click', handleClick); } // btns[0].addEventListener('click', handleClick); // btns[1].addEventListener('click', handleClick); // btns[2].addEventLis..

[GitHub] 사용법 및 GitHub Desktop을 활용하기

https://desktop.github.com/ GitHub Desktop Simple collaboration from your desktop desktop.github.com 우선 위에 있는 GitHub Desktop 다운로드를 해주세요. 다운로드가 끝나셨다면 GitGub에 로그인을 하시면 되는데 아이디가 없다면 새로 회원가입을 하고 File => Options 클릭 후 로그인을 해주면 되겠습니다. File => New repository 클릭 후 어떤 파일을 git과 gitgub에 저장해서 올릴건지 경로와 폴더명을 입력 하시면 되겠습니다. 이렇게 까지 완료하셨다면 거의 다오셨습니다. 해당 폴더에 있는 소스를 수정하거나 추가하게 된다면 git에 저장하게 된다면 어떤것이 수정되었는지 내용과 소스코드를..

[자바스크립트] 문서 객체 모델(DOM) 정리

⭐DOM(문서 객체 모델) => Document(문서) Object(객체) Model(모델) 문서에 접근하기 위한 표준이다. 그렇다면 문서 객체란 무엇일까? 문서 객체란 ,와 같은 html문서의 태그들을 자바스크립트가 이용할 수 있도록 객체로 만드는 것을 문서 객체라고 한다. DOM 트리(Tree) DOM의 Model은 tree 형식의 자료구조를 가지고 있기 때문에 tree 자료구조를 알고있다면 이해하기가 더욱 수월하다. JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있다. JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있다. JavaScript는 페이지의 모든 CSS스타일을 변경할 수 있다. JavaScript는 기존 HTML 요소 및 속성을 제거할 수 있다. JavaS..

[자바스크립트] 기본문법(조건문,배열,내장함수,함수,객체) 정리

자바스크립트 기본문법설명에 앞서서 ⭐HTML ⭐CSS ⭐JavaScript 3가지의 차이는 무엇일까? 쉽게 건축물로 정리를 하자면 ⭐HTML은 아파트를 만드는 뼈대이며 ⭐CSS는 만든 아파트를 색칠 및 디자인을 하고 마지막으로 ⭐JavaScript는 아파트의 기능들을 추가하는 것이다. 그럼 HTML에서 JavaScript 사용방법으로는? 1. 내부 스크립트 2. 외부 스크립트 ⭐alert() 함수 실행시 결과 ⭐비교 연산자 두 값을 비교하여 true 또는 false로 표시한다. alert(2==3) alert(10==10) alert("one"=="two") alert("three"=="three") ⭐동등 연산자 ⭐일치 연산자 alert(10 =='10'); true alert(10 ==='10'); ..

반응형