본문 바로가기

자바스프링웹공부(2024)/자바스크립트

2024.07.25. 자바스크립트, HTML 기초.

반응형

*HTML 기초

- <input type="reset"> : 태그 안에 있는 폼입력 데이터를 모두 처음상태로 되돌림. 
- <button>button 버튼기본값=submit</button>
  : type 속성으로 버튼의 종류 지정가능하며, 생략시 기본값을 submit.
- 테이블 제목줄에 가운데 정렬<div>로 테이블 전체를 감싸서 align을 center로 주면 됨. 
-<input type="text" size="7"> : 인풋태그에 size를 넣으면 인풋태그 사이즈가 줄어듦.

 



*자바스크립트 기초

- https://javascript.info/ 에 자바스크립트에 대한 정보가 다 있다고 함.

 

< https://javascript.info/ > 주요내용.
- https://ko.javascript.info/intro 
  : 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다.
 :웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있습니다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문입니다.
 : 자바스크립트만의 강점-모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨
- https://ko.javascript.info/manuals-specifications
- https://ko.javascript.info/devtools
 :이클립스 콘솔은 자바스크립트 오류를 찾을 수 없다. 오류도 웹브라우저에서 찾아야된다. 브라우저의 개발자도구를 통해서 봐야함. 
- 자바스크립트 간단한 거는 웹브라우저의 개발자도구 console창에서 바로 실행해 볼 수있다.
- https://ko.javascript.info/hello-world
 :<script>태그는 어디에나 사용할 수 있지만 통상 <head>, <body>태그 안에 사용함.
- 외부 스크립트 : <script src="/path/to/script.js"> (외부URL 도 가능함.)
  : src 속성이 있으면 태그 내부의 코드는 무시됩니다.

*자바스크립트 공부.

- type="text/javascript"는 생략가능하다. 
- alert : 모달창이라고 부른다.
- 자바스크립트는 세미콜론(;)이 필수가 아니다.(=>자바와는 다른점) 단, 한줄에 여러문장을 이어서 작성할 때는 반드시 문장 구분용도로 세미콜론을 사용해야 한다. 하지만 가독성을 위해 세미콜론 쓰는 것을 권장한다. 
- identifier : 식별자=이름.
- 대표적인 내장함수 alert, confirm, prompt
- 자바스크립트에서는 홑따옴표(' '), 겹따옴표 (" ") 구분없음
- confirm() : 사용자로부터 확인 및 취소버튼을 통해 확인작업을 수행하는 함수.

 : 소괄호 사이에 문자열을 전달 시 팝업창에 해당 문자열 표시(=alert 함수와 동일) 
 : 확인/취소 버튼 중 하나를 눌렀을 때 누른 버튼에 대한 값을 리턴해주는데 해당 값을 함수 좌변에 변수 선언을 통해 전달 받을 수 있다. 확인버튼 클릭시 true, 취소버튼 클릭시 false 값이 리턴됨. 

  var result = confirm("종료하시겠습니까?");

  alert(result); // (확인 클릭시 : true, 취소 클릭시 : false 가 출력된다.)


- prompt() : 팝업창을 통해서 사용자로부터 데이터를 입력받는 함수.
  입력창에 어떤 내용을 입력 후 [확인] 버튼 클릭시 해당 입력값이 리턴됨. (confirm()과 유사함.)
  만약, 아무것도 입력하지않고 [확인]을 누루면 빈문자열(""=null string)이 리턴되고, 데이터 입력과 상관없이[취소]버튼 클릭시 null 값이 전달된다.

   var result = prompt("이름을 입력하세요.");


- console.log() : 웹브라우저 개발자도구F12의 콘솔탭에 메세지를출력하는 함수.
  소괄호내에 출력할 메세지 또는 데이터 전달. 즉 웹브라우저 화면이 아니라 개발자 도구에서만 확인이 가능. 주로 현재 자바스크립트에서의 변수 값등 상태확인용도로 사용(=개발자를 위한 함수)
  console.log(">>>콘솔메세지확인")

- document.write() : 웹브라우저 화면영역(본문)에 메시지를 출력하는 함수. 
   소괄호내에 출력할 메세지 또는 데이터 전달. 출력할 데이터 부분에 문자열로 HTML 태그 전달 시 실제 태그도 동작함.
   document.write("<h1>메세지확인</h1>")
   스크립트 태그의 위치에 따라 위에서 아래로 차례대로 수행된다. 

- 외부 자바스크립트 파일에서는 자바스크립트의 모든 코드작성이 가능하며, 
 <scipt> 태그없이 그대로 자바스크립트 코드만 기술, 단 작성만 한 상태로는 실행할 수 없으며, 반드시 html 문서(jsp 등)에서 해당 자바스크립트 파일을 포함시켜 사용해야 한다. 
- 현재 html 문서내에 외부 자바스크립트파일(*.js)을 포함시키려면 <script> 태그의 src 속성을 통해 해당 파일을 지정해야 한다.  
 ex. <script src="test4_javascript.js"></script>
- 외부 자바스크립트 파일을 포함시킬 때 갯수 제한 없이 여러개 포함 시킬 수 있다. 

- 주의 src속성이 적용된 스크립트태그 내에는 자바스크립트 코드 기술 시 실행되지 않는다. 
   src 속성이 적용되지 않는 별도의 스크립트 태그를 통해 스크립트 코드를 기술해야 한다. 

반응형