되자!백엔드개발자

[Javascript] 기본 본문

개발공부/HTML|CSS|JavaScript

[Javascript] 기본

HyunJng 2022. 10. 26. 21:24

Javascript정의

Web programming을 할 떄 가장 많이 사용하는 언어로 HTML, CSS를 동적으로 변화시키기 위해 사용한다.

이름과 달리 Java와 아무연관이 없으며 script(글씨)가 붙은 이유는 java처럼 별도로 compile하는 것이 아니라 html파일에서 browser이 즉시 기계어로 변환하여 실행하기 때문이다.

TMI. 공식명칭은 ECMascript이다.

 

Javascript원리

html에서 tag를 이용하여 글을 썼다.

태그를 이용하면 내부적으로는 하나의 객체가 메모리에 생성되게 된다.

<h2>Hello</h2>
=> 실제로는 하나의 객체가 메모리에 생성. new HTMLH('hello'); <<이런느낌

Java에서 class객체 안에 field, method가 있는 것처럼 태그도 마찬가지인데

  • field
  • method
  • style(CSS관련 내부클래스) -> field, method

이런 식으로 존재한다. Javascript는 이러한 field를 동적으로 변경해주는 것이다.

예를들면

<button type="button" onclick="document.getElementById('demo').innerHTML=Date()">
    Click me to display Date and Time.
</button>

<p id="demo">This is first paragraph</p>

위의 onclick의 내용이 javascript를 사용한 것으로 

click했을 때 id가 demo인 element안의 innerHTML이란 이름의 field내용을 Date()함수의 return 값으로 바꾸라는 것이다.

 

CSS에서 배운 tag도 마찬가지로 변경할 수 있다.

// 버튼을 클릭했을 때 id가 demo인 element의 style.fontsize의 값을 35px로 변경하라는 뜻
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px' ">Click me</button>

 

javascript를 넣는 방법

: css와 동일하다.

1. html코드 중 <body> 안에 넣는 방법

이 때 주의할 점은 javascript의 효과를 적용하려는 html객체가 생성되기 전에 script 코드를 넣으면 명령어가 수행되지 않는다. 그러므로 가능하면 <body>의 맨 마지막에 사용하는 것을 권장한다.

2. <head>안에 넣는 방법
3. 외부 파일을 사용하는 방법(권장)

<head>에 외부 script파일을 연결한다. 외부파일의 확장자는 .js 이다.

<head>
	<script src="../scripts/myScript.js"></script>
</head>

 

 

Web browser의 html파일 실행 순서

  1. html파일의 <head>안에서 선언된 style이나 script의 function내용을 해석해서 갖고 있는다.
    단, <body>에서 html element들의 instance가 생성되기전에 javascript로 특정 객체의 field값을 변경하면 효과가 없다.
  2. <body>에서 html elemente들을순서대로 객체 생성하여 메모리에 올린다.
  3. <body>안에서 작성된 javascript code내용을 html elemnt가 생성된 경우엔 적용한다.
  4. web browser화면에 css, javasript 내용을 적용한 결과를 display한다.

 

저작자표시 비영리 변경금지 (새창열림)

'개발공부 > HTML|CSS|JavaScript' 카테고리의 다른 글

[CSS] hn, p 태그에 text-align:center이 적용이 되는가  (0) 2022.10.29
[Javascript] 객체(Object)  (0) 2022.10.29
[Javascript] variable과 scope정리  (0) 2022.10.28
[Javascript] 출력 메소드 정리  (0) 2022.10.26
[HTML/CSS] 기억할 것 정리  (0) 2022.10.25
'개발공부/HTML|CSS|JavaScript' Related Articles more