웹에 막 관심이 생긴 사람들 특히 프론트 개발자들을 보면 막 

Java script에 대해서 들어보고 관심을 가지게 될것입니다. 

오늘은 정확히 Java script이 무엇이고 어디에서 사용하는지에 대해서 알아볼려고 합니다. 


1. 자바스크립트란?

객체 기반의 스크립트 프로그래밍 언어이다. 

이 언어는 웹 브라우저 내에서 주로 사용하며, 

다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다....-위키 백과



웹을 개발을 하면서 빼먹을 수 없는 java script는 "다른 응용프로그램의 내장에도 접근할수 있다..."

이 부분은 자바스크립트의 큰 장점입니다. 




https://redmonk.com/data/ 에서 보게 되면 java script가 많은 언어들중 단연 1위를 차지할 만큼이라고 할 수가 있습니다. 


저작자표시 비영리 동일조건

'Java Script' 카테고리의 다른 글

[Java Script] 2_HTML과 JS 이벤트  (0) 2019.01.16
[Java Script] html과 js의 만남_1  (0) 2019.01.15
[Javascript] 자바 스크립트란?  (0) 2019.01.09

이벤트 : 사용자와 js의 핵심적인 역할을 한다. 



1. 이벤트 설명

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" name="" value="">
  </body>
</html>
 
cs

1. 버튼 만들기
----------------------------------------------





input type에 button을 넣으면 button이 생긴다.










-----------------------------------------------------------------


2. 버튼에 이름 넣기

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" name="" value="버튼">
  </body>
</html>
 
cs


-------------------------------------------------------------------

3. 경고창을 뜨게 하기

Onclick 특징

1) Onclick의 속성 값은 Js가 와야한다.

2) Onclick의 속성이 위치하는 태크의 사용자가 클릭했을때 기억했던 JS를 웹 브라우저가 동작을 한다.


1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button"  value="버튼" onclick="alert('hi')">
  </body>
</html>
 
cs


----------------------------------------------------------------------------------------


이벤트란 ?

사용자가 선택했을때에 따라서 Web에서 이벤트에 내용에 따라서 반응을 하는 것을 의마한다.

Web에서는 이벤트의 내용이 Js로 이루어져있겠죠? :)



2. oncahnge 이벤트


1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button"  value="버튼" onclick="alert('hi')">
    <input type="text" onchange="alert('changed')">
  </body>
</html>
 
cs





1) intput type을 text라고 해서 text창이 나온다.















2) text창에 가나다라를 입력을 하고








3)text입력후 입력창에서 마우스 커서를 때면

(땔때 onchange라는 이벤트 발생)








4) 다시 text필드에 가나다라마바사라고 입력을 하고

마우스 커서를 때면 이벤트는 발생하지는 않는다.


text필드에 아무것도 없을때

입력하고 난후 처음에만 

onchange라는 이벤트가 실행을 한다.







3. onkeydown

text필드창에서 key를 누르면 경고창이 발생한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button"  value="버튼" onclick="alert('hi')">
    <input type="text" onchange="alert('changed')">
    <input type="text" onkeydown="alert('key down')">
  </body>
</html>
 
cs








key point는 

on~ 이라고 시작한건 이벤트라고 부르고

이벤트는 어떤 행위를 했을때

뒤에는 JS를 넣어서 사용자와의 상호 작용을 동적으로 도와준다. 









저작자표시 비영리 동일조건

'Java Script' 카테고리의 다른 글

[ Java Script] Java Script에 대하여  (0) 2019.01.26
[Java Script] html과 js의 만남_1  (0) 2019.01.15
[Javascript] 자바 스크립트란?  (0) 2019.01.09

java script는 html를 동적으로 움직이는 프로그램을 의미를 합니다. 



1. html과 javascript의 차이점

위에 말한거 와 같이 동적으로 움직인다? 라는 말에 대해서 간단하게 설명을 할려고 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
 
    <h1>java script</h1>
    <script>
      document.write('hello world');
    </script>
 
    <h1>html</h1>
    hello world
 
  </body>
</html>
 
cs

위와 같은 소스 코드를 돌리면 결과는?






위와 같이 표현이 되는데 

그러면 java script와 html은 차이점이 없는 것인가?

동적이라는 표현은 도대체 무엇인가 말인가?




















1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
 
    <h1>java script</h1>
    <script>
      document.write(1+1);
    </script>
 
    <h1>html</h1>
    1+1
 
  </body>
</html>
 
cs
여기서 위의 소스코드와 다른 점은 1+1 로 바뀌었을때를 의미한다.




javascript: 1+1은 2로 만드는 동적이고 계산기와 같다

html: 평생 적혀진대로 된다고 한다.


우선 여기서 point는 


1) java script의 문법은 " document.write(1+1); " 위와 같이 사용 하는 법

2) <script>를 사용을 하는법




저작자표시 비영리 동일조건

'Java Script' 카테고리의 다른 글

[ Java Script] Java Script에 대하여  (0) 2019.01.26
[Java Script] 2_HTML과 JS 이벤트  (0) 2019.01.16
[Javascript] 자바 스크립트란?  (0) 2019.01.09

1. javascript 란?

Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다.

경고창을 띄우고, 탭인터페이스를 만들고, Drag & Drop 기능의 웹에플리케이션을 만들수 있습니다. <생활코딩>



2. javascript 사용 tool

1) sublinetext - 유료 이지만 사도 될만큼 유용한 tool 입니다.
2) atom - 무료인 장점이 있습니다.

※ 개발을 계속 하실거면 sublinetext를 추천 하긴 합니다.  :)


3. 설치 방법

1) google 설치
2) https://atom.io/ 으로 접속후 설치


4. javascript 예시


1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            alert('Hello world');
        </script>
    </body>
</html>
cs

이러한 동적인 부분을 다루게 됩니다. 

javascript는 정확히 나중에 node js때 사용되기 때문에 개발을 하기 위해서 javascript에서 부터 차근차근 배우시기 바랍니다. 

저작자표시 비영리 동일조건

'Java Script' 카테고리의 다른 글

[ Java Script] Java Script에 대하여  (0) 2019.01.26
[Java Script] 2_HTML과 JS 이벤트  (0) 2019.01.16
[Java Script] html과 js의 만남_1  (0) 2019.01.15

+ Recent posts

티스토리툴바