판봉 개발 일기

수업시간과 더불어서 간단한 ui요소가 있는 todo를 만들었습니다. 부트스랩을 쓸 수 있는 코드를 집어넣고 간단하게 만들어봤는데 화면은 이렇습니다. 부트스트랩에는 신기한게 많았습니다. 원래라면 body에 margin: 0 auto;를 해주어야 body가 가운데로 오게 되있는데 부트스트랩 안에 있는 명령어로 해결 할수 있었습니다. 그리고 form 태그 안에 flex도 설정할 수 있더군요 그리고 또한 중요했던 점이 form에 바로 onsubmit-"return false"를 넣어줘야 한다는 점이었습니다. 왜냐하면 넣어주지 않는다면 클릭시에 서버로 전송이 되어서 새로고침이 되어버렸습니다. 브라우저 이벤트에는 여러가지가 있습니다. 위에 것들이 기초 이벤트입니다. console창에서 event를 확인해보면 여러가..

Attribute-property 이번시간에는 제목 그대로 attribute-property에 대해서 알아 볼겁니다. 브라우저는 웹페이지를 만나면 HTML을 읽고 DOM객체를 생성합니다. 그리고 요소노드(element node)에서 대부분의 표준HTML속성들은 DOM객체의 프로퍼티가 되죠. 가 있으면 DOM 객체에서 body.id="page"로 사용할수있는것처럼요 하지만 인생처럼 이렇게 쉽게쉽게 흘러가지만은 않습니다. 만약 표준이 아닌 속성이 있다면 어떻게 될까요? 위에 방식으로는 찾을 수가 없습니다. 그럴때에는 querySelector가 아닌 getAttribute를 이용해야합니다. 바로 비표준 속성을 가져오는 것이죠. 물론 위의 사진처럼 setAttribute라는 것을 이용하여 비표준 속성을 변경할 ..

DOM NODE DOM 노드는 종류에 따라서 각각 다른 프로퍼티를 지원합니다. 주로 쓰이는것중에는 tagName이란게 있는데 tagName은 프로퍼티의 요소 노드에만 존재합니다. 반대로 nodeName이란것도 있는데 이것은 모든 Node에 존재하기 떄문에 그다지 많이 쓰이지는 않을 것 같습니다. Node property innerHTML이란 것을 이용하면 HTML을 문자열 형태로 받아 올 수 있습니다. 또한 요소안의 HTML을 수정 하는 것도 가능하죠. 실무에서도 많이 쓰인다고 하니 중요한 부분입니다. p 태그 div 태그 위 코드를 사용하여 livesever에서 돌리면 이런 결과가 나옵니다. setTimeout이란 것을 이용해서 시간이 지나면 원래의 body 내부에 새로운 html태그가 추가된것을 확인..

Selector 이번에는 browser의 selector 즉 선택자에 대해서 알아볼겁니다. 저번시간에 배웠던 것을 이용하면 가까기에 붙어있는 요소들만 접근 할 수 있었습니다. 하지만 언제나 그렇지는 않습니다. 웹 페이지 내에서 원하는 요소 노드에 대해 바로 접근하는 방법이 있습니다. 바로 getElemenet와 querySelector입니다. Element 요소에 id 속성이 있다면 위치에 상관없이 저 메서드를 이용하여 접근 할 수 있습니다. 하지만 선생님께선 저것 말고 두번째로 말씀드린 querySelector를 이용하라고 하십니다. querySelector에는 크게 2가지가 있습니다. 바로 말 그대로 "querySelector"와 "querySelectorAll"이죠 이 두가지의 차이점은 단어에서 유..

이번 시간에는 javascript에서 제어 가능한 DOM에 대해서 알아보겠습니다. DOM 먼저 자바스크립트가 돌아가는 플랫폼을 "호스트"라고 부릅니다. DOM은 문서 객체 모델 이라고 합니다. (Document object Model) DOM은 웹 페이지 내의 모든 콘텐츠를 객체로 나타냅니다.(참고로 수정 가능) 브라우저는 HTML태그를 DOM(문서를 객체화한 구조)로 가지고 있씁니다. 브라우저에선 DOM API라는걸 제공해주는데 여기서 API란 Application Programming Interface를 의미합니다. 여기서 중요한것은 Application도 아닌 Interface입니다. 한마디로 DOM은 브라우저 엔진엔 올라가있는 메모리 구조입니다. DOM TREE HTMl에는 무수히 많은 태그들이 ..

