어제보다 더 나은 나

자바스크립트 본문

웹 개발 공부

자바스크립트

확인해볼까 2022. 7. 9. 17:10

[자바스크립트 이전의 웹 페이지의 단점]

  • 자바스크립트를 사용하지 않은 웹 페이지는 사용자가 서버에 특정 페이지를 요청하면 서버는 html파일과 css 파일을 넘겨주고, 사용자의 컴퓨터 혹은 스마트폰의 브라우저는 이 파일을 렌더링해서 화면에 보여주는 방식이기에 정적인 페이지를 보여줄 때 적합한 형태.
  • 화면 내용 중 아무리 작은 요소만 바꾸려고 해도 서버에 다시 요청해서 새로운 html 파일과 css 파일 전체를 다시 받아와야 하기 때문

 

 

  1. 자바스크립트 코드는 <script> 태그 안에 위치
  2. <script> 태그 안에 자바스크립트 함수 doSomething()이 선언되어 있음
  3. 문서 안의 요소 중 id가 inputA, inputB인 input 요소의 값을 가져와 변수 a, b에 저장
  4. id가 valueA, valueB인 요소의 텍스트를 a, b로 변경
  5. id가 valueC인 텍스트는 a와 b의 값을 숫자로 바꾼 다음 더한 결괏값으로 변경
  6. <body> 태그 내 <input>태그에는 onkeyup="doSomething()"을 추가해 이 요소에서 키보드의 키가 눌렸다가 올라가면 해당 함수가 실행될 수 있도록 설정
  7. 결과값을 출력하는 문장은 doSomething()함수가 값을 반영할 수 있도록 <span>태그를 사용해 추가

 

 

자바스크립트로 방문자의 행동에 따라 실시간으로 업데이트되는 웹 페이지 생성 가능

 

 

버튼을 누르면 현재 시간이 alert 창으로 뜨는 코드

 

'현재 시간' 버튼 클릭 결과

 

 

 

javascript 함수를 별도의 js 파일로 만든 후, html 파일에서 연결해서 사용

 

'현재 시간이다' 버튼 클릭 결과, 현재 시간 출력

 

'웹 개발 공부' 카테고리의 다른 글

HTML 태그 정리, CSS란?  (0) 2022.07.09
'웹 개발 공부' Related Articles more
Comments