스인개 데이터디자인(12.28-06.23)/기본진도

230216_35일차 : JavaScript / 파이썬

bell_a 2023. 2. 16. 17:51

1교시, 2교시, 3교시, 4교시 - JavaScript(DOM)

1. DOM

(1) Javascript 로드 방법

(2) DOM

- DOM : Document Object Model (HTML문서를 '자바스크립트(=객체)'로 모델링(바꿈)하겠다)

예) body의 색상을 바꾸는 것을 'js'로 실행하게한다(요소하나하나를 찢어서, js에서 이용가능) 

- HTML 문서 읽는 법

- DOM 사용하기

① STEP1. id가 h1Tag인 요소를 가지고 오기

모든 html의 최상위 객체는 'document'(=대문)이며, document를 통해 html에 접근이 가능하다
좌) 위의 문법을 통해서 가져온 '대상(결과)'

② STEP2. 내가 가지고 온 요소에서 컨텐츠만 추출

③ STEP3. 내가 가져온 요소에서 컨텐츠를 수정

=> innerText : 단순텍스트 수정

=> innerHtml : HTML요소를 포함해서 수정

 

- 객체반환(중 HTMLCollection 객체반환)

HTMLCollection : 유사배열(실제 배열이 아님)

① STEP1. class가 num인 요소들에 접근

우) 결과 (배열과 유사한 형태로 나오게된다)

② STEP2. 값을 수정

③ STEP3. class가 num인 모든 데이터를 가져오기

(3) DOM 이벤트

- event  : 특정 요소에 원하는 이벤트를 부여할 수 있다 (ex. click, mouseover, mouseout, change ....)

- eventHandler vs eventListener

 ① eventHandler : 하나의 요소당 하나의 이벤트만 부여가능

 ② eventListener : 하나의 요소당 여러개의 이벤트 부여가능

 

- click 이벤트 실습 : 버튼들 클릭시, id가 'txt'인 요소의 컨텐츠 값을 팝업창으로(=popUp()함수) 띄워줄 것

마지막에 실행한 함수만 호출된다(하나의 이벤트만 처리)
모든 함수가 순차적으로 실행된다

+ 함수를 직접 등록 가능

+ e를 사용하는 이유? 매개변수자리에 넣어주는 것으로 다른 글자를 넣어도 무방하다. 임의적인 약속임

 

- 예제 - 좋아요 실습

추가) if else문에서 numberInt >0 일때만을 조건문으로 걸어 하나의 식으로 처리 가능

(4) DOM 속성

+ 안에 있는 값 세팅하기 : input태그에 값을 적고 value값을 가져간 후에, 다시 input태그에 값을 비워주기 위함이다. 

 

5교시, 6교시, 7교시, 8교시 - 파이썬(반복문/딕셔너리)

1. 반복문

3) 예제(영화리뷰 분석하기)

+ pickle모듈 : 파일을 바탕화면 저장 => 드래그하여 주피터의 해당 폴더로 옮기고, upload => 

'rb' :  바이너리 형식으로 파일을 읽겠다 / 각 리스트 : [ 각 영화별 리뷰문장, 0 or 1(0:부정,1:긍정)]
range 방식 / list 방식 : 변수를 하나 선언하여 총합을 담아준다 // 변수는 0으로 선언이후에 +=을 사용하여 추가한다.
리스트를 하나 만들어 0,1로만 이루어지게 만든 후, 각각을 count를 이용하여 변수에 담아준다
r_len을 변수선언하고, 첫번째값부터 들어가도록 처리 / max_len을 선언하고 해당값을 r_len과 비교하여 집어넣는 if

2. 딕셔너리

(1) 딕셔너리란?

- value값 확인하기 / value값 변경하기 / 새로운 데이터 추가 / 데이터 삭제

- value값 확인하는 2가지 방법

 => 대괄호를 통해서 가져오는 경우 : 없는 키 값을 가져올 때 '오류'발생

       get함수를 통해서 가져오는 경우 : 없는 키 값을 가져올 때 'None'라는 값을 출력

 

(2) 예제