[21.02.17] Javascript 첫째 날

javascript

자, 드디어 이 2학년 겨울방학의 마지막에, html과 css 강의를 다 듣고 마침내! Javascript를 시작하게 되었다! 진짜 html이나 css까지는 그래도 호딱호딱 재밌게 들었는데, JS를 시작하려니 막막... 하기도 하고(생활코딩 강좌만 30개) 그냥 딱 깔끔하게 개강하고 나서부터 시작할까? 싶기도 했다. 하지만 또 막상 생각해보니 개강하면 개강하는대로 과제와 밀린 강의에 치여 살 게 뻔하고 방학 때도 꾸준히 하기 어려운 자기 공부가 학기 중이라고는 잘 될까 싶어서 얼른 시작했다! 또 막상 강의 수강 계획을 짜보니 (아주 낙관적으로) 하루에 6~8개 정도 들으면 생활코딩 JS 강의도 개강하기 전에 끝낼 수 있겠더라!
동기 부여 차원에서 나의 우물 안 개구리 시절을 생각해보자면, 약 1년 전 Java나 Javascript라는 게 생소하고 그 둘 차이도 모르겠던(사실 둘이 같은 건데 줄여 말하는 줄 알았던 ㅋㅋ ) 시절에서부터, 한 3개월 전 그 둘 차이는 알겠는데 Java나 Javascript에 대한 기본문법도 모르고, JS를 하기 위해선 html과 css 공부가 선행되어야 하는 것도 몰랐던 시절이 있었다. 그래도 1년, 아니 3개월이라는 시간 안에 그냥 모른다는 이유로 시작도 안해봤다면 정말 하나도 몰랐을 것들을 지금은 앱이나 웹을 구현시키고 이해한다는 것만으로도 너무 감격이다! 이래서 공부가 재밌나 보다! 하물며 가장 기초적인 html과 css만 배웠는데도 이 정도인데 javascript 공부한다면 앞으로 얼마나 더 큰 신세계가 나에게 펼쳐질지 너무 기대된다! 그래서 오늘, 21년 2월 17일! 개강을 5일 앞두고 거침없이 JS 공부를 시작하겠다! 개강 전에 되도록 끝낼 수 있길~

진도: ~CSS 기초까지

1. Javascript는 사용자와 '동적으로 상호작용'하기 위한 프로그래밍 언어!
ex) 야간모드, 주간모드 버튼이 있을 때
input type="button" value="버튼 내용" onclick="alert('hi')"
button이라는 것을 생성하고 그 내용은 "버튼 내용"이며, 클릭했을 땐 ""안에 있는 JS코드를 실행한다!

1-1. HTML과 JS와의 만남 1
:JS가 HTML 위에 있으려면, 웹브라우저에게 HTML 코드로 '이제부터 JS 시작!'을 알려줘야 함!
-> script라는 태그 사용! 이 안에 있는 코드를 모두 JS로 인식!

script 태그 내에 document.write("hello world!"); , document.write(1+1); 넣으면 동적으로 실행됨

1-2. HTML과 JS와의 만남 2 웹 브라우저 위에서 일어나는 일들="event"
-> 웹은 이 이벤트들 중에 기억할만한 몇 가지(대략 10~20개) 정의하고 있음! 대부분 on으로 시작함!

• <input type="button" value="버튼 내용" onclick="alert('hi')">
• <input type="text" value="버튼 내용" onchange="alert('new text')">
• <input type="text" value="버튼 내용" onkeydown="alert('key dwon')">

1-3. HTML과 JS와의 만남 3
- 크롬+F12 -> console -> JS 실행가능 (이 console 창에서 실행하는 JS는 현재 해당 웹페이지를 대상으로 실행됨)

2. Javascript 데이터 타입
1) 숫자(number)
2) 문자

• .length
• .toUppercase()
• .indexOf('o')

+) 변수를 쓸 때 가급적이면 var이라는 키워드 쓸 것!
- var name='sejeong';
document.write() 이라는 메소드로 화면에 써줄 수 있는데, document.write('<li>qqq</li>') 이런 식으로 쓰면 실제 html의 문법으로 써진다!