javascript, framework/javascript (50) 썸네일형 리스트형 Step06_innerHTML(innerHTML, insertAdjacentText, insertAdjacentHTML, beforeend)스터디 innerText 입력된 문자열을 그대로 넣는다 innerHTML 입력된 문자열을 html 형식으로 넣는다. --함수-- insertAdjacentElement ex) targetElement.insertAdjacentElement(position, element) insertAdjacentElement() 메서드는 특정 element를 targetElement를 기준, position을 반영하여 삽입하게 도와주는 메서드이다. insertAdjacentHTML ex) targetElement.insertAdjacentHTML(position, element) insertAdjacentHTML() 메서드는 특정 html 형식으로 targetElement를 기준, position을 반영하여 삽입하게 도와주는.. Step05_random(floor(Math.random()*숫자))스터디 Step02_example9에서 배웠던 랜덤한 정수를 출력해주는 floor(Math.random()*숫자)를 사용하여 숫자 맞추는 게임을 만들었다. 2022.07.08 - [javascript] - Step02_example9(Math.random, Math.floor) Step02_example10때 처럼 html에서 태그를 사용했지만 이번엔 버튼 클릭 시점에 실행되기 때문에 "change"가 아닌 "click"을 사용했다. 2022.07.08 - [javascript] - Step02_example10 (change, value) 승리 횟수를 기록하는 코드를 작성했다. (count = count+1; ) Step02_example때와 같은 원리다. 2022.07.07 - [javascript] - S.. Step05_example(&&, 비동기 작업, 가위바위보)스터디 Step02_example11에서 만든 가위바위보 게임과 Step03_quiz에서 배운 &&을 사용하여 가위바위보 게임을 다시 만들었다. 2022.07.08 - [javascript] - Step02_example11 (가위바위보 게임, if else if) 2022.07.10 - [javascript] - Step03_quiz(논리 연산자 &&)스터디 예컨데 else if (mynum == 0 && ranNum == 2) 사용자는 0, 컴퓨터의 랜덤한 숫자는 2 양쪽 모두의 조건이 실행하였을 때 "이겼습니다"가 출력된다. ( 0은 가위, 2는 보, 사용자가 이긴 것이 맞다.) 예시에서 비긴 상황과 이긴 상황을 조건문으로 작성하고 이외의 상황은 else로 "졌습니다"가 출력되게 작성했다. 비동기 작업으로.. Step05_createElement2(setAttribute)스터디 버튼을 누르면 이미지가 순서대로 출력되는 기능을 작성해보자 setAttribute setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정한다. Step04_createElement(createElement, append, this, remove)스터디 createElement javaScript를 통해 HTML 요소를 생성한다. ex) createElement let div = document.createElement('div'); //div 추가 let div = document.createElement('div class=myDiv'); // css를 가진 div를 추가 append() 선택된 요소의 마지막에 새로운 요소나 컨텐츠를 추가한다. prepend() 선택된 요소의 첫번째에 새로운 요소나 컨텐츠를 추가한다. 목록을 추가하고 삭제할 수 있는 기능을 만들려고 한다. let li = document.creatElement("li"); JavaScript를 통해 HTML 요소를 생성하기 위하여 createElement()를 사용할 수 있다. do.. Step03_quiz(논리 연산자 &&)스터디 논리 연산자 &&을 사용한 예제이다. 논리 연산자 &&은 양쪽이 조건이 모두 맞아야 되는 연산자이다. 중고등수학에서 사용되는 and와 같은 의미라고 생각할 수 있다. 예시에서는 h>=150 && w Step03_if3(keydown, keyCode==13)스터디 keyup 키보드에서 손을 땠을 때 실행 keydown 키보드를 눌렀을 때 실행 키보드를 누르고 있을 때 한번만 실행된다. keypress 키보드를 눌렀을 때 실행 키보드를 누르고 있을 때 계속 실행된다. 점수를 입력하고 Enter 키를 누를 경우 성적이 출력되는 기능을 만들어 볼 계획이다. 마찬가지로 placeholder을 활용하여 안내문을 적어뒀다. script에서는 keydown 이벤트 타입을 사용하였다. 해당 이벤트 핸들러를 e에 담아 활용하였다. 이벤트 핸들러를 확인하고자 console.log(e)를 작성하였다. console.log(e)에 대한 값이다. keyCode : 13을 확인할 수 있다. 여기서 keyCode : 13은 enter의 코드번호를 뜻한다. 키보드 키 코드 자료 참고 http.. Step03_if2(placeholder, 양수 판별)스터디 input에 텍스트를 입력 후 버튼을 누르면 양수인지 아닌지를 판별해주는 코드를 작성하고자한다. placeholder를 활용하여 input에 입력할 정보를 미리 안내하는 문구를 적었다. script에서는 Number()함수를 활용하여 string type으로 입력된 value값을 number type으로 변환하였다. 그리고 if else 조건문을 활용하였다. 양수인 경우만 "양수 입니다."가 출력되고 나머지 경우는 "양수가 아닙니다"가 출력되기에 num > 0을 조건으로 작성했다. 양수를 제외한 음수, 0, 문자열 등의 텍스트는 "양수가 아닙니다"로 출력된다. 이전 1 2 3 4 5 6 7 다음
