JavaScript 개요 및 기본문법

10725 단어 Java ScripthtmlJava Script

2022-03-17

01 : JavaScript?
02 : 기본문법
03 : 변수 표기법(명명규칙)

01 : JavaScript?


1. JavaScript 자바스크립트란?

  1. JavaScript 는 웹페이지를 동적으로, 프로그래밍적으로 제어하기위해 고안된언어이며
    정적인 HTML,CSS 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당한다.

    HTML, CSS와 달리 자바스크립트는 C언어, 자바와 같은 일반 프로그램언어와 비슷한 구조를 가지고 있다.

    자바스크립트는 객체(Object) 기반의 스크립트 언어로,
    기본적으로는 웹 브라우저에서 해석되는 인터프리터 언어이며 Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에도 사용할 수 있다.
    현재 컴퓨터나 스마트폰 등에 포함된 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다.

*인터프리터 언어 : 원시코드(프로그래머가 작성한 소스코드)를 한줄한줄 읽어가며 기계어(JVM 가상머신) 변환과정 없이 바로 명령어를 해석하여 실행한다.

  1. script 태그 내부에서 작성되거나, js파일(외부파일)에서 작성하여 로드시킨다.

  2. 주로 하단에 배치가 된다.
    DOM (Document Object Model /문서객체모델) 객체검색을 위해 하단에서 주로 작업함 +최근에 DOM직접 제어보다 jQuery와 같은 라이브러리를 사용하는것이 일반적이다.

  3. 사전에 한번 읽고, 순차적으로 다시 실행한다.


이클립스 초기설정 독타입, 메타 쪽 지워주기


02 : 기본문법


1. JavaScript 소스코드 위치

기본적으로 HTML문서의 헤드태그 사이에 위치하며,
그 외 위치에 둘 수도 있고 외부파일이나 다른 서버를 통해 참조하는 방식으로도 사용한다.

  1. 내부 스크립트
    HTML 문서 내부에 자바스크립트 소스코드를 두는 유형.
    헤드태그, 바디태그에 둘 수 있고 양쪽에 둬도 된다.
  • HTML 문서구조(DOM)에 쉽게 접근가능
  • 소스가 복잡해지는 경우 관리가 어렵고 공통된 기능, 코드재활용이 어려운단점이 있다. 
<!DOCTYPE HTML>
<html>

<body>

  <p>스크립트 전</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>스크립트 후</p>

</body>

</html>

  1. 외부 스크립트
    HTML 문서 외부에 별도파일을 생성해 불러와서 사용하는 방식.
    이때, 자바스크립트 파일위치는 HTML동일서버 혹은 외부서버일수도있다. 
<script src="js01.js" type="text/javascript"></script>

script태그는 src 속성과 내부코드를 동시에 가지지 못한다. (실행안됨)
script src="..." 외부파일 연결, 혹은 script 태그 내 코드작성인지 선택해야한다. (태그와 태그사이 작동 X)

실행

2. 변수

변하는 데이터를 저장할 수 있는 메모리공간.

  1. 변수선언
    변수이름은 대소문자를 구별한다.
    프로그램에서 사용되고있는 변수명은 피해야한다.(window, document)
    변수명은 앞에 숫자나 특수기호가 올 수 없다. (_, $ 이 특수 기호는 사용가능)
    지역변수, 전역변수가 있다.
    기본적으로 소문자로 시작되는 CamelCase를 사용.

  1. var, let, const
    ex) var userName = "홍길동";

  2. 변수의 자료형(타입)은 저장된 값에 의해 결정이 된다.
    자료형을 확인하는 연산자는 typeof이며, 저장된 자료형을 확인 할 수 있다.

  3. 기본형의 종류는 문자형, 숫자형, 논리형이다.

  4. 변수의 기본값은 undefined. (값 미 대입시)

  5. 변수명은 예약어를 사용할 수 없다.


📌 var, let, const

ES6 이전에 var만 존재했다.

  • var : 지역변수개념, 함수 범위에서 유효함.
    var를 선언하지 않으면 자동으로 전역변수가 된다.
    변수 사용 범위 외에서 일부 사용가능함.
    {} (블럭유효 범위, 스코프)

  • let : 변수명 중복허용 불가함.
    (모든버전 지원)
    변수 사용 범위 외에서 사용 불가함.
    {} (블럭유효 범위, 스코프)
    사용되지 않는 변수 (메모리)는 가비지컬렉터에 의해 해제(삭제) 된다.
    (유효범위를 벗어난 종료시점에서 ~ ) 

	 var str01 = "홍길동";
	 let str02 = "이순신";
	 console.log(str01,'var');  
	 console.log(str02, 'let'); 
	 
	var str01 = "이순신";
	console.log(str01,'var')
	//let str02 = '고길동'; 변수명 중복허용 불가 
	//console.log(str02, 'let');

