WEB/이론 정리17 [8주차] 실습 1. innerHTML 속성 - 화면 상의 버튼을 누르면 사용자로부터 prompt를 통해 문자열을 입력받고, 입력받은 문자열을 버튼 아래 화면에 표시 - 출력할 자리인 요소에 innerHTML 속성을 이용하여 요소를 추가하는 코드 작성 [실행 화면] [코드] [설명] 먼저 버튼을 넣고 버튼에 onclick 속성을 넣어서 클릭하면 특정 이벤트가 발생하도록 해준다. contentPrint라는 함수를 정의하고 이 함수를 통해 prompt를 이용해서 내용을 입력받고 입력 받은 내용을 출력하는 코드를 지정해준다. 문제에서 제시된대로 p 요소를 미리 설정해두고 이 p 요소에 print라는 아이디를 부여한다. getElementById를 이용해서 지정해둔 p요소를 불러오고 innerHTML 속성을 이용해서 h1 요소.. 2021. 8. 25. [8주차] 이론 1. 이벤트 - 사용자가 웹 브라우저를 사용하는 중에 발생시키는 키보드, 마우스 등의 입력 이벤트 처리 : 이벤트가 입력되었을 때 미리 구현된 자바스크립트 코드를 수행 이벤트 핸들러 : 이벤트 발생 시 실행하고자 하는 자바스크립트 함수나 코드 이벤트 등록 : 이벤트의 종류와 이를 처리할 이벤트 핸들러를 연결시키는 작업 - 등록 방법 1) 태그 속성에 직접 이벤트 핸들러 기술 or 이벤트 함수 호출 2) 객체의 이벤트 속성 값에 이벤트 핸들러 함수 이름 기술 2. 이벤트 종류 1) 마우스 이벤트 2) 키보드 이벤트 3) 프레임/객체 이벤트 4) 폼 이벤트 3. 폼 다루기 - JS를 이용해 폼의 값을 읽어내거나 계산하여 수정하는 것이 가능 - 요소를 DOM 인터페이스로 접근하여 value 속성값을 읽거나 저.. 2021. 8. 25. [7주차] 이론 [생활코딩] 1. 객체 서로 연관된 함수와 변수를 같은 이름으로 그룹핑해서 정리하기 위해 사용 매소드 : 객체에 속한 함수 객체는 중괄호를 이용해서 생성한다. var animals = { "dog" : "kong" }; document.write("dog name : " + animals.dog + " "); 이런 식으로 객체를 생성하고 객체에 생성한 데이터를 가져올 수 있다. 다음으로는 객체에 있는 데이터들을 모두 가져오는 방법이다. for (var key in animals) { document.write(dey + " : " + animals[key] + " "); } 이런 식으로 생성된 객체에 있는 데이터들을 모두 가져올 수 있다. 이 외에도 객체에 소속된 변수의 값으로 함수를 지정할 수 있고 매.. 2021. 8. 22. [6주차] 실습 1. 사칙연산 계산결과표 작성 - 자바스크립트로 사칙연산 수행 - 사용자로부터 두 개의 정수를 입력받아 더하기, 빼기, 곱하기, 나누기 계산을 하고, 그 결과를 표의 형태로 출력 ㄴ 표는 자바스크립트 내에서 작성 - Tip 1) 사용자로부터 값을 입력 받는 내장함수는? 2) 사용자로부터 입력받은 값은 어떤 자료형을 가지는가? 3) 소수점 자리를 2자리로 지정하고 싶다면 toFixed(2) 메소드를 사용한다. [실행 화면] [코드] [설명] 자바스크립트 내에서 표를 작성하기 위해서 document.write(""); 이런 형식으로 table, tr, th, td 태그들을 작성한다. 사용자로부터 두 숫자를 입력 받기 위해서 prompt 함수를 사용하였고 prompt를 통해서 입력받은 내용은 문자열로 인식되므.. 2021. 8. 14. [6주차] 이론 [생활코딩] Javascript 1. 비교 연산자 좌항과 우항의 관계에 따라서 true, false 둘 중 하나의 값을 출력하는 연산자 1) === (동등 비교 연산자) 2) >나 2021. 8. 14. [5주차] 이론 [생활코딩] Javascript 1. 기본 Javascript는 웹이 사용자와 상호작용할 수 있도록 하는 기능을 갖고 있다. HTML은 한번 화면에 출력되면 자기 자신을 바꿀 수 없는 정적인 웹페이지를 만들지만, JS는 코드에 따라 태그의 디자인을 바꾸는 등 웹페이지를 더 동적으로 만들어줄 수 있다. 즉, JS는 기본적으로 HTML 위에서 동작하는 언어이고, HTML을 제어하는 언어이다. 브라우저에서 우클릭 > 검사 > elements (태그) : 웹페이지를 구성하고 있는 html 태그들을 볼 수 있다. 2. Javascript를 실행하는 방법 1) script 태그 이용 body 태그 안에 script 태그를 넣음으로써 Javascript가 시작된다는 것을 알려줘야 한다. script 태그 안에는 JS.. 2021. 8. 7. [4주차] 실습 Chapter 05. 고급 표현을 위한 CSS3 활용 1. 표에 스타일시트 적용하기 - 자신의 시간표에 스타일시트 적용하기 - 각 셀의 폭 크기는 동일하게 120px로 적용 - 표의 제목줄은 하늘색(skyblue) 배경색 적용 - 모든 글자는 가운데 정렬 - 각각의 과목마다 배경색 지정 [실행 화면] [코드] [설명] 시간표는 1주차 실습 2번에서 했던 내용을 가져와서 사용했다. 각 셀은 th와 td로 이루어졌으므로 두 가지를 콤마로 묶어서 너비를 120px로 설정하고, 가운데 정렬을 해주었다. 표의 제목줄은 th로 했으므로 th를 선택자로 지정해서 배경색을 하늘색으로 설정했다. 각각의 과목색 설정하는 것은 2번 이상 나오는 과목이 있으므로 코드가 중간에 길어지는 것을 방지하여 각각의 과목을 써놓은 td.. 2021. 7. 31. [4주차] 이론 Chapter 04. CSS3 스타일시트 기초 1. 스타일시트란? - 웹 문서의 출력될 외형 스타일 - 크기, 색상 등의 스타일 일괄 적용 가능 - 글자간격, 문단간격, 위치 등 자세한 부분까지 설정 가능 - 콘텐츠의 내용과 디자인의 분리가 가능 2. CSS 스타일시트 구성요소 선택자 {속성:값; 속성:값; ...} 1) 선택자 - 스타일을 설정할 대상이 되는 태그 - 여러 개일 경우 콤마(,)로 구분 2) 속성 선언 - 속성과 속성값으로 구성 - 콜론(:)으로 구분, 세미콜론(;)으로 종료 3. 문서 일부분에 CSS 속성 설정 1) 요소 및 요소 - 문서의 일부분, 또는 문장의 일부분을 구분해서 그룹핑 - 블록단위 요소 : - 인라인 요소 : - style 속성 이용해서 특정 스타일 지정 가능 ㄴ 예).. 2021. 7. 31. [3주차] 실습 1. 내부 스타일시트로 적용하기 - h2 태그 : 파랑색 글씨 - p 태그 : 12pt - span 태그 : 가장 굵은 글씨, 배경색 #f2f519 - strong 태그 : 빨간색 글씨, 밑줄 - small 태그 : 회색 글씨, 기울임 [실행 화면] [코드] [코드 설명] 내부 스타일시트는 head 태그 안에 style 태그를 넣어서 그 안에 지정하고자 하는 선택자를 가져와 디자인을 설정하는 방법이다. 본문 내용은 제시된 내용을 그대로 적었다. 중간에 있는 주석은 sup 태그를 이용해서 표현해줬다. 글자 색은 color, 글자 크기는 font-size, 글자 굵기는 font-weight, 배경 색은 background-color, 밑줄은 text-decoration, 기울임 효과는 font-style 속.. 2021. 7. 24. 이전 1 2 다음