하루 하루

하루입니다. 엘리먼트의 HTML 컨텐츠 조작하기 엘리먼트의 HTML 컨텐츠 조회하기 let 변수 = element.innerHTML; * 변수에는 태그가 포함된 HTML 컨텐츠가 대입된다. 연습 연습입니다. let content = document.getElementById('box').innerHTML; * content는 '연습연습입니다.'이다. 엘리먼트의 HTML 컨텐츠 변경하기 element.innerHTML = '태그를 포함하고 있는 HTML 컨텐츠' 변경 전 연습 연습입니다. document.getElementById('box').innerHTML = '자바스크립트 연습배열과 반복문을 연습해보자'; 변경 후 자바스크립트 연습 배열과 반복문을 연습해보자 엘리먼트의 Text 컨텐츠 조작하기 엘리먼..

하루입니다. 자바스크립트의 배열 길이가 가변적이다. 같은 타입의 값 혹은 다른 타입의 값을 저장할 수 있다. 자바의 ArrayList 객체와 유사하다. 자료구조와 관련된 다양한 메소드를 제공한다. (저장, 검색, 삭제, 필터링, 매핑, 리듀싱, 정렬 등) 배열 객체의 주요 API 배열 생성하기 let 변수명 = []; let 변수명 = [10, 20, 30, 40]; let 변수명 = [10, "가가", 30, "나나"]; let 변수명 = [['년도', '매출액', '영업이익'], [2020, '1조', '250억'], [2021, '5천억', '500억']]; 모두 가능하다. 심지어 타입 달라도 상관 없음. 배열에 값 저장하기 1. index 사용해서 지정된 위치에 값 저장하기 let names = ..

하루입니다. 연산자 산술연산자 : + - * / % 대입연산자 : = += -= *= /= %= 증감연산자 : ++ -- 비교연산자 : == === != !== > >= false || true, 즉 true인 0.5가 나올 수 있도록 한 것이다. 천재같은 생각이다. 하지만 지금은 디폴트값 설정이 가능해졌다. 선생님이 저걸 보여주신 이유는 만약 코딩하다가 저렇게 값만 있는 || 를 보면 이런 뜻이구나 하고 알아채라고 알려 주신 듯 . 참고사항 이해가 안 가는 것. 대체 왜 에러도 null도 아닌 undefined가 뜰까? 자바스크립트의 객체는 map과 비슷한 모습이다. 만약 map의 key가 a, b, c가 있다고 할 때, 내가 key d를 부르면 오류가 아닌 null을 반환한다. 마찬가지로 자바스크립트..

하루입니다. 자바스크립트란? 브라우져 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍언어다. 인터프리터(Interpret) 프로그래밍 언어다. (컴파일 과정없이 소스가 실행파일로 사용된다. 객체지향프로그래밍 언어다. 사용자 상호작용하는 프로그램을 작성할 수 있다 : 이벤트모델을 활용한다. 동적데이터타입을 지원한다. (데이터타입이 없다). 함수를 사용한다. 자바스크립트로 할 수 있는 일 HTML 컨텐츠를 변경할 수 있다 : 현재 보고 있는 웹 페이지를 변경할 수 있다. HTML 컨텐츠의 스타일(CSS)을 변경할 수 있다. 브라우저의 도움없이 서버와 데이터통신을 할 수 있다 : AJAX기술을 활용. 우리가 중점적으로 배울 것은 배열, 객체, 함수, 이벤트 처리, HTML DOM 구분 자바 자바스크립트 ..

하루입니다. CSS 선택자 사용할 때는 띄어쓰기를 잘 하자. 선택자1 :선택자2 선택자1의 하위 엘리먼트인 선택자2 중 첫번째 자식 엘리먼트를 찾는다. 선택자1:선택자2 선택자1 중 첫번째 자식 엘리먼트를 찾는다. w3school CSS selector 캡처화면 번역 선택자 작성 팁 1. 특정 엘리먼트 하나를 선택해야 할 때 document.querySelector("CSS선택자") : Element 객체가 반환된다. #아이디 선택자를 사용하자. :first-child, :last-child, :nth-child(n) 선택자를 사용하자. 속성선택자를 사용하자(폼입력요소의 입력필드가 선택대상일 때) 2. 엘리먼트를 여러 개 선택해야 할 때 document.querySelectorAll('CSS선택자') :..

하루입니다. 중요한 이유 : 자바스크립트를 사용할 때 값들을 선택하고 조작해야 한다. 조작하기 위해선 일단 선택할 수 있어야 하고 그게 selector 선택자다. 외워야 한다. 선택자란(Selector)? CSS에서 스타일을 적용할 HTML 요소를 선택하기 위해서 사용하는 것 기본 선택자 전체 선택자 * { color: red; } HTML 문서의 모든 엘리먼트(태그)를 선택한다. 사용목적 : 스타일 리셋에 사용한다. * { color: red; } 태그 선택자 태그명 { color: red; } HTML 문서에서 해당 태그를 모두 선택한다. p { color: red; } HTML 문서의 모든 p 엘리먼트를 선택한다. 아이디 선택자 #아이디속성값 { color: red; } HTML 문서에서 id속성값..

하루입니다. CSS의 float, clear, both. float 원래 용도 : HTML요소를 주변의 다른 HTML 요소와 자연스럽개 어울리도록 만들어주는 속성이다. 엘리먼트가 floating되면 다른 엘리먼트는 floating된 엘리먼트 아래로 들어오게 된다. floating된 엘리먼트 아래로 들어온 엘리먼트의 켄텐츠는 floating된 엘리먼트를 피해서 화면에 표시된다. 그런데 만약. 여기서 float의 영향을 받지 않게하고픈 엘리먼트가 있다면? 그럴 때 clear를 사용한다. 여기서 밑 줄을 사진 밑으로 내리고 싶다. 이 내용은 이미지와 아무 상관없는 내용입니다. float를 피해 밑으로 내려갔다! 만세! 하지만 float는 이런 것보다는 다른 부분에 더 사용된다. 그게 머냐? 레이아웃. main..

하루입니다. 오늘은 저의 컴퓨터에서만 기능하는 아주 작고 소중하고 (바보같은) 페이지를 하나 만들었습니다. 이름은 하루 상점. 전자제품도 팔고 꽃도 팔고 회원가입 기능도 있어요. 회원가입을 꽃 단 토끼 밑으로 두고 싶었지만 ... 방법 미상. 아 생각해 보니까 노가다로 left 70% bottom 50% 이런 식으로 하면 됐겠네요 사용된 것 : img alt, button, link 여기서 회원가입을 누르면? 어디서 본 건 많아서 다 집어넣었음. 사용된 것 : input 태그들, link 바보 페이지인 이유 : 제출하면 회원가입 되는 게 아니라 처음 페이지로 링크되도록 했음 ㅎㅎ. 약간 로그인하면 첫페이지로 가는 그런 걸 구현하고 싶었다. 이번엔 물건을 보자. 전자제품을 판매한다. 사실 그냥 나열임. 사..