javascript, framework (68) 썸네일형 리스트형 Step06_example2(creatElement, append 응용)스터디 creatElement 와 append를 사용해서 일정 정보가 html table 형식으로 입력되는 기능을 만들었다. 2022.07.10 - [javascript] - Step04_createElement(createElement, append, this, remove)스터디 Step06_example(beforeend)스터디 이름과 주소를 동적으로 추가하는 문서객체를 만드는 연습을 할 계획이다. 추가하는 방식을 3가지로 작성하여 버튼이 3개다. 2022.07.10 - [javascript] - Step04_createElement(createElement, append, this, remove)스터디 2022.07.10 - [javascript] - Step06_innerHTML(innerHTML, insertAdjacentText, insertAdjacentHTML, beforeend)스터디 위의 학습이 필요하다 1번 방법 연결연산과 insertAdjacentHTML를 활용하여 tbody 의 beforeend 위치에 삽입해주는 방법이다. 2번 방법 1번 방법과 유사하다. 연결연산을 하지 않고 전체를 텍스트 처리하고 이름과 .. 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 이전 1 2 3 4 5 6 7 8 9 다음