let n01 = 1;
var n02 = 2;
if(true){
	//블럭 유효 범위
	//중괄호 사이를 스코프라고 한다. (유효범위)
	//블럭 유효 범위에 선언된 변수는 지역변수
	/**********
		 지역변수
		 -블럭 유효 범위에 선언된 변수
		 -블럭 유효 범위밖에서 사용할 수 없다. 
	**********/
		 console.log(n01,'n01');
		 console.log(n02,'n02');	 
		 n01 = 10;
		 n02 = 20;
		 
		 var n03 = 0;
		 let n04 = 0;
	 }
	 console.log(n01,'n01');
	 console.log(n02,'n02');
	 
	 console.log(n03,'n03');
	 //console.log(n04,'n04'); let으로 선언된 지역변수는 사용불가

  • const : 상수에는 또 다른 값을 대입할 수 없다.
    선언 시 값이 대입이 되어있어야 한다.
let foo = 'foo1';
const bar = 'bar1';
console.log(foo); // foo1
 
if (true) {
  let foo = 'foo2';
  console.log(foo); // foo2
  console.log(bar); // bar1
}
 
console.log(foo); // foo1
bar = 'bar2'; // error

자료형 -Primitive(기본형)

  • Boolean: true, false
  • null: 빈 값을 표현
  • undefined: 값을 할당하지 않은 변수가 가지는 값
  • Number: 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(숫자가 아님)등.
  • String: 문자열

-자바스크립트는 값에 의해 자료형이 결정된다.
-문자형, 숫자형, 논리형 

var string;
string = "Java Script"; // 혹은 'Java Script'

📌 문자형 String

var 식별자(변수명) = '';
var 식별자(변수명) = "";
var 식별자(변수명) = new String('');

var str001 = '홍길동'; 
console.log(typeof str001, str001);
= 형을 알아보는 연산자. 
typeof String 값을 -> 콘솔로그에 던져준것.
/*******************************
문자형 확인
********************************/
var str = '홍길동'; //문자형
var num = '100'; //문자형
var tag = '<h1>안녕하세요</h1>'; //문자형

console.log(typeof str, str, 'str');
console.log(typeof num, num, 'num');
console.log(typeof tag, tag, 'tag');![](https://media.vlpt.us/images/h220101/post/1cdc0d6a-d0ee-4b68-8a06-f8a4854f1401/image.png)

📌 숫자형 number

var 식별자(변수명) = 숫자;
-정수, 소수

var n001 = 10.1;
console.log(typeof n001, n001);
/*******************************
숫자형 확인
********************************/
var number1 = 100; //숫자형
var number2 = Number('100'); //숫자형
//Number -> 인수값에 들어간 문자형을 숫자형로 변환해준다.

console.log(typeof number1, number1, ' number1 ');
console.log(typeof number2, number2, ' number2 ');
![](https://media.vlpt.us/images/h220101/post/30211ee1-383e-432c-b610-b4e8176fa31b/image.png)

📌 논리형 boolean

var 식별자(변수명) = true of faulse;

var b001 = true;
console.log(typeof b001, b001);
  var str0001 = '100'; //문자형
	 var n0001 = Number(str0001); //숫자형으로 변환 
	 console.log(n0001,str0001);
	 
	 var b0001 = '0';
	 var b0002 = 1;
	 var b0003 = 0;
	 var b0004 = '';
	 
	 //Boolean
	 //문자형에 값이 있으면 true
	 //숫자형에 0이 아니면 true 
	 console.log(Boolean(b0001), b0001); 
	 console.log(Boolean(b0002), b0002);
	 console.log(Boolean(b0003), b0003);
	 console.log(Boolean(b0004), b0004);
	 
	 if(""){ //확인하기 위한 조건문
		 console.log('값 있다.');
	 }else{
		 console.log('값 없다.');
	 }


03 : 변수 표기법(명명규칙)

관례로 지켜서 쓰고있는 변수 표기법이다.

카멜 표기법

일반적인 변수명 표기, 일반적인 함수(메서드)
소문자로 단어 시작하며, 단어와 단어 조합시 조합되는 단어 첫 글자만 '대문자'로 표기 

예) var userName;

파스칼 표기법

클래스명, 생성자함수명
처음 시작 단어 대문자로, 나머지는 소문자로 표기, 단어와 단어 조합시 조합되는 단어 첫글자만 대문자로 표기
-class UserInfo{}, function UserInfo(){}

스네이크(언더바) 표기법

단어와 단어사이에 '_' 표기하여 단어 구분 

예) var user_name;

헝가리안 표기법

앞 단어를 자료형을 암시하는 단어와 변수명을 조합하여 사용 

예) var setUserName;

상수 변수명표현

스네이크 표기법 + 모든 문자열 대문자
자바스크립트에서 전역 상수

예) const USER_NUMBER = 10;

사용했던 변수 표기

html 요소 중 id 속성 값 -> 카멜표기법
html 요소 중 class 속성 값 -> 단어-단어

SNS 공유하기
[git] invalid path - unable to checkout working tree

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage