일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- JS redirection
- JS 삼항연산
- JS localStorage
- JS setTimeout
- JS 스코프
- JS append
- HTML기초
- JS 숫자
- git 협업셋팅
- JS setInterval
- JS preventDefault
- JS value속성
- JS prompt
- JS null undefined
- js 변수
- JS form action
- JS 화살표함수
- JS typeof연산자
- JS 형변환
- JS 함수
- JS 연산
- JS form
- JS appendChild
- JS 타이머기능
- CSS속성정리
- JS 데이터타입
- JS classList
- JS clearInterval
- CSS기초
- JS 기초
목록JS 기초 (13)
공부기록용
Element.classList 웹 요소(Element)로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다. (태그를 통해 만들어진 요소에서 클래스의 목록만 뽑아내는 속성이 바로 이 classList) 반환된 클래스 콜렉션은 유용한 메소드를 다수 포함하고 있다. ▶내용실습◀ 실험용 테스트 add remove toggle // Javascript // querySelector로 요소들 모두 선택 const h1 = document.querySelector('h1') const addBtn = document.querySelector('#add') const removeBtn = document.querySelector('#remove') const toggleBtn = document.querySelect..
window 객체 관련 메소드들로 1s = 1000ms인 ms단위를 사용한다. setTimeout정해진 시간이 지나고 나면 주어진 함수를 실행 해주는 메소드 setTimeout(실행할 함수, ms_단위의 시간)//100ms가 지나고 난뒤 함수를 실행하겠다.(1초)setTimeout(function(){ console.log("재미있다")}, 1000) ▶내용실습◀setTimeout(function(){ console.log(1234)}, 2000)console에 2초 뒤에 1234가 나타나게된다. setInterval일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드setInterval(반복 실행할 함수, ms_단위의 시간)// 500ms마다 함수를 반복 실행한다setIn..
삼항 연산 삼항 연산은 이름 그대로 세 개의 항을 이용해 결과를 반환하는 연산이다. 보통 if문의 단축 형태로 사용되기 때문에, 삼항 조건 연산식이라고도 부른다. 조건식의 결과에 따라 남은 두 항 중 하나를 반환한다. 조건식? 참일_경우의_결과 : 거짓일_경우의_결과 조건식 : 조건 역할을 하는 표현식 참일_경우의_결과 : 조건식의 결과가 참일 경우 반환될 결과 거짓일_경우의_결과 : 조건식의 결과가 거짓일 경우 반환될 결과 ▶내용실습◀ let result; result = 3 < 2 ? "true" : "false" // true 또는 false가 결과에 따라 이 문항을 대체하게 됨 console.log(result) 축구 야구 농구 PICK // Javascript const select = docu..
, 처럼 사용자로부터 입력을 받는데 사용되는 요소(입력요소)들이 있고 여기세어 사용자가 입력한 값을 읽어들일 때는 요소의 value속성에 접근한다 요소의 덱스트에 접근하기 : textContent 또는 innerText 사용자가 요소에 입력한 값에 접근하기 : value 입력 요소의 value에 접근하여 할 수 있는 일은 크게 두 가지, 읽기와 쓰기이다. // 대상 요소의 사용자 입력값을 읽어 콘솔에 출력 console.log(target.value) // 대상 요소의 사용자 입력값을 "변경값"으로 바꾸자 target.value = "변경값" form은 여러 입력 요소를 포함할 수 있으며 form요소로부터 여러 입력 값을 읽을 수 있다. form안에 여러개의 입력 요소를 포함시키고, 각 입력 요소의 값을..
Event'사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건'을 의미한다.ex. 웹 상에서의 버튼을 클릭했다_클릭 이벤트, 키보드를 눌렀다_키다 이벤트, 입력 폼의 내용을 제출했다_제출 이벤트 등등 각각의 이벤트들은 이벤트 핸들러(handler)를 가질 수 있다. 이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라고 한다. (이벤트 핸들링 이라고도 함)/*웹 사용자가 button요소를 클릭했을 때, 경고 다이얼로그 박스를 띄워 환영의 메시지를 보여주고 싶다면*/const handleClick = function(){ //handleClick가 다이얼로그박스를 호출하는 기능을 가..
함수 함수는 '호출될 수 있는 코드 조각'이다. 변수를 선언하고 데이터를 대입하면 변수의 이름은 데이터 대신 사용할 수 있는 것처럼, 함수를 선언하면 함수의 이름을 코드 조각 대신 사용할 수 있다. (데이터가 아닌 코드에 이름을 붙이는 것이 함수이다.) 반복되는 특정 작업을 수행해야 한다면 그 코드 자체를 어딘가에 만들어서 저장해놓고 사용하는 것이 용이할 것이다. (마치 변수에 데이터를 할당해놓고 계속 사용하는 것처럼) 이 때 사용해볼 수 있는게 함수이다. let value = "문자열" // value는 "문자열" 대신 사용된다. ---> yes!! console.log(value) let work = console.log("!") // work는 콘솔에 !를 출력하는 기능 대신 사용된다? --> NO..