개발15 Javascript 데이터 타입 (공부_7) 데이터 타입값의 종류를 의미기본 타입과 객체 타입으로 구분기본 타입 (Primitive Type)자바스크립트에서 객체가 아닌 것들그 자체로 변수에 저장된 것들종류숫자 (number)문자열 (string)불리언 (boolean)nullundefined심볼 (symbol)객체 타입 (Object Type)자바스크립트에서 기본 타입을 제외한 모든 타입을 의미자바스크립트 안에 내장된 객체 타입ArrayDateObjectMath이외에 기본 타입을 제외한 모든 것들객체 특징자바스크립트의 객체는 { 이름(key): 값(value) }의 형태로 프로퍼티를 저장하는 컨테이너여러 개의 프로퍼티들을 포함할 수 있음기본 타입, 또 다른 객체, 함수를 가질 수 있음객체의 프로퍼티가 함수를 가질 때 이를 메서드라고 부름참조 타입.. 2024. 8. 7. Javascript 변수, 상수 (공부_6) 이번 시간에는 자바스크립트의 변수, 상수 선언 방법과 ES6 이전, 이후 문법에 대해 간단하게 공부를 했다.그리고 스코프, 식별자 이름, 네이밍 규칙, 호이스팅, Strcit Mode에 대해 공부했다. 변수let 이라는 예약어 (또는 키워드)로 변수 선언예약어 : 프로그래밍 문법으로 사용하고 있는 키워드let 키워드는 ES6에서 나왔고 ES6 이전에는 var 키워드만 사용let teacher = '코비';console.log(teacher);teacher = '홍길동';console.log(teacher);// 변수값을 변경할 수 있고 똑같은 이름의 변수 선언 불가능 상수const를 사용하여 상수 선언한 번 할당한 값을 바꿀 수 없음let 키워드와 똑같이 ES6에 새로 생김const usernam.. 2024. 7. 31. Javascript 이벤트 다루기 (공부_5) 이번 시간에는 자바스크립트로 이벤트를 다루는 여러 가지 방법에 대해 공부를 해봤다. 이벤트웹 브라우저가 알려주는 HTML 요소에 대한 사건을 의미예시)어떤 요소를 선택하거나 커서를 움직일 때키보드에서 키를 선택할 때양식 제출오류 발생브라우저 창 크기 조정 혹은 닫기웹 페이지 로딩 완료비디오 재생, 정지, 끝남 이벤트 등록하기인라인이벤트 대상의 HTML 태그 속성으로 지정하는 방식인라인 이벤트 프로퍼티 리스너이벤트 대상이 되는 객체의 프로퍼티로 이벤트를 등록하는 방식프로퍼티 리스너let btn1 = document.querySelector('.btn1');btn1.onclick = function () { alert('Hello 프로퍼티 리스너');}; addEventListener이벤트를 등록.. 2024. 7. 25. Javascript 데이터 속성 dataset (공부_4) 이번에는 데이터 속성인 dataset에 대하여 학습했고 그 내용에 대해 적어 보려고 한다. datasetHTMLHello Javascript---> data- 다음에 test, tooltip, example 등의 속성명을 쓰면 되고 그 뒤에 오는 속성값을 읽거나 수정할 수 있음Javascriptlet h2 = document.querySelector('h2');h2.dataset.test = 'hellow Javascript'; // 변경console.log('h2.dataset.test: ', h2.dataset.test); // 출력---> dom 요소의 dataset이라는 속성을 통해서 접근할 수 있고 쓸 때에는 = 연산자를 통해서 사용할 수 있음 정리dataset을 쓰기 위해서는 HTML에서.. 2024. 7. 22. Javascript DOM 추가, 제거 (공부_3) 이번 시간에는 DOM을 추가하는 방법과 제거하는 방법에 대해서 공부하고 내용을 정리할 예정이다. DOM 추가createElement : 생성하고 싶은 tagName의 HTML 요소를 입력하면 새로 생성됨let li = document.createElement('li'); appendChild : 특정 부모 노드의 마지막 자식으로 새로운 노드를 추가---> 처음에 부모 노드를 가져오고 부모 노드에 추가하고 싶은 자식 노드 추가let li = document.createElement('li');let ul = document.querySelector('ul');li.textContent = 'Hello';ul.appendChild(li); insertBefor : 삽입할 요소의 위치를 정해서 새로운 노드 .. 2024. 7. 19. Javascript HTML 요소 조작 및 스타일링 (공부_2) 이번에는 자바스크립트로 HTML 요소를 조작하고 스타일링 하는 방법에 대해서 공부를 했고 정리해 보려고 한다. 1. HTML 요소 선택하는 방법get 메서드document.getElementByID : HTML 요소에 할당한 고유한 ID를 찾을 수 있음document.getElementsByClassName : HTML 클래스명으로 요소를 찾을 수 있음 document.getElementsByTagName : HTML 태그명으로 요소를 찾을 수 있음 ★ 중요 포인트★ID는 중복이 되면 안 됨 (= 고유하기 때문에 하나밖에 없음) 그렇기 때문에 getElement 뒤에 s 붙이면 안 됨!!ClassName, TagName은 중복이 될 수 있기 때문에 getElements 뒤에 s를 꼭 붙여줌!! 예시)운.. 2024. 7. 17. 이전 1 2 3 다음