Javascript
1. 클라이언트 브라우저 내부에서 실행되는 프로그램
* 브라우저 이외에서도 실행가능한 형태로 발전됨
Javascript
- 자바 개발자
- 자바 언어와 개념이 유사
- 자바 != 자바스크립트언어
- 넷스케이프 브라우저 개발사에서 처음 언어를 개발(느림)
- 구글 javascript의 해석엔진 리뉴얼 - v8 (빠름) : 기존 실행할 수 없던게 가능해짐
- 구글드라이브, 워드, 엑셀 -> 브라우저 내부에서 실행됨
* 브라우저 전용 프로그램
자바스크립트(신생 - 스타트업 : 편리) / 자바(대기업, 공공기관 중심 : 복잡, 개발단가 높음)
웹 클라이언트
웹 서버
모바일 어플리케이션
게임 개발
ECMAScript 5 * google이 중점적으로 사용
- 문법적 차이가 있다.
ECMAScript 6 / 7
프로그램
: 개발자가 수행해야될 작업을 OS에 명령하는 방법
1. AI (X) / 모든 오류는 개발자에게서 만들어 진다.
2. OS는 바보 -> 뭔가 해주기 전까진 아무것도 못한다.
프로그램 언어란?
: 명령어를 주는 방법에 대한 규정
1. 문법(암기 / 정리) - C / C++
프로그램 언어의 구성
1. 자료(데이터)
: 자료구조론
2. 흐름 제어 (*) 제일 어려움
: 알고리즘 -> 속도
3. 방법론
2.1 기본 용어
2.1.1 표현식과 문장
자바스크립트에서 값을 만들어내는 간다한 코드를 '표현식'이라고 부릅니다. 하나 이상의 표현식이 모여 '문장'이 된다. 문장 끝에는 세미콜론을 찍어 문장의 종결을 짓는다.
하나의 표현식도 세미콜론만 찍히면 문장이라고 부르며 이러한 문장이 모여 프로그램을 이룬다.
NOTE_사실 자바스크립트는 문장 끝에 세미콜론을 입력하지 않아도 프로그램을 실행하는 데는 문제가 없다. 하지만 대부분의 프로그래밍 언어가 문장 끝에 세미콜론을 입력하므로 자바스크립트도 관례상 입력하는 것이다.
2.1.2 키워드
자바스크립트가 처음 만들어질 때 정해진 특별한 의미가 있는 단어를 '키워드'라고 한다. 아래는 자바스크립트의 키워드 이다.
break, else, instanceof, true, case, false, new, try, catch, finally, null, typeof, continue, for, return, var, default, function, switch, void, delete, if, this, while, do, in, throw, with
아래는 미래에 사용될 가능성이 있는 자바스크립트 키워드이다. W3C에서는 자바스크립트 프로그램을 작성할 때 이 키워드를 사용하지 않기를 권고함. const나 debugger같은 키워드는 이미 일부 브라우저에서 사용되기 때문.
abstract, double, implements, private, throws, boolean, enum, import, protected, transient, byte, export, int, public, volatile, char, extends, interface, short, class, final, long, static, const, float, native, super, debugger, goto, package, synchronized
모든 키워드를 외울 필요는 없으나 무엇인지 정도만 알고 넘어간다.
2.1.3 식별자
식별자는 자바스크립트에서 이름을 붙일 때 사용하는 단어이다. 식별자의 예로는 변수명과 함수명이 있다. 식별자를 만들때는 다음 규칙을 반드시 지켜야 한다.
- 키워드를 사용하면 안됨
- 숫자로 시작하면 안됨
- 특수 문자는 _과 $만 허용
- 공백 문자를 포함할 수 없다.
식별자로 한글이나 한자, 일본어 같은 언어를 모두 사용할 수 있으나 알파벳을 사용하는 것이 개발자 사이의 관례이다. 또한 식별자는 alpha, beta처럼 의미 없는 단어보다 input, output 같은 의미 있는 단어를 사용하는게 좋다.
식별자를 만들 때 알파벳을 사용하는 것 외에도 대부분의 자바스크립트 개발자가 지키는 관례가 있다. 이는 식별자의 의미를 더 명확하게 하려고 사용하는 규칙이다.
1. 생성자 함수의 이름은 항상 대문자로 시작
2. 변수와 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작
3. 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 한다.
자바스크립트의 식별자는 크게 네 종류로 나눌 수 있다. 더 많은 종류로 나누기도 하지만 아직까지는 네 가지로만 구분한다.
2.1.4 주석
주석은 프로그램을 진행하는 데 전혀 영향을 주지 않고 프로그램 코드를 설명하는 데 사용한다.
// , /* */
2.2 출력
자바스크립트의 가장 기본적인 출력 방법은 alert() 함수를 사용하는 것이다. alert() 함수를 사용하면 웹 브라우저에 경고창을 띄울 수 있다. alert() 함수는 코드 2-4처럼 사용한다. 함수의 괄호 안에는 문자열을 입력한다.
2.3 문자열
코드2-4에서 alert() 함수의 매개변수로 'Hello JavaScript..!'를 입력했다. 'Hello JavaScript..!'와 같은 자료를 문자열이라고 부른다. 문자열은 문자를 표현할 때 사용하는 자료형으로 자료형은 자료의 형태를 의미한다.
자바스크립트는 두 가지 방법으로 문자열을 만들 수 있다. 첫 번째 방법은 큰따옴표를 사용하는 것이고, 두 번째 방법은 작은 따옴표를 사용하는 것이다. 다음과 같이 각각의 따옴표안에 문자를 넣어 문자열은 만든다.
- "Hello JavaScript"
-'Hello JavaScript'
이스케이프 문자는 특수한 기능을 수행하는 문자로 따옴표는 원래 문자열을 만들 때 사용하지만 문자 그대로 따옴표를 사용하고 싶다면 코드 2-6처럼 따옴표 앞에 역슬래쉬(\)를 사용해 따옴표를 문자 그대로 사용하겠다고 표시한다.
이스케이프 문자는 이외에도 여러 가지 특수한 기능이 있다. 코드 2-7은 문자열 중간에 이스케이프 문자 \n을 사용하여 줄바꿈할때 사용한다.
이스케이프 문자는 이외에도 여러 가지 기능이 있다. 자주 사용하는 이스케이프 문자는 아래와 같다.
\t -> 수평 탭
\n -> 줄바꿈
\' -> 작은따옴표
\" -> 큰따옴표
\\ -> 역 슬래시
js.01 console.log("Hello Javascript");
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
// 자바스크립트 쓰여지는 공간
// 선언적인 공간
console.log("Hello Javascript 3");
</script>
</head>
<body>
<script type="text/javascript">
// 자바스크립트 쓰여지는 공간
// 실행 공간
//개발자 도구의 콘솔에 출력하라.
console.log("Hello Javascript");
console.log("Hello Javascript");
</script>
</body>
</html>
js.02 default.js를 이용하여 헤더에 선언후 불러오기
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript" src="./default.js">
</script>
</head>
<body>
</body>
</html>
default.js
console.log("Hello Javascript"); -> 출력
js.03 출력(console.log, document.write, alert)
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// console.log : 디버깅 할때 사용
// document.write : 결과 출력
document.write("<b>Hello Javascript</b><br />");
document.write("<i>Hello Javascript</i><br />");
alert("난 경고창");
</script>
</body>
</html>
1. 자료
1) 자료형태
문자/문자열(*)
숫자
정수
실수
불/진리
true
false
객체
Undefined
정의되지 않았음
2. 저장소(변수 / 상수)
변수 - Overwrite(덮어쓰기) 가능한 저장소
상수 - 한번 저장하면 변경 불가능
* 이름
: 식별자 규칙에 따른 이름
: 변수명 / 상수명
변수(variable)
var num1; : 선언
var name;
값의 할당(연산자)
num1 = 10;
10 = num1; <- 이런걸 절대 있을 수 없다. 변수명을 숫자로 시작할 수 없기 때문.
가변형 자료형
값의 종류에 따라 변수 내부의 자료 형태가 자동 변경된다.
js.04 변수 선언, 값 할당 및 값 출력
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var num1;
var num2;
num1 = 10;
num2 = 20;
var num3 = 30;
console.log(num1);
console.log(num2);
console.log(num3);
</script>
</body>
</html>
js.05 문자열
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var str1 = 'Hello Javascript';
var str2 = "Hello Javascript";
var str3 = 'Hello \'Javascript\'';
var str4 = "Hello \"Javascript\"";
console.log(str1);
console.log(str2);
console.log(str3);
console.log(str4);
</script>
</body>
</html>
js.06 숫자
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var num1 = 234; //숫자형
var num2 = "234"; //문자열형
var num3 = 34.567;
console.log(num1);
console.log(num2);
console.log(num3);
</script>
</body>
</html>
js.07 숫자형 2
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var radius, pi, e=10;
radius = 10;
pi = 3.14;
console.log(radius);
console.log(pi);
console.log(e);
</script>
</body>
</html>
js.08 변수의 특성 - 기존 선언된 변수가 다른 값으로 중복 선언되면 overwrite되며 마지막 값을 값으로 친다.
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// 1개 변수에 1개 값만 입력된(Overwrite)
var num = 10;
num = 20;
num = 30;
// 같은 변수를 여러번 선언
// 자바스크립트만 허용
var num2 = 10;
var num2 = 20;
var num2 = 30;
console.log(num);
console.log(num2);
</script>
</body>
</html>
'Web & Mobile > Javascript' 카테고리의 다른 글
| Lecture 10 - Javascript(6) (0) | 2019.04.14 |
|---|---|
| Lecture 9 - Javascript(5) (0) | 2019.04.14 |
| Lecture 8 - Javascript(4) (2) | 2019.04.13 |
| Lecture 7 - Javascript(3) (0) | 2019.04.13 |
| Lecture 6 - Javascript(2) (0) | 2019.04.13 |
댓글