오늘은 자바스크립트의 배열에 있는 메소드들에 대해서 더욱더 알아보겠습니다. for-Each로 반복작업 for-each는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 합니다. // for each element call alert ["Bilbo", "Gandalf", "Nazgul"].forEach(alert); 위 코드를 실행하면 차례대로 alert창에 "Bilbo", "Gandalf", "Nazgul"이 실행됩니다. ["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => { alert(`${item} is at index ${index} in ${array}`); }); 위는 인덱스 정보까지 더 해주면서 출력해줍니다. + 매개변수로 넘겨..

오늘은 자바스크립트의 배열에 대해서 알아보겠습니다. 키를 사용해 식별할 수 있는 값을 담은 컬렉션은 객체라는 자료구조를 이용해 저장하는데, 객체만으로도 다양한 작업을 할 수 있습니다. 여기서 컬렉션이란 데이터의 모음을 말합니다. 자바스크립트에서 배열은 주로 스택구조를 사용합니다. 그리고 배열에는 기본적으로 내장되어 있는 메소드가 있습니다. 출력 결과는 추가한 순서부터 차례대로 나옵니다. 또한 배열의 요소에 인덱스번호를 참고하여 해당 인덱스로 접근할수도있으며, length라는 메소드로 해당 배열의 크기를 알아낼수 있고 pop이라는 메소드를 이용하여 해당 배열의 요소를 꺼낼 수 있습니다. pop은 맨 마지막에 넣었던 요소를 삭제합니다.! 스택은 LIFO구조로 후입선출 구조입니다.(마지막에 들어간것이 제일 먼..

오늘은 javascript의 Object. 즉, 객체에 대해서 알아보겠습니다. 객체(Object) 객체는 여러가지 자료형의 데이터를 담을 수 있는 자료구조입니다. let user0 = {}; 이것은 객체를 생성하고 빈 객체로 초기화한 것입니다. 자바스크립트에서 빈객체를 생성하는 방법은 크게 두가지가 있습니다. let user = new Object() // '객체 생성자' let user = {}; '객체 리터럴' 보시다시피 아래에 쓰는 방법이 더욱 간단합니다. 그것은 객체 리터럴(Object literal)이라고 부릅니다. 그래서 주로 객체 리터럴을 사용하는 방식을 택합니다. 객체의 구조 let user1 = { name:"john", age:30, // trailing-coma가 표준 } 객체의 구조..

오늘은 javascript에서 함수에 관련된것을 조금 더 배웠습니다. 한번 함수 표현식 부터 차례대로 알아보겠습니다!😁😁 함수 표현식 자바스크립트는 함수를 특별한 종류의 값으로 취급을 합니다. 이전에는 저희가 함수 선언문 방식으로 만들었습니다. function sayHi() { alert( "Hello" ); } 위 와 아래는 분명히 다릅니다. 함수를 생성하고 변수에 값을 할당하듯이 함수가 변수에 할당되었습니다!!👍👍 굉장히 유연한 방식이죠? 위 함수 표현식은 sayHi라는 변수안에 함수를 할당한 것입니다. 위 사진은 마지막 줄에서 sayHi라는것 옆에 ()가 없어서 함수는 실행 되지 않습니다. 반드시 자바스크립트에서는 괄호가 있어야만 실행이 됩니다! 그리고 함수를 변수에 할당할 수 있으므로 이런 것도 ..

오늘은 드디어 반복문과 함수에 대해서 배웠습니다. 이제부터 알아보도록 하겠습니다. while문 while은 반복문의 일종으로 문법은 다음과 같습니다. while(조건) { 실행문 } 만약에 조건이 true라면 실행문이 실행 됩니다. *while안의 조건이 true라면 항상 실행됩니다 while(true)로 작성할 수도 있습니다. 그리고 좀 다른걸로 do-while문이 있는데 이것은 일반적인 while문과는 조금 상이합니다. 문법은 이렇습니다. do{ 실행문; } while(조건) { 실행문; } 위는 do 안의 실행문이 먼저 반드시 한번 실행 되고 난뒤 일반적인 while문을 실행한다고 보시면 됩니다. For문 for문은 while문 보다는 복잡사지만 그 사용 빈도수가 더 많은 반복문입니다. 문법은 다음..