<생활코딩 - WEB - WEB2 - JavaScript>
1. 수업소개
1 사람들은 웹페이지도 동적으로 사용자와 상호작용할 수 있기를 원했다.
2 그래서 HTML을 통해 만들어진 웹페이지에 자바스크립트를 이용해
사용자와 상호작용할 수 있도록 하는 기능을 추가했다.
3 즉, 자바스크립트는 웹사이트가 프로그램처럼 사용자와 상호작용하면서도,
검색엔진을 통해 검색될 수 있도록 하는 마법 같은 특성을 가진 언어이다. 2. 수업의 목적
1 이 수업은 하나의 기능을 구현하는 과정에서, 그 구현에 필요한 문법을 배워가는 수업이다.
(즉, 실습이 중심이 되어 문법 익히기가 부가적으로 따라오는 수업이다.)
2 "night", "day" 버튼 소개
1) 웹페이지 상에 있는 이 버튼을 누르면, 자동으로 body 값이 바뀐다.
2) body 안에는 <input type=“button” value=“night” onclick=“(style 값 코드코드)”> 라는 태그가 2개 있다.
3) 웹페이지에 있는 “night” 혹은 “day” 버튼을 누르면,
body에 해당 코드가 불러와져서 body 전체에 해당 스타일 값이 적용된다.
3 교훈
1) 자바스크립트는 사용자와 상호작용을 하는 언어이다.
2) 웹브라우저 및 body 태그는 언제나 같은 정보를 갖고 있다.
3) 그러나, 자바스크립트를 통해 body 태그의 디자인 등을 변경해줄 수 있다.
4) 즉, JavaScript는 HTML을 제어하는 언어이다. 3. HTML과 JS의 만남: Script 태그
1 <script>: 태그 안쪽에 자바스크립트가 오도록 약속되어있는 태그. 웹브라우저는 이 태그 내의 코드를 자바스크립트로 해석한다.
2 웹페이지에 글씨를 출력하고 싶으면, <script> 태그 안에 document.write ( ); 라고 써준다.
1) 괄호 안에 작은따옴표를 써주면, 언어가 그대로 나타나고
2) 따옴표 없이 예를 들어 숫자를 쓰면, 계산기처럼 알아서 계산이 되어 화면에 나타난다. 4. HTML과 JS의 만남: 이벤트
1 버튼을 입력하고 싶을 때 <input type=“button” value=“hi”>을 입력한다.
- value: 그 버튼의 이름을 지정하는 코드이다.
2 “이벤트” 코드
1) 웹브라우저 위에서 버튼을 클릭했을 때 화면이 변하게끔 하는 코드이다.
2) onclick=“alert(‘hi’)”: 버튼을 클릭하면 “hi”라는 알람이 뜬다.
3) type=“text” onchange=“alert(‘changed’)”: 텍스트를 입력할 수 있는 창이 뜨고,
입력하면 “changed”라는 알람이 뜬다.
4) (속성을 더 알고 싶을 때는 “javscript keydown event attribute”라고 검색한다.)
5) type=“text” onkeydown=“alert(‘key down!’)”
: 웹브라우저에서 텍스트 입력창에 어떤 키를 입력하면, “key down!”이라는 알람이 뜬다. - 여기까지 공부한 후, -
와 자바스크립트!!!!!!!
기대를 많이 하고 시작했는데도 불구하고
너무너무 너무 재밌다
각종 이벤트에 따라 내 웹페이지가 네이버 메인화면처럼 바뀌는 것도 신기하고,
나는 date라는 이벤트만 입력했을 뿐인데, 알아서 달력을 가져와 구현해주는 것도 신기하다.
꼭 내 말을 잘 이해하면서 일도 잘하는 비서 여러 명을 내가 창조하고 있는 기분이다.
5. HTML과 JS의 만남 (콘솔)
1 우클릭-검사-콘솔
1) 글자수 확인: 내용 앞뒤로 작은따옴표, .length 입력 > 하단에 글자수 나옴
2) 글자수 알람 팝업: 내용 앞에 [alert(‘], 뒤에 [‘.length] 입력 > 알람에서 글자수 나옴
2 어떤 웹페이지에서 이던 콘솔을 통해 명령을 하고, 결과값을 얻을 수 있다.
3 나의 필요에 따라 자바스크립트를 이용해서 실생활적이고 현실적인 문제를 해결할 수 있다.
4 그러니, 거창한 계획을 세우기보다는 현실의 문제를 가볍게 해결하는 방향으로
자바스크립트를 이용해서 재미를 잘 붙여보자.6. 데이터타입 - 문자열과 숫자
1 컴퓨터는 데이터를 잘 처리하는 것을 아주 중요하게 여긴다.
그래서 종류별로 데이터를 구분해서 파악한다.
2 자바스크립트에 존재하는 데이터 타입 알아보기.
1) 검색 “javascript data type”
2) Mozilla 재단에서 운영하는 문서 확인
3) 자바스크립트에는 6개의 데이터 타입이 있음
: “Boolean, Null, Undefined, Number, String,
Symbol” and “Object”(객체)
3 콘솔에서 숫자열(number) 계산이 가능하다.
1) 사칙연산 + - * /
4 콘솔에서 문자열(string) 계산이 가능하다.
1) 문자열 앞뒤로 “ ”, ‘ ’ 를 붙여줌
2) “ ”.length: 따옴표 내 글자수 알려줌
3) (더 많은 문자열 계산 문법을 알고 싶을 땐
“javascript string”을 검색해서 모질라 웹페이지를 확인하자)
4) “ ”.toUpperCase(): 문자를 대문자로 나타나게 함
5) “ ”.indexOf(‘ ‘): 작은따옴표 안의 글씨가 큰따옴표 글자 중 몇 번째에 있는지 알려줌
(* 순서는 0부터 시작함. 예를 들어 Hello에서 o의 순서는 4번째임)
6) “ 문자문자 “.trim(): 공백 없애줌
5 숫자열과 문자열은 당연히 구분되어 계산된다.
1) 예를 들어, 1+1의 값은 2로 나타나지만, “1”+”1”의 값은 11로 나타남.
6 이처럼 지금 경험적으로 알게 된 내용은 나중에 이론을 통해 압축해서 정리할 때가 있을 것이다.
💡 Software Engineer - F.E