[Front] JavaScript 기초

권택현 2020. 6. 14. 13:49

2020. 6. 14. 13:49

[Front] JavaScript

JavaScript

javascript는 html과 css로 이루어진 정적 페이지를 동적 처리를 할 수 있게 하는 언어이다. html5 이후 부터 부쩍 사용량이 증가한 객체지향의 스크립트 언어이다. 따라서 html문서에서 작성하는것이 기본 원칙이다.

이런식으로 html로 이루어진 문서에 동적 처리를 해 줄 수 있게 하는 언어다.

* 참고로 javascript는 대소문자를 구분한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>javascript</title>
</head>
<body>
  <h2>javascript</h2>
  <p id="i">hello this is javascript</p>
  <input type="button" onclick='document.getElementById("i").innerHTML = "by input"' value="이곳을 클릭하시오">
  <button onclick='document.getElementById("i").innerHTML="by button"'>이곳을 클릭하시오</button>
  <input type="reset">
  <input type="submit" onclick="alert('뭐야 되나?')">
  </input>
  <br>
  <script type="text/javascript">
    document.write("자바스크립트")
  </script>
 </body>
</html>

(*) 여기서 input이랑 button으로 똑같은 기능을 하는 두 개를 작성했는데 이유는 문득 input으로 만든 버튼과 button으로 만드는것이 다를까 라는 근본적인 궁금증 때문이다. input으로 만드는것으로 연습해 보자

script태그

script태그 내에 자바스크립트 코드를 작성하면 된다.

<!DOCTYPE html>
<html>
  <head>
    <title>javascript</title>
    <meta charset="utf-8">
  </head>
<body>

<h2>JavaScript in Body</h2>
  
<p id="demo"></p>
  
<script type="text/javascript">
  document.write("hello");
  document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

그럼 결과를 볼 수 있다. 다만 script를 가장 마지막에 선언해야 한다. 이유는 모르겠다. p태그를 script태그 아래에 선언 했더니 아무것도 나오지 않는다. 그 이유는 좀 더 찾아서 새로 포스팅 해보겠다.

function(함수)

js는 객체지향의 함수이므로 이벤트 실행시에 발생하는 함수를 작성할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <title>javascript</title>
    <meta charset="utf-8">
  </head>
<body>

<h2>JavaScript in Body</h2>
  
<p id="demo">함수 실행 전</p>
<input type="button" value="함수 실행" onclick="func()"><br><br>
<input type="button" value="다른 함수" onclick="fun()"><br><br>
<script>
  document.write("default write");
  function func(){
    document.getElementById("demo").innerHTML = "함수 실행 됨";
  }
  function fun() {
    document.write("다른 함수");
  }
</script>
  
</body>
</html>

이런 식으로 script태그 내에 선언하면 된다. 이벤트 부분에 함수를 두어 해당 이벤트 발생 시에 해당 함수가 실행된다. 여기서 document.write()를 사용해서 하면 다음에 자동으로 추가될줄 알았는데 새로운 문서가 생기고 거기에 write되는것을 확인했다. 앞으로 함수에 document.write()는 잘 안쓸것 같다.

혹은 .js 로 끝나는 확장자를 가진 파일을 만들어 연결하여 사용할 수도 있다. 마치 css적용하는것 처럼 말이다. 하지만 css와 다른점이 있다면 css는 link로 연결하고 style태그를 통해서 다른 css효과를 줄 수 있지만 script는 그렇지 않다. 두 개의 함수를 각각 하나는 script태그 내부에 하나는 js파일에 두고 실행하면 script태그 내에 있는 함수는 작동되지 않음을 볼 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <title>javascript</title>
    <meta charset="utf-8">
  </head>
<body>

<h2>JavaScript in Body</h2>
  
<p id="demo">함수 실행 전</p>
<input type="button" value="함수 실행" onclick="func()"><br><br>
<input type="button" value="다른 함수" onclick="fun()"><br><br>
<script src="my.js">
</script>
  
</body>
</html>

document.write("default write");
  function func(){
    document.getElementById("demo").innerHTML = "함수 실행 됨";
  }
function fun() {
    document.write("다른 함수");
}

이렇게 작성하면 전과 동일한 효과를 가지는 코드가 완성이 된다. 이렇게 외부 script파일을 이용하면 코드를 보다 효과적으로 관리할 수 있다.

출력

java스크립트를 통해서 출력하는 방법에 대해서 살펴보자

innerHTML : HTML요소로 작성해서 출력
document.write() : HTML출력에 쓰기
window.alert() : 경고 상자에 쓰기
console.log() : 브라우저 콘솔에 쓰기

<!DOCTYPE html>
<html>
  <head>
    <title>javascript</title>
    <meta charset="utf-8">
  </head>
<body>

<h2>JavaScript in Body</h2>
  
<p id="demo">함수 실행 전</p>
<input type="button" value="경고" onclick="window.alert('경고한당')"><br><br>
<script>
    document.getElementById("demo").innerHTML="함수 실행 됨";
    console.log(4+1);
</script>
  
</body>
</html>

이런식으로 작성하면 될 것 같다.

'FRONT > JavaScript' 카테고리의 다른 글

[Front] Java this와 JavaScript this (0)	2020.06.25
[Front] javascript의 변수와 자료형 (0)	2020.06.14

흔적