/ LECTURE

JS - Array / DOM

이 페이지는 다음에 대한 공부 기록입니다

JAVA(자바), Python(파이썬) 기반의

AI 활용 응용 소프트웨어 개발자 양성 과정

2021.11.10. ~ 2022.05.18.

찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

37일차 수업

========복습========

JavaScript

변수 관련 굉장히 유연한 언어

보통 </body> 밑에 작성

타입은 5가지 : number, string, boolean, undefined, object

적용방식

  • 내부 : <script type=”text/javascript”>js 작성 공간</script>

  • 외부 : <script src=”js 파일 경로”></script>

출력방식

console.log(“blahblah”)
;		// Debug 콘솔로 확인
alert(“blahblah”)
;			// 웹브라우저의 경고창
document.write(“blahblah”)
;	// 웹브라우저의 body 태그에 적기
innerHTML(“blahblah”)
;		// 웹브라우저의 요소에 적는 방법

연산자,제어문 : 자바와 비슷

== : 동등연산자, equal, 값이 서로 같은지 비교

두 값을 비교할 때 js 에서 강제로 형변환을 해줌

=== : 일치연산자, strict equal, 값도 같고 타입도 같아야함

var x = 3;
var y = “3”;
document.write(x == y);	// output true
document.write(x === y);	// output false

======== 끝 ========

37일차 수업

배열

  • Java의 arrayList 와 비슷한 느낌, 가변적
var arr = [];	// 0칸 배열
var arr = new Array(10);	// 10칸 배열
var arr = [1, 2, 3,”길동”,”둘리”]
;	// 선언과 대입을 동시에, 타입 무관
var arr = new Array(1, 2, 3,”길동”,”둘리”)
;
arr.push(“아이스크림”)
;	// 배열의 끝에 데이터 추가
arr[arr.length] = “아이스크림”;	// 배열의 끝에 데이터 추가
arr[index] = “아이스크림”;		// 특정 인덱스에 데이터 입력

DOM

페이지 안에 구조를 만들고, 구조에 대한 값(value or 태그 사이에 있는 값) 추출

조건문이나 제어문으로 데이터를 가공, 그에 따라서 기능을 입히거나 등등..

HTML 구조 : DOM, 문서객체 모델, Document Object Model

Document

HTML 태그 덩어리, 웹페이지 그 자체

HTML의 새로운 요소나 존재하는 요소의 속성을 추가, 제거

CSS 스타일 or 이벤트, 추가 or 제어 가능

선택자

document.getElementsByTagName(태그이름);	// 태그 이름 선택 가능
document.getElementById(아이디);			// id 선택 가능
document.getElemnetsByClassName(클래스이름);	// class 선택 가능
document.getElementsByName(name속성값);	// name 선택 가능
document.querySelectorAll(선택자)			// CSS 선택자 선택 가능