본 내용은 아래의 강의를 토대로 하여 작성하였습니다.
링크:https://opentutorials.org/course/3085
WEB2 - JavaScript - 생활코딩
수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상
opentutorials.org
1. 강의 내용
JavaScript의 등장
WEB이 처음 등장했을 때는 HTML밖에 없었다. 정보를 편하게 주고받을 수 있게 된 아주 획기적인 사건이었지만, HTML이 가진 한계에 봉착하게 되었다. HTML은 출력되면 그 모습으로 변하지 않는 정적인 언어였고 사람들은 사용자와 상호작용할 수 있는 동적인 언어를 원했다.
JavaScript 적용 예시
 |
 |
이 두 스크린숏은 한 웹 페이지에 JavaScript를 적용한 예시이다. 좌측 상단의 두 버튼 night, day가 있는데 사용자들은 이 버튼을 눌러서 원하는 모드로 웹 서핑을 할 수 있다. 이 수업에서는 위의 동적인 기능을 넣어볼 것이다.
<script>
이전에, CSS를 사용하려면 <style></style> 태그가 필요하다고 했듯이, JavaScript도 이와 동일하게 웹 브라우저에게 HTML 태그로 알려줄 필요가 있다.
<script></script>
사이에 JavaSciprt를 쓰면 된다.
JavaScript vs. HTML
앞서서, HTML은 정적인 언어이고 JavaScript는 동적인 언어라고 언급했다. <body> 사이에 아래와 같은 명령어를 입력했다.
<h1>JavaScript</h1>
<script>
document.write(hello world)
</script>
<h1>html</h1>
hello world
그 결과로 화면에서는 아래와 같이 출력된다.
이렇게 단순한 문자열 hello world를 입력했을 때는 차이가 없어 보인다. 하지만, 아래의 명령어를 입력했을 때,
<h1>JavaScript</h1>
<script>
document.write(1+1)
</script>
<h1>html</h1>
1+1
똑같이 1+1을 입력했는데, JavaScript는 계산을 한 2가 출력되고 html은 그대로 출력된다. 즉, JavaScript는 연산자와 숫자가 있으면 알아서 계산을 하는 동적인 언어이다.
이벤트
위와 같은 버튼을 페이지에 만들기 위해서는 아래와 같이 입력하면 된다.
<input type="button" value="hi" onclick="alert('hi')">
type속성에는 button을 value에는 버튼에 나올 문자를 넣어주면 된다. 여기서, onclik은 사용자가 이 버튼을 클릭했을 때 경고창 alert이 뜨며 hi라는 문자를 출력한다는 의미이다.
이렇게, 웹 브라우저에서 어떤 일이 일어나는 것을 이벤트라고 한다. 그리고 이런 이벤트가 일어났을 때, JavaScript를 실행되게 하는 것이 동적인 웹 페이지를 만드는 방법이다. 이벤트는 여러 가지가 있고 클릭, 텍스트 입력, 변경 등등이 있다. 개발자들은 웹 브라우저에서 일어나는 이벤트 정의들을 사용해서 상호작용하는 웹 페이지를 만들 수 있다.
이 이벤트 정의(속성)를 알고 싶을 때는 그때그때 구글링을 하면 된다. 아래는 onkeydown 속성을 사용했다.
on속성
on으로 시작하는 속성들은 대표적으로 onclick, onchange, onkeydown이 있다. 이것들의 특징은 두 가지다.
-
속성 값에는 JavaScript가 온다.
-
웹 브라우저가 그 속성 값을 기억하고 있다가 사용자가 상호작용 했을 때 그 코드를 문법에 따라 동작한다.
콘솔
웹 브라우저의 소스보기 기능으로 콘솔을 사용할 수 있다. 마치 계산기처럼 즉석으로 그 코드가 그 페이지에서 어떻게 동작할 것인지 알 수 있다.
JavaScript도 콘솔을 사용해서 미리미리 동작을 볼 수 있다. 콘솔에서 실행시키는 JavaScript는 해당 페이지 안에 삽입되어 있는 것처럼 실행이 된다. 그리고, 이미 만들어진 웹 페이지에서 명령어를 콘솔에 입력하여 나에게 필요한 정보들을 추출할 수 있다.
Datatype
JavaScript의 Datatype(자료형)은 6가지이다. 대표적으로 Number(숫자), Stirng(문자열)이 있다.
숫자는 연산자와 만나서 동작할 수 있다. 프로그래밍에서 +,-,*,/는 이항 연산자, 산술 연산자이다.
문자열은 코드에 삽입할 때 '(따옴표)나 "(큰따옴표)로 감싸줘야 한다. 숫자 1이라도 "1"이라고 표현하면 문자열 취급이 된다.
"1" 문자열
"1" + "1" = 11
1 숫자
1+1=2
위처럼, 문자열이냐 숫자이냐에 따라서 결과가 전혀 달라진다 그러므로 코딩을 하면서 데이터 타입을 정확히 알고 구분하는 것은 매우 중요하다.
변수와 대입 연산자
x=1
에서 x는 Variable(변수)이고 =은 대입 연산자, 1은 값이다.
1=2
위 예시에서, 1은 언제나 1이기 때문에 대입이 안된다. 즉 변수가 아니다 이러한 것을 Constant(상수)라고 한다.
변수 사용 예시
복잡한 문자열의 정해진 자리에 내가 원하는 단어를 넣고 싶다고 하자. 그럴 때는 아래처럼 명령어를 입력하면 된다.
var name = 'greedysiru' ;
alert("savjl+name+kanldnslkfasdjkf "+name+" dsfjadskjfldfdssdsfasddsdsvsasajlkxclkvnlxvnl3jsdakfjadsjlks;j sla "+name+" kfdssdavdsfsadfdsfdlanlkavnlasfjsdkj"+name+" fkdjsalfjadsjlnvnsdlafnsldafnls "+name+" ")
여기서, var는 variable의 약자이고 변수 앞에 붙여준다. 이 명령어에서 name이라는 변수에는 대입 연산자 =로 인해서 greedysiru라는 문자열이 입력된 상태이다. 그리고 복잡한 문자열 사이에 "+name+"을 원하는 곳에 넣어주면,
위처럼 alert으로 인해 경고창이 뜨고 정상적으로 내가 원하는 단어가 원하는 위치에 들어가게 된 것을 알 수 있다. 변수에 내가 원하는 단어만 넣으면 명령어가 알아서 바꿔서 넣어주므로 생산성이 높아진다.
웹 브라우저 제어
<body></body>는 웹 페이지 전체를 감싸는 태그이다. 화면을 검게, 문자를 하얗게 바꾸고 싶으면,
<body style=“background-color: black; color:white”>
를 입력하면 된다. 하지만 우리가 원하는 것은 버튼을 누르면 시시각각 변하는 페이지이다. 어떻게 버튼을 클릭했을 때 동작이 되도록 할 수 있을까? 바로, JavaScript를 사용하면 된다.
제어할 태그 선택하기
화면 전체를 바꿔야 하므로 선택자가 body라는 건 알 수 있다. 하지만, 이것을 자바스크립트로 표현하려면 CSS 문법과 다른 JavaScript의 문법을 사용해야 한다. onclick 속성에 아래와 같이 입력한다.
<input type="button" value="night" onclick=document.querySelector('body') ;>
그리고 이 선택자의 속성을 변경한다는 것을 입력하면 된다. CSS에서의 속성 넣기와 전혀 다르므로 주의한다. 대문자가 있으므로 주의한다.
<input type="button" value="night" onclick=document.querySelector('body').style.backgroundColor='black';> ;>
이제, 웹 페이지에서 night 버튼을 누르면 화면에 검게 변하게 된다. 추가적으로 글자도 하얗게 변하는 기능과 night버튼의 정반대 기능인 day 버튼도 명령어를 입력해준다. 최종 완성 명령어는 아래와 같다.
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">
2. 느낀 점
솔직히, 전까지의 강의는 할만하다고 생각했지만, 슬슬 여러 가지 언어가 얽히게 되니까 약간은 복잡한 느낌이 든다. 그리고 여러가지 이론적인 내용보다는 실습 위주의 수업이어서 더 이론적으로 공부하고 싶다는 생각도 들었다. 하지만, 아직 내 수준에는 이르겠지... 그리고! 마지막에 버튼 기능을 추가하는 실습을 했을 때, 글자의 색상은 변하지만 백그라운드의 색상이 변하지 않아서 당황했었다. 문제를 해결하기 위해 검색도 해보고 여러 가지로 애썼는데 원인은 backgruon라고 잘 못썼던 것이었다...... 토씨 하나도 오타가 나지 않도록 주의하자...
3. 명령어
document.wirte('문자')
문자 출력
<input type="button" value="hi">
hi 버튼 출력
<input type="button" value="hi" onclick="alret('hi')">
누르면 hi경고창이 뜨는 hi버튼 출력
<input type="text" onchange="alret('changed')">
변화가 생기면 changed경고창이 뜨는 텍스트 상자 출력
'문자열'.length
문자열의 길이 출력
str.toUpperCase()
대문자 만들기
str.indexOf('o')
해당 문자열에 o가 몇번 째에 있는지 출력
'programming study > JavaScript' 카테고리의 다른 글
| [생활코딩]WEB2-JavaScript (6)(2020.12.22) (0) | 2020.12.23 |
|---|---|
| [생활코딩]WEB2-JavaScript (5)(2020.12.9) (0) | 2020.12.10 |
| [생활코딩]WEB2-JavaScirpt (4) (2020.12.8) (0) | 2020.12.09 |
| [생활코딩]WEB2-JavaScript (3) (2020.12.8) (0) | 2020.12.09 |
| [생활코딩]WEB2-JavaScript (2) (2020.12.8) (0) | 2020.12.08 |
