hoon's bLog

Javascript 자바스크립트 들어가기 전 기초 본문

IT/Javascript

Javascript 자바스크립트 들어가기 전 기초

개발한기발자 2023. 3. 23. 17:20
반응형

자바스크립트(Javascript)란?

  • 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어
  • HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작 구현 가능
  • 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용 가능
  • 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 interpreter가 내장!
  • 자바스크립트를 사용하고 활용하기 위해서는 HTML / CSS가 선행되야함!

자바스크립트의 역사

  • 자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 개발
  • 처음에는 모카(Mocha)라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript), 최종적으로는 자바스크립트(JavaScript)라는 이름으로 변경!

자바스크립트의 특징

  • 객체 기반의 스크립트 언어
  • 동적이며, 타입을 명시할 필요 없는 인터프리터 언어라고도 함.
  • 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능
  • 자바스크립트 엔진 내부에서 실행중 컴파일이 필요한 경우에 내부에서 컴파일을 하는데, 실행되는 플랫폼에 따라 인터프리팅과 컴파일이 혼합되어 사용
  • 즉, 컴파일이 필요하지 않은 경우엔 개발자 도구에 코드를 그대로 입력하면 자동으로 실행된다!
  • 운영체제에 제한받지 않고, 브라우저로 동작하기때문에 코드가 노출되 보안에 취약
  • 과거에는 프론트엔드에서만 사용되다 Node.js로 인해 백엔드 분야에서도 많이 사용

Chrome - 개발자도구에서 코드를 바로 실행한 모습

자바(Java)와 자바스크립트(Javascript)

  • 자바와 자바스크립트는 그 이름만 놓고 보면 서로 관련이 있는 언어로 생각되기 쉽지만, 서로 직접적인 관련은 없음.
  • 문법상 비슷한 부분은 두 언어에 대한 문법이 모두 C언어를 기반으로 개발됨
Java Javascript
컴파일 언어 인터프리터 언어
타입 검사를 엄격하게 함. 타입을 명시하지 않음.
클래스(class) 기반의 객체 지향 언어 프로토타입(prototype) 기반의 객체 지향 언어

자바스크립트 규칙

  • 자바스크립트는 대소문자를 구분
  • 자바스크립트에서 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용
  • 리터럴(literal) : 직접 표현되는 값 그 자체
  • 식별자(identifier) : 변수나 함수의 이름을 작성할 때 사용하는 이름
  • 자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용 가능
  • 자바스크립트에서 식별자는 숫자와 식별자의 구별을 빠르게 할 수 있도록 숫자로는 시작 불가!!!!
  • 자바스크립트는 유니코드(unicode) 문자셋을 사용
  • 식별자 작성 방식
    • camelCase : 첫 번째 단어는 모두 소문자로 작성하고, 그다음 단어부터는 첫 문자만 대문자로 작성하는 방식
    • underscore_case : 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어(_)로 연결하는 방식
    • 하이픈(-)은 뺄셈을 위해 예약된 키워드이므로, 식별자를 작성할 때는 사용 불가!!!!!!!!
  • 키워드(keyword) or 예약어(reserved word) : 자바스크립트에서는 몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약 된 언어
// 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨.
// 변수를 선언하는 var는 예약어
var javascript  = 10;
var JavaScript  = 20;
var javaScript  = 30; //camelCase로 선언
var java_script = 40; //underscore_case로 선언

12            // 숫자 리터럴
"JavaScript"  // 문자열 리터럴
'안녕하세요'     // 문자열 리터럴
true          // boolean 리터럴

자바스크립트 출력

window.alert() 메소드

  • 브라우저와 별도의 대화 상자를 띄워 사용자에게 데이터를 전달
  • window함수들은 앞에 window. 생략가능!
function testAlert() {
    alert("Alert는 이렇게 사용하는 것!!");
}

 HTML DOM 요소를 이용한 innerHTML 프로퍼티

  • 실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법은 HTML DOM 요소를 이용한 innerHTML 프로퍼티를 이용
  • 우선 document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택
  • 다음으로 innerHTML 프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)이나 속성(attribute)값 등을 손쉽게 변경 가능
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 출력!!!!!!!";

document.write() 메소드

  • 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력
  • 대부분 테스트나 디버깅을 위해 사용
  • 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고, 자신의 데이터를 출력하므로 이점 주의할것!!
document.write(4 * 5)

console.log() 메소드

  • 대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용 가능
  • 디버깅에 최적화 되어 있음!
console.log(4 * 5);

자바스크립트를 적용하는 방법

내부 자바스크립트 코드로 적용

  • 자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입HTML 문서의 <head>태그나 <body>태그, 또는 양쪽 모두에 위치 가능

외부 자바스크립트 파일

  • 외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장
  • 해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하여 사용

Reference

https://www.tcpschool.com/javascript/intro

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

https://www.oowgnoj.dev/review/advanced-js-1

 

JavaScript, 인터프리터 언어일까?

기억하기 위해 기록합니다.

www.oowgnoj.dev

728x90
반응형
저작자표시 비영리

'IT > Javascript' 카테고리의 다른 글

Javascript 반복문 사용법  (0) 2023.04.14
Javascript 조건문 if, switch case, 삼항연산자  (2) 2023.04.13
Javascript 연산자 사용법  (0) 2023.03.30
Javascript var, let, const 변수 선언  (2) 2023.03.29
Javascript 타입 종류  (1) 2023.03.24
'IT/Javascript' Related Articles more