충분히 쌓여가는

getElementByClassName 셀렉터어떤 html 요소를 찾고 변경할 때 id로 찾았는데 class로 찾을 수 있다 테스트1 테스트2 처음 태그의 내용이 안녕으로 바뀐다getElementsByClassName('클래스명')[순서] [0]과 같이 순서를 넣는 이유는 getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아주기 때문이다그래서 몇 번째 요소를 바꿀지 [순서]를 붙여줘야 한다 이벤트 리스너버튼의 onclick="" 안에 자바스크립트를 짰지만 이벤트 리스너 문법을 사용해도 된다document.getElementById('id요소').addEventListener('click', function(){ // 실행할 코드 ..

function에 사용 가능한 parameter 문법function alert(parameter) { document.getElementById('alert').style.display = 'parameter';}() 소괄호 내에 문자 입력{} 중괄호 내에도 () 소괄호에 입력한 같은 문자 입력 parater 사용 예시 알림창 알림창 닫기 알림창 열기 alert라는 곳에서 function을 2번 사용만약 parameter 문법을 사용한다면 function을 1번만 사용해도 됨  알림창 알림창 닫기 알림창 열기 function 하나로 여러 기능 실행 가능 parameter 문법 특징파라미터는 자유롭게 작명 가능function pl..

function 문법함수는 길고 더러운 코드를 한 단어로 축약하고 싶을 때 사용하는 문법특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법 function 함수이름() { 코드} Alert 코드 function으로 축약기존코드 알림창 닫기 열기 function 사용 알림창 알림창 닫기 알림창 열기 자주 겪는 에러JavaScript 코드는 html 코드 밑에 생성JavaScript는 html을 조작하는 언어컴퓨터가 html 파일을 읽을 때 위에서 부터 읽기 때문에 html을 미리 읽어야 JavaScript 조작 가능오타 주의예를 들어 getElementById를 getelementById나 getElementByid와 같이 대문자를 소문..

UI 만드는 법칙HTML CSS로 미리 UI 디자인을 해놓고 필요하면 평소에 숨긴다버튼을 누르거나할 경우 UI를 보여달라고(필요할 때 보여달라고) 자바스크립트 코드 만들기 1. Alert UI 디자인작업 폴더에 main.css 만든 후index.html 태그 안에입력 하면 css 사용 가능html 파일의태그 안 알림창main.css 파일 .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; }display: none: UI 숨기기display: block: UI 보여주기visibility : hidden: UI 숨기기 버튼 ..