기초공사 (html,css,javascript)

DOM을 활용해 웹 문서에 필요한 요소를 추가, 삭제하는 방법을 살펴보자. DOM은 웹 문서의 구조를 부모 노드와 함께 형제 노드처럼 계층 구조로 표현할 수 있다. DOM에 접근할 때 querySelectorAll( ) 메서드를 사용하면 여러 개의 노드를 한꺼번에 가져올 수 있는데 이렇게 가져온 다양한 노드 정보를 저장한 것을 '노드리스트'라고 한다. 1.웹 문서에 새로운 노드 추가하기 1. 요소 노드 만들기 - createElement( ) 메서드 : 어떤 태그를 사용할지 태그를 만들어 주는 것이라고 생각하면 된다. document.creatElement(요소형) ex) let newP = document.createElement("p") // ....가 추가된다. 새로운 노드만 만들어진 거다, 그 안..

간단한예제 스타일변경하기 1. li color 변경하기 2. li '저자'클릭하면 alert뜨기 // html Do it! HTML+CSS+자바스크립트 웹 표준의 정석 저자 고경희 발행일 2021-01-22 쪽수 648쪽 ISBN 979-11-6303-221-2, 13000 상세 설명 보기 / 닫기 스타일변경하기 -------------------------- 웹 분야 1위! 그만한 이유가 있다! 키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다! -------------------------- 웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹 표준의 정석》의 고경희 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ ..

//마무리문제 Do it! HTML+CSS+자바스크립트 웹 표준의 정석 저자 고경희 발행일 2021-01-22 쪽수 648쪽 ISBN 979-11-6303-221-2, 13000 상세 설명 보기 / 닫기 -------------------------- 웹 분야 1위! 그만한 이유가 있다! 키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다! -------------------------- 웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹 표준의 정석》의 고경희 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ 배우고 싶다는 많은 독자의 요구를 모아 최신 경향을 반영한 이 책을 집필했다. 웹 개발을 시작하는 입문자도 쉽게..

1.텍스트 필드에 입력한 값 가져오기 자바스크립트에서 value 프로퍼티를 사용하면 폼 요소중 텍스트 필드나 이메일 필드에서 사용자가 입력한 값을 가져올 수 있다. 요소.value 주문 정보 이름 : 연락처 : 주소 : 콘솔 창에 다음과 같이 입력 document.querySelector("#order-name").value --> 이름 필드에 입력한 콘솔창에 출력된다. 2.name 속성값을 사용해 폼 요소에 접근하기 폼요소에 id나 class속성이 없고 name속성만 있으면 name식별자를 사용해 폼 요소에 접근할 수 있다. 간단한예시 '상품'항목에 내용을 입력한 후 자바스크립트를 사용해 입력한 내용을 가져오는 소스를 '콘솔'창에 작성하시오 상품 정보 상품 : 갯수 : document.order.pro..

사용자가 선택한 option을 alert에 출력해라 select태그 : 목록을 '선택목록' 이라고한다. 선택목록은 태그를 사용해서 여러개의 항목을 한꺼번에 지정한 후 목록을 펼쳐서 원하는 항목을 선택할수있다. selectedIndex : 사용 ---- 학과 선택 ---- 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 const selectMenu = document.querySelector("#major"); // 선택 목록을 가져와 selectMenu로 저장 console.log(selectMenu); console.dir(selectMenu); function displaySelect() { var index = selectMenu.selectedIndex; //선택한 번호를 ..

자바스크립트에는 특정시간이 되었을 때 함수를 실행하거나 특정 시간 동안 함수를 반복하기 위해서 시간을 재는 함수가 있는데, 이것을 '타이머함수' 라고 한다. 일정 시간마다 반복하기 - setInterval( ) setInterval(콜백함수, 시간) // 선언식으로 표현하기 function greeting(){ console.log('안녕하세요'); } setInterval(greeting, 2000); 콘솔창에 '안녕하세요'가 일정시간마다 반복으로 나온다. // 화살표 함수로 표현하기 setInterval ( ( ) => { console.log('안녕하세요'); }, 2000) ; 반복실행 멈추기, 타이머 함수 종료 시키기 - clearInterval( ) clearInterval(타이머) setIn..

콜백함수는 다른함수의 인수로 사용하는 함수를 가리킵니다. 아래 예제를 살펴보면 이해가 된다. function main(x){ x(); //콜백함수 호출 } function sayHi(){ console.log("안녕"); } main(sayHi); 중요한것은, 전달해준 콜백함수는 콜백함수를 전달받은 함수에(main) 의해서 호출된다. main함수에 전달해줬기 때문에 main함수 내부에서.언제 어떻게 호출될지는 콜백함수를 전달받은 main함수의구현상황에 따라 달려있다. // 또 다른 예제를 살펴보자 function greetToUser(greet) { //greeToUser함수의 인수를 greet그릇에 받는다. const name = "박희정" greet(name); //전달해준 콜백함수 호출할때 이 함수..

1.배열에서 10보다 큰값을 찾아서 화면에 표시해보세요 주어진배열은 [1,3,5,7,9,11,13,15,17,19] 생각노트 1.배열 요소의 개수만큼 for문을 반복한다. 2. if문을 사용해서 요소의 값과 10을 비교한다. --> 요소의 값이란 number[ i ] 3.document.write문을 이용해서 화면에 표시한다. const number = [1,3,5,7,9,11,13,15,17,19]; document.write(`주어진 배열은 : ${number}이다. `); console.dir(number); for(let i = 0; i 10){ //이부분 헤맴.변수의 배열순번 변수[순번] document.write(`${nu..

1. for문 for문은조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할때 편하다. for(초기값; 조건; 증가식;) { ......} **for반복문 예제 // const color = ["red","orange","purple","skyblue"]; // console.log(color) // // for(초기값; 조건; 증감식){ // // } // for(let i = 0; i < color.length; i++){ // document.write(`${color[i]}~~`) // } i가 배열안에 있는 목록이다! (number % i === 0 isPrime = false; // document.write(`${number}는 소수가 아닙니다.`) number에 15을 입력햇을면 i가..

switch문 체크해야 할 조건값이 많을 경우에는 여러개의 if..else문을 사용하는것보다 switch문이 더 편리하다. switch문 안에 있는 case문에서 각 값에 따라실행할 명령을 따로 구분하면 된다. switch 문에 있는 조건은 case중 하나에만 일치하고, case를 실행한 후에는 완전히 switch문을 빠져나온다. 지정해 놓은 case문에 맞지 않으면 default문에 있는 문장을 실행한다. (* case문에서 값을 지정할 때 식을 사용할 수 없다는 점 주의!) switch (조건) { case 값: 문장 break; case 값:문장 break; case 값:문장 break; ...... default : 문장 } 예시 다음은 사용자가 3개의 값중에서 하나를 선택하여 입력한 후 swit..