김방울

1. HTML 문서의 이해 HTML5 웹표준 - W3C가 권고한 표준안에 따라 브라우저의 종류 혹은 버전과 구현되는 기기에 따라 모든 기술을 동일하게 구현하기 위한 규칙성 HTML4 1999년 html버전 코딩 이후에 다양한 웹브라우저에서 호환성 확인 태그: html을 이루는 기본 구성 단위. 특정한 성격을 가진 명령어로 문서의 구조의 부분을 나타내며, 꺽쇠 괄호 로 감싸서 구분함. 그 외 언어 및 이름 생성 시 주의사항 1. _(언더바) -(하이픈): 특수문자 표현을 할 때는 이 두가지만 표현 가능 2. 소문자와 대문자 구분 3. 띄어쓰기: 중간에 공백을 주지 않는 것이 좋음 4. 한글 사용 금지 5. 태그 입력시 열고닫기를 습관화 파일 이름 저장시 주의! 특수문자, 공백 , 한글 - 영문쓰기! 밖에서..

라이브러리와 프레임워크 라이브러리: 무엇인가 정리정돈돼 있는 곳. 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어들을 잘 정리정돈해놓은, 재사용하기 쉽게 돼 있는 소프트웨어 프레임워크: 우리가 만들고자 하는 것이 있을 때 그것이 무엇이냐에 따라(게임이냐 웹 사이트나 채팅 프로그램이냐에 따라) 언제나 필요한 공통적인 것이 있고, 기획 의도에 따라 달라지는 부분이 있음. 그 중에 공통적인 부분은 프레임워크로 만들어 놓고, 만들고자 하는 기능이나 특성에 따라 달라지는 부분만 살짝살짝 수정하는 방법으로 거의 반제품과 같은 것 jQuery: 자바스크립트 라이브러리 중에서 가장 유명한 것. 제이쿼리 라이브러리를 내려받아 내려받은 파일을 프로젝트 디렉터리로 cdn: content delivery net..

객체의 활용 1. 앞서 작성한 예제 코드 2. Body 변수에 객체 담기 3. 객체에 setColor 프로퍼티 추가 작성한 코드를 재사용하게 되는 것. color.js 파일을 수정하면 모든 웹 페이지에 동시에 변화가 반영. www.evernote.com/l/Alcmnsb33dJL_7GnaOU0aqqraXQ8QpN4_oA/

객체 예고 function nightdayhandler(self) { var target= document.querySelector('body') if (self.value ==='야간 모드') { target.style.backgroundColor='#736D71'; target.style.color='white'; document.querySelector('h1').style.color='yellow'; self.value='주간 모드' var alist = document.querySelectorAll('a'); var i = 0; while (i < alist.length){ alist[i].style.color='#BEF3E8'; i = i + 1; } } else { target.style.b..

함수 예고 함수: 코드가 많아지면 그 코드를 잘 정리정돈하기 위한 도구 함수 1. ex9.html 파일 작성 function basic parameter & argument return 2. 2-1, 2-2가 반복되게 하기 반복문을 쓸 수 없는 경우: 연속적으로 반복되는 것이 아니라 연속되지 않게 반복될 때 3. 반복되는 코드를 함수로 만들기 함수가 등장하기 때문에 function을 적고, 함수의 이름을 웹브라우저에게 알려준다. 여기서는 two. 그리고 중괄호 안에 반복되는, 즉 재사용하고 싶은 코드를 붙여넣음. 4. 반복되는 코드를 함수로 바꾸기 매개변수와 인자 지금까지 살펴본 함수는 자판기에 제품이 하나밖에 없어서 언제나 똑같은 제품을 받을 수 있는 자판기. 원하는 제품을 선택하면 그 제품에 해당하는..

반복문 예고 night 버튼을 클릭하면 태그에 style 속성이 추가되며 'powderblue' 라는 색상이 적용됨. day 버튼을 클릭하면 'blue' 색상이 적용됨. 이렇게 하기 위한 코드가 바로 다음 코드인데, 이 코드의 대략적인 내용은 이 웹 페이지의 모든 태그를 가져온 다음, 태그 하나하나에 대해 반복적으로 powderblue 색상을 적용하는 것. var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length) { alist[i].style.color='powderblue'; console.log(alist[i]); i=i+1; } 배열 배열: 데이터가 많아짐에 따라 그 많은 데이터를 그냥 둘 수 없기 때문에 데이터 중..

제어할 태그 선택하기 1. night 버튼과 day 버튼 만들기 2. 버튼을 클릭했을 때의 이벤트를 추가하기 위해 onclick 속성을 추가 버튼을 클릭했을 때 태그에 style 속성을 동적으로, 프로그래밍적으로, 상호작용에 의해 넣으려 함. 그러기 위해서는 자바스크립트 문법에 따라 웹 브라우저에게 태그를 선택하게 해야 함 -> document.querySelector(selectors); var el = document.querySelector(".myclass"); -> 이 웹 페이지에 있는 모든 태그 중에서 클래스명이 'myclass'인 태그 선택. document.querySelector('body') -> 태그를 선택 그 다음, 태그에 스타일 속성울 어떻게 자바스크립트로 넣을 수 있는지 알아봐야..

데이터 타입- 문자열과 숫자 -숫자 콘솔 경고창에 숫자 표현하기: alert(1) 콘솔 경고창에 숫자 표현하기 2: alert(1+1) 콘솔에서 덧셈하기: 1+1 산술 연산자: +,-,*,/ -문자열 따옴표나 작은따옴표로 이루어져 있음 .length와 같은 것들을 프로퍼티라고 함 문자열을 대문자로 출력하기: '문자' .touppercase() 문자열에서 특정 문자 찾기 'hello world' .indexof('0') ---- -1로 찾을 수 없다는 결과가 나옴 'hello world' .indexof('o') --- 4가 나옴. 'h'부터 0으로 쳐서 4번째 자리에 소문자 'o'가 나온다는 뜻 'hello world' .indexof('world') 공백을 포함헤서 6번째에 'world' 라는 문자열이..