혜랑's STORY

#기획 간단한 투두리스트를 구현하였다. 투두리스트란, 해야할 일들의 목록을 정리해 둔 것을 말하며 이번 웹프로젝트의 가장 중요한 핵심 기능이라 할 수 있다. 제공하는 기능은 컨텐츠 추가, 컨텐츠의 디테일(세부설명) 추가, 선택항목 삭제, 전체삭제, 마지막 항목 삭제 등이 있다. # 실행 # 코드 ◆ 로그인 페이지 Sign Up Close ID : PW : /* Login */ function Login() { var objId = document.getElementById("loginId"); var objPw = document.getElementById("loginPW"); if (objId.value == "") { alert("Check Your Id"); objId.focus(); return;..

#innerHTML 속성 - 화면 상의 버튼을 누르면 사용자로부터 promt를 통해 문자열을 입력받고, 입력받은 문자열을 버튼 아래 화면에 표시하는 웹문서를 작성하시오. 이때 출력할 자리인 요소에 innerHTML 속성을 이용하여 요소를 추가하는 코드를 작성하시오. - 실행결과 #스타일 속성 변경하기 - 자바스크립트를 사용하여 style 속성에 접근하여 배경색을 변경하는 동적 웹문서를 만든다. 두개의 버튼을 만들고 파란색 버튼을 누르면 배경색이 파란색으로 붉은색 버튼을 누르면 배경색이 붉은색으로 변경되는 웹 문서를 작성한다. - 실행결과 Blue Red #계산기 만들기 - 두 개의 값을 텍스트 위젯으로 받아서 덧셈, 뺄셈, 곱셈, 나눗섬을 하는 웹문서를 작성하시오. 이 때 요소로 연산자를 입력받아서 계산..

#이벤트 처리하기 - 개요 이벤트란, 사용자가 웹 브라우저를 사용하는 중에 발생시키는 키보드, 마우스 등의 입력을 말한다. 이벤트를 처리한다는 것은 이벤트가 입력되었을 때 미리 구현된 자바스크립트 코드를 수행하는 것이라 할 수 있다. - 간단한 이벤트 처리 예제 (no/yes 버튼을 누르면 어떤 버튼을 눌렀는지 알려주는 예제) - 이벤트의 종류 - 이벤트 핸들러(handler) : 이벤트가 발생시 실행하고자 하는 자바스크립트 함수나 코드 - 이벤트 등록 : 이벤트의 종류와 이를 처리할 이벤트 핸들러를 연결시키는 작업 #폼 다루기 - 폼 다루기와 이벤트 처리 예제 ( 요소를 DOM 인터페이스로 접근하여 value 속성값을 읽거나 저장) #동적 웹 문서 만들기 - 정의 동적 문서란, 웹 문서가 즉시 변경된 ..

#객체 (속성+메소드) : 객체는 자료를 저장하고 처리하는 기본 단위로 하나의 변수에 여러 정보를 저장하기 위하여 사용한다. 내장객체(built-in objects) : 자바스크립트에서 자주 사용하는 요소로 미리 객체로 정의된 것들. 예를 들어 Date, Math, Array, Number, String 등 문서 객체 모델(DOM) : 객체를 사용해 웹문서를 관리하는 방식. 문서 객체 모델에서는 웹문서 뿐 아나라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등도 모두 각각 별도의 객체로 만들어 놓음. 브라우저 객체 모델(BOM) : 웹 문서를 관리하는게 DOM이라면 BOM은 웹브라우저의 주소 표시줄, 창 크기 등 웹브라우저 정보를 객체로 다룬다. - 속성 : 객체에서 값을 담고있는 정보 - 메소드 ..

#사칙연산 계산결과표 작성 숫자 34 25 더하기 빼기 곱하기 나누기 #switch문으로 한영 번역하기 번역하기 #반복문 사용하기 #BMI 계산하는 함수 정의하기 키 : 몸무게 : 계산하기

# 비교 연산와 블리언 Comparison operators & Boolean === 1===1 1===2 1 < 2 1 < 1 # 조건문 Conditional statements Program IF-true IF-false # 리펙토링 ; 중복의 제거 - 기능 : 중복되는 기능을 함수로 묶어 반복을 줄인다. # 배열과 반복문 - 배열 Array Syntax get count add count - 반복문 Loop # 함수 Function Basic Parameter & Argument Return

# : 자바스크립트와 같은 클라이언트 사이드 스크립트를 정의할 때 사용 - 스크립트 코드를 요소 내부에 직접 명시하거나, src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있다. 그러나 src속성이 명시된 요소에는 스크립트 코드를 직접 명시해서는 안된다. # 이벤트 : 모든 동작으로 프로그램에서 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 준비해 놓은 것 ex> 마우스 클릭 - 이벤트 종류와 의미(이벤트 핸들러는 이벤트 앞에 on을 붙여준다. blur : 포커스를 다른곳으로 옮길 경우 click : 링크나 폼의 구성원을 클릭할 때 change : 선택값을 바꿀 경우 focus : 포커스가 위치할 경우 mouseover : 마우스가 올라올 경우 mouseout : 마우스가 떠날 경우 mous..

# 스타일시트; 웹 문서의 출력될 외형 스타일 - 구성요소 : 선택자(여러 개인 경우 콤마로 구분, 스타일을 설정할 대상이 되는 태그) / 속성 선언(속성과 속성값, 콜론으로 구분, 세미콜론으로 종료) - 블록단위 요소 : - 인라인 요소 : - 클래스 선택자 : -> 클래스 선택자는 클래스이름 앞에 점(.) - 아이디 선택자 : -> 아이디 선택자는 아이디이름 앞에 샵(#) - 폰트 / 문자 / 색상 및 배경 또한 지정 가능 # 박스모델 설정하기 스타일 속성 : 외부공백 / 내부여백 / 테두리의 두께 / 테두리 모양 / 색상 등 # 움직임 설정 - 전환효과 : transtion: - 좌표변환 :