1시간 전•

11월 9일 학습 일지(Xmind)

11월 9일 (Xmind)

오늘 공부에 투자한 순수한 시간: 6시간

학습한 개념 : JS (자바스크립트의 역사, 이벤트)

1995년 - 당시에 가장 인기 있었던 웹 브라우저 회사인 '넷스케이프(Netscape)'의 브렌던 아이크가 약 10일만에 첫 버전을 만들었다. 맨 처음 이름은 Mocha(모카), 그 다음에는 라이브스크립트(LiveScript)로 바뀌었고, 당시 유행하던 Java에 편승하기 위해서 Java Script로 이름을 바꾸게 되었다. Java와 JavaScript는 전혀 다른 언어이다.

1997년 - 이때 마이크로소프트가 비슷한 언어를 따로 만들어 내면서 ECMA(유럽 정보통신 표준화 기구)에서 공통으로 사용할 수 있는 규칙을 만들게 되었으며 이 표준의 이름이 ECMAScript(ES)이다. JavaScript는 이를 표준으로 따르는 결과물이다.

2005~2008년 - 기존에는 서버에는 통신을 해야 화면 전체를 바꿀 수 있었지만 Ajax가 나오면서 새로고침을 하지 않고도 화면이 변할 수 있게 되면서 구글지도 같은 서비스가 활발해졌으며, 크롬의 V8 엔진으로 JavaScript가 더욱 빠르게 작동 할 수 있도록 변했다. 기존에는 느렸던 문제점을 해결하게 되었다.

2009년 - Node.js가 등장하면서 브라우저 밖에서도 JavaScript를 사용할 수 있게 되면서 프론트엔드와 백엔드를 한 언어로 묶을 수 있게 되었다. 이후에는 라이브러리(자주 쓰는 기능을 미리 만들어 둔 코드 모음)인 React, Vue가 나오게 되었다.

2015년 - ES6에서 현대적인 문법(let, const, 화살표 함수, 클래스 등)이 많이 추가 되었다. 그리고 매년 새 버전이 지속적으로 나오고 있다.

ㄴJava와 JavaScript랑 뭐가 달라?

목적성 차이

JavaScript - 브라우저 화면을 동적으로 움직이기 위해서 만든 언어이다. 버튼 클릭, 메뉴 열기, 애니메이션 등에 사용됨

Java - 대규모 시스템에 많이 쓰임. (모바일 앱, 기업용 서버 등)

실행 방식 차이

JavaScript - 인터프리터 형식(코드를 위에서 한 줄씩 읽으면서 바로바로 실행하는 언어)이며 브라우저에서 바로바로 사용이 됨

Java - 사람이 쓴 파일을 컴퓨터가 읽는 형태로 사용됨. 그래서 자바를 바로 사용할 수 있도록 JVM(자바 가상 머신)을 사용함

타입을 다루는 방식 차이

JavaScript - 코드를 짰을때 종류를 스스로가 판단함. let age = 20; 을 예시로 들면 JavaScritp는 20을 나이로 판단을 할 수 있음. 단점으로는 스스로 생각하여 오류가 생기기도함.

Java - 코드를 코드대로 읽어서 코드를 짤때 조금 더 신중하게 짜야됨. int age = 20; 으로 예시를 들면 Java는 스스로 판단 할 수 없어. 그저 age = 20으로만 보고 그 외 조금이라도 다른 답이 나오면 오류로 판단함.

입문 과정 차이

JavaScript - 브라우저만 있으면 쉽게 입문 할 수 있음

Java - 개발 도구를 설치해야 하며 준비 과정과 문법이 엄격하여 배우기에 어려움이 있음

ㄴ타입(데이터 종류) 다루는 방식이 달라요 이게 이해가 좀 안돼

Java 같은 경우에는 int age = 20; 으로 작성하면

int - 소수점 없는 정수만 담은 상자

age - 상자 이름

= - 오른쪽 값을 왼쪽에 넣음

; - 문장이 끝났다는 뜻

합치면 int 즉 소수점 없는 정수만 담은 상자의 이름은 age이고, 20이라는 값을 왼쪽 상자에 넣고 끝 인데 Java는 여기서 정적으로 마무리를 지었기 때문에 20이라는 숫자가 아닌 '이십' 혹은 '스물' 이라는 말을 20이라고 해석하지 않고 그저 오류로 판단한다.

JavaScript는 let age = 20; 으로 작성하면

let - 상자를 만들겠다는 뜻이고 종류는 정하지 않는다.

그렇기 때문에 추후에 20이 아닌 스물로 작성해도 에러가 나지 않는다.

하지만 위에서 설명했듯 JavaScript는 오류가 나지 않는 대신 문제가 생길 수 있다. 그러나 Java는 오류가 생기는 대신 확실하게 완성 할 수 있다.

<이벤트>

1. 이 이름이 붙은 이유

이벤트(event)는 사건이라는 뜻으로 사용자가 어떤한 행동(화면 클릭, 마우스를 올리거나, 키보드를 누를경우)에 발동하게 된다. JavaScript는 이 이벤트가 일어났을때 코드가 발동할 수 있도록 만들어 놓은 것이다.

2. 이벤트가 무엇인가?

이벤트는 무슨 일이 있으면 원하는 코드가 작동하도록 만들어 놓은 명령어이다. 이렇게 반응하는 코드를 핸들러 (handler)라고 한다.

3. 코드로 이벤트 보기

button - 버튼을 생성하는 명령어

onclick - on (~했을 때), click(클릭)이라서 이를 합치면 클릭을 했을때에 이벤트를 발동 시키도록 만들어둔 명령어

= - 오른쪽 값을 눌렀을때(이벤트) 왼쪽의 명령어를 실행시켜라

"~" - 큰따옴표 안에 내용을 실행 시켜라

alert - 팝업창을 띄움

('눌렀어요!') - 팝업창을 띄웠을때 나올 멘트

클릭 - 버튼 이름

</button> - 버튼(이벤트) 관련 작업 끝

이를 종합해보면

으로 풀어서 설명이 가능하다.

ㄴ클릭이나 팝업창을 띄우는 이벤트 말고 다르게 사용할 수 있는 이벤트 태그도 몇개 더 알려줄래?

1. 마우스를 올렸을때

<p onmouseover="this.style.color='red'">마우스를 올려보세요</p>

<p - 문단 시작 내용

onmouseover - on (~ 했을때) + mouse (마우스) + over (위로 올라옴) = 마우스가 위로 올라왔을때 발동하는 이벤트

"this.style.color='red'" - (온점 '.'은 ~의 라는 뜻) "this (나) + . (나의) + style(스타일) + . (스타일의) = 'red'">빨간색 = 나의 스타일을 빨간색으로 (<>의 문단이 끝났으니 하나의 문단은 끝) (내용중에 큰따옴표가 있기 때문에 코드를 실행할 내용을 가르킴)

마우스를 올려보세요 - 문단에 '마우스를 올려보세요'라는 문장을 추가

</p> - 문단 최종 마무리

이를 종합하면

<p onmouseover="this.style.color='red'">마우스를 올려보세요</p> - 문단을 시작하는데 [마우스를 위에 올리면 오른쪽 값을 실행 시켜라(이벤트)] [(실행할 코드) 나의 스타일 색상을 빨간색으로 (꺾괄호가 끝났으니 첫 실행할 문단 끝)] [(텍스트 생성) 마우스를 올려보세요] (모든 문단 최종 마무리)

2. 글자를 입력할 때마다

첫째줄

input - 입력이라는 뜻으로 글자를 적을 수 있는 입력칸을 만들때 사용됨

oninput - on (~했을때) + input (입력) = 글자를 입력할 때마다 발동하는 이벤트

document - 웹페이지 문서 전체를 가리키는 말

getElementByld - get (가져와라) + Element (요소, 화면의 태그 하나) + By (~로) + Id (아이디, 태그의 이름표) = 아이디로 태그를 가져와라

('out') - 괄호 안에 찾을 아이디를 넣음. 아이디가 out인 태그를 찾으라는 것

.innerText - inner (안쪽) + Text (글자) = 그 태그의 안쪽 글자

this.value - this (나) + value (값) = 나의 값. 즉 입력칸에 적힌 나 자신

<input oninput="document.getElementById('out').innerText = this.value"> - 문단을 열고 입력을 할 수 있는 입력창을 만듦. 그리고 그 입력창에 입력이 일어날때 오른쪽 이벤트를 이르켜라 = 웹페이지 전체의 아이디를 태그로 가져와라 'out'이라는. 나자신에게

다시 풀어서 설명하면 문단을 열고 입력을 할 수 있는 입력창을 만들고 그 안에 out 으로 된 태그를 가져오게 되면 그 태그 안에 글씨를 나의 값으로 만들어라. 정도로 풀 수 있다.

둘째줄

id="out" - 위에서 설명한 id인 out

두번째 줄을 풀어보면 위에서 가져오라고 이야기 한 id인 out이 두번째 줄로 설정하고 태그를 나의 태그 안에 있는 글씨를 가져가라. 라고 생각할 수 있고

첫째줄과 둘째줄을 합치게 되면 '입력칸에 글씨를 입력할때 마다 둘째줄인 id가 out인 위치에 입력되는 글씨(this.value)를 적용시켜라.

3. 선택이 바뀌었을 때

</select>

첫째줄

select - 선택하다 라는 뜻. 눌러서 펼쳐지는 목록을 만드는 태그

onchange - on (~했을때) + change (바뀜) = 목록에서 선택한 것이 바뀌었을때 발동하는 이벤트

document - 웹페이지의 문서 전체

.body - 온점 (~의) + body (몸통) 즉 '몸통의'라는 뜻으로 몸통은 보여지는 모든 부분이기 때문에 웹에 보여지는 화면을 뜻함

.style - 스타일. 꾸미기 정보

.background - 그 중 배경

[.body.style.background - 몸통의 스타일중에 뒷배경을 뜻함]

this.value - this(나 자신) + . (~의) + value (값) = 목록에서 고른 값

<select onchange="document.body.style.background=this.value"> - 문단을 열고 목록을 선택할 수 있는 창을 만들고 목록이 바뀌면 이벤트를 이르켜라 = 웹전체의 몸통의 스타일중에 뒷배경을 나의 값으로 = 목록창에서 목록이 바뀌면 그때 웹전체의 스타일중 뒷배경을 나의 값에 맞게 바꿔라. 정도로 풀 수 있겠다.

둘째줄, 셋째 줄

option - 선택지. 목록 안에 항목을 넣을때 사용하는 명령어

value="pink" / value="skyblue" - 위에서 설명했던 '나의 값'을 pink / skyblue로 설정하는데 이는 첫째줄에서 설명하는 '나의 값으로 변경해라'에 사용되며 이미 위에서 나의 값이 설정이 되면 뒷배경의 스타일을 나의 값으로 변경하라 하였으니 pink / skyblue로 변경할 수 있도록 돕는 명령어

분홍 - 항목안에 들어갈 단어

하늘 - 항목안에 들어갈 단어

</select> - 목록을 고를 수 있는 목록창을 만들고 목록이 바뀌면 오른쪽에 있는 이벤트를 이르켜라 = 웹페이지의 전체의 스타일을 뒷배경에 적용해서 나의 값을 선택하게 되면 / 선택값 이름은 핑크나 하늘이며 선택하면 각 pink나 skyblue로 전체의 뒷배경 스타일이 변경됨.

AI 대화 내역 링크: https://claude.ai/share/e3410579-baa9-4aee-b4a1-38b4d130ad9b

오늘 잘한 점: 자바의 역사에 대해서 배울때는 최대한 연결 지어서 어떤 흐름으로 진행되었는지를 흐름에 맞춰서 이해하였고, 이벤트에 관련해서는 기본적으로 알려주는 이벤트보다도 더 많은 내용을 배우기 위해서 노력했고, 태그 부분은 이해되지 않는 부분 없도록 모두 수월하게 학습하였다. 어려운 부분이 없지는 않았으나 충분히 이해 하였고, 이해가 되지 않는 부분은 최대한 학습하기 위해서 AI를 적극 확용해서 끝까지 알아내고 넘어갔다.

오늘 부족했던 점: 잘 모르겠다.

오늘 총평: 전체적으로 이해하기 위해서 노력했고 노력한 결과 전체적으로 한두군때 빼고는 어렵지 않게 학습하였고, 모르는 부분은 최대한 노력해서 확실하게 이해하고 넘어갔다. 태그와 이벤트 부분을 공부하니까 흐름은 이해가 되고 잘 따라갈 수 있을거 같은데 이 많은 용어를 외우고 알맞게 쓸 수 있을지는 아직 확신이 들지 않는다.

여기에 파일을 드롭하세요