[9] 230109 Ch. 8 자바스크립트 기초: 1. 자바스크립트의 소개 · 2. 용도 · 3. 위치, 4. 문장, 5. 변수, 6. 자료형, 7. 연산자 [K-디지털 트레이닝 9일]

Notice

Link

Recent Posts

Recent Comments

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

In Total

관리 메뉴

A Joyful AI Research Journey🌳😊

[9] 230109 Ch. 8 자바스크립트 기초: 1. 자바스크립트의 소개 · 2. 용도 · 3. 위치, 4. 문장, 5. 변수, 6. 자료형, 7. 연산자 [K-디지털 트레이닝 9일] 본문

🌳Bootcamp Revision 2023✨/JavaScript, jQuery, Ajax, JSON

[9] 230109 Ch. 8 자바스크립트 기초: 1. 자바스크립트의 소개 · 2. 용도 · 3. 위치, 4. 문장, 5. 변수, 6. 자료형, 7. 연산자 [K-디지털 트레이닝 9일]

yjyuwisely 2023. 1. 9. 12:50

230109 Mon 9th class

Ch. 8 자바스크립트 기초
Ch. 9 자바스크립트 객체 (주제별로 묶기 위해 윗글로 글 내용 옮김)
진도: p. 268 ~ (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국)

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 웹프로그래밍 초보자도 쉽게 배우는 웹 개발 지침서!이 책은 웹프로그래밍을 처음 배우는 초보자들을 위해 기초부터 차근차근 설명한다. 1~3장에

product.kyobobook.co.kr

오늘 배운 것 중 기억할 것을 정리했다.

Ch. 8 자바스크립트 기초

책의 목차
-자바스크립트의 소개
-자바스크립트의 용도
-자바스크립트의 위치
-문장
-변수
-자료형
-연산자
-숫자와 문자열 사이의 변환
-조건문
-반복문
-배열
-함수
-자바스크립트의 입출력

1. 자바스크립트 (Javascipt) p.268

동적인 웹 페이지를 작성하기 위하여 사용되는 언어
웹의 표준 프로그래밍 언어다.
모든 웹브라우저들은 자바스크립트를 지원한다.

특징

- 인터프리트 언어: 컴파일 과정을 가치지 않고 바로 실행시킬 수 있다.

Compile refers to the act of converting programs written in high level programming language, which is understandable and written by humans, into a low level binary language understood only by the computer.

To compile, you need a compiler, which is a software program that converts high level programming language code into machine code.

- 동적 타이핑(dynamic typing): 변수의 자료형을 선언하지 않고도 변수를 사용할 수 있다. 단순히 모든 변수는 var x;와 같이 선언할 수 있다.
- 구조적 프로그래밍 지원: C언어의 구조적 프로그래밍을 지원한다. 즉 if-else, while, for 등의 제어 구조를 완벽하게 지원한다.
- 객체 기반: 자바스크립트의 객체는 연관 배열(associate arrays)이다.
(연관 배열 = 키 하나와 값 하나가 연관되어 있으며 키를 통해 연관되는 값을 얻을 수 있다.)

예시) p. 271

<body>
<script>
var now = new Date(); /* 오늘 날짜와 현재 시간을 now 변수에 저장한다. */
document.write(now);
</script>
</body>

-자바스크립트는 <script> ... </script> 사이에 기술된다.

- var: 변수(variable): 하나의 값을 저장할 수 있는 메모리의 공간. 하나의 변수에는 오로지 하나의 값만 저장할 수 있다.

- now: 변수 이름, 다른 이름으로 바꿀 수 있다.

- new Date(): 객체 (Java에서 가져옮)

- =: 오른쪽의 값을 왼쪽에 저장시킨다. 반면 ==: 산술적인 같음의 의미

- document 객체: 내장 객체: 자바스크립트 자체적으로 만든 객체

- write() 메서드: 자바스크립트에서는 함수, 자바에서는 메서드(Method)라고 한다. 함수는 기능을 담당한다. 변수는 단순히 값을 담당한다.

- 객체: 속성과 동작을 한데 모아둔 것

- 메서드: 동작에 해당된다.

결과)

2. 자바스크립트의 용도 p. 271

이벤트(ex. 클릭, 더블클릭)에 반응하는 동작을 구현할 수 있다.
ex) 네이버 회원 가입 때 포커싱 잃음: 커서를 다른 곳에 둠, 키보드에도 이벤트가 있다.
Ajax를 통하여 전체 페이지를 다시 로드하지 않고서도 서버로부터 새로운 페이지 콘텐츠를 받거나 데이터를 제출할 때 사용한다.
HTML요소의 크기나 색상을 동적으로 변경할 수 있다.
ex) 네이버 회원 가입 때 입력 안 했을 때 뜨는 빨간 문구: 필수 정보입니다. (CSS 적용시킴)
게임, 애니메이션과 같은 상호 대화적인 콘텐츠를 구현할 수 있다.
사용자가 입력한 값을 검증하는 작업

ex) 네이버 회원 가입 때 1,3,5를 체크할 수 있다.

3. 자바스크립트의 위치 p. 273

대원칙: 자바스크립트는 읽히면서 바로 실행된다.
<head>는 메타 정보만 있으므로 여기에 자바스크립트를 넣으면 반드시 <body>에 위치한 콘텐츠보다 먼저 실행되는 것이 보장된다.
메타 정보: 메타데이터(Metadata)는 일반적으로 데이터에 관한 구조화된 데이터로, 대량의 정보 가운데에서 확인하고자 하는 정보를 효율적으로 검색하기 위해 원시데이터(Raw data)를 일정한 규칙에 따라 구조화 혹은 표준화한 정보이다.

만약 자바스크립트로 콘텐츠를 처리한다면 <body>에서 콘텐츠 다음에 위치시켜야 한다. 안전하게 하려면 <body>의 맨 끝에 두는 것이 좋다.

3.1 내부 자바스크립트

- <head> 섹션이나 <body> 섹션 안에 자바스크립트를 넣는다. <script> ... </script>
- <head> 섹션에 넣는 것이 좀 더 바람직하다.

3.2 외부 자바스크립트

<script src="C:\230109_new\js\myscript.js"></script>
document.write("Hello World!");

오류가 났었는데 property 눌러서 전체 위치 복사해서 넣으니 실행이 됐다.

3.3 인라인 자바스크립트

예시)

<button type="button" onclick="alert('반갑습니다')">버튼을 누르세요!</button>

- onclick 이벤트가 발생하면 alert()를 호출(함수를 불러서 실행한다.)한다.
- 함수 alert(알리다)는 이 페이지의 내용이라는 팝업창 밑에 나오는 문장을 말한다.

결과)

4. 문장 (Statement) p. 277

자바스크립트 문장(Statement)은 웹브라우저에게 내리는 명령이다. 각각의 문장은 웹 브라우저가 무엇을 해야 하는지 지시한다.

각 문장의 끝에는 ;(세미콜론)을 붙인다. 세미콜론은 생략해도 되지만 가급적 세미콜론을 붙이도록 한다.
자바스크립트에서는 줄이 바뀌면 하나의 문장이 끝난 것으로 판단한다.
세미콜론을 사용해 한 줄에 여러 개의 문장을 작성할 수도 있다.
각 문장은 브라우저에 의하여 작성된 순서대로 실행된다. (문장이 모이면 코드가 된다.)

4.1 블록

자바스크립트 문장은 블록(block)이라는 단위로 묶일 수 있다. 블록은 {로 시작하고 }로 끝난다.
목적: 여러 개의 문장을 묶어서 함께 실행한다.

예시)

{
     document.write("Hello World!");
     document.write("How are you?");
}

4.2 문자 집합과 대소문자 구별 p.278

자바스크립트는 유니코드(unicode) 문자 집합 버전 3을 지원한다. 유니코드는 아스키코드의 슈퍼 집합으로 전 세계의 모든 문자를 나타낼 수 있다.
- 유니코드: 유니코드(영어: Unicode)는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다.
- 아스키코드: 미국정보교환표준부호(영어: American Standard Code for Information Interchange), 또는 줄여서 ASCII( /ˈæski/, 아스키)는 영문 알파벳을 사용하는 대표적인 문자 인코딩이다.
자바스크립트는 대소문자를 구별한다. 주의할 점은 HTML은 대소문자를 구별하지 않는다. 자바스크립트에서 HTML의 태그와 속성 이름은 소문자로 적어야 한다.
ex) onclick 속성은 HTML에서 onClick이라고 해도 되지만 자바스크립트에서는 반드시 소문자 onclick으로만 적어야한다.
자바스크립트는 공백문자를 모두 무시한다. 다만 붙여 써야 하는 부분에 공백을 두면 컴파일 오류가 발생한다.
ex) document와 write() 사이에 공백을 두면 컴파일 오류가 발생한다.

Compile refers to the act of converting programs written in high level programming language, which is understandable and written by humans, into a low level binary language understood only by the computer.
컴파일: 컴파일러(compiler, 순화 용어: 해석기, 번역기)는 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램을 말한다.

4.3 주석문

주석(Comment)을 이용해 소스를 보다 읽기 쉽도록 만들 수 있다.
단일 문장 주석: // 문장
다중 문장 주석: /* 문장 */

5. 변수(Variable) p.280

변수(Variable)는 데이터를 저장하는 상자이다.
자바스크립트에서 변수는 var 키워드를 사용해 선언(declare)한다.
In computer programming, a declaration determines the name and data type of a variable or other element.

var x ;

var 키워드는 변수가 선언된다는 것을 나타낸다.
x: 변수 이름이다. 스크립트 안에서 유일해야 한다.
;: 하나의 문장이 끝났음을 나타낸다.

x = 10;

=은 변수에 초기값을 저장한다.

예시)

var x; //변수 x 선언
s=100;
document.write(s+"<br>");
s="홍길동";
document.write(s+"<br>");

var x = 123.00;
var y = 123;
var z1 = 123e3; //10^3
var z2 = 123e-3; //10^-3 
document.write(x+"<br>");
document.write(y+"<br>");
document.write(z1+"<br>");
document.write(z2+"<br>");

var a = (20>10); //true
var b = (10>10); //false
document.write(a+"<br>");
document.write(b+"<br>");

var c; // undefined 
document.write(c+"<br>");

var d = "abc";
var e = 'abc';
var f = "그는 '슈퍼맨'이라고 불린다.";
document.write(d+"<br>");
document.write(e+"<br>");
document.write(f+"<br>");
document.write(d.length+"<br>"); //문자열의 길이

결과)

100
홍길동
123
123
123000
0.123
true
false
undefined
abc
abc
그는 '슈퍼맨'이라고 불린다.
3

6. 자료형 (data type) p. 283

자료형은 변수가 가질 수 있는 값의 종류이다.
자바스크립트에서 변수를 선언할 때는 자료형이 필요 없다. 하지만 특정한 값이 변수에 저장되는 순간, 자료형은 내부적으로 결정된다. 자료형을 표현하지 않지만 변수의 내부 속성으로 자료형을 가지고 있다.

예시)

<script>
var x; // x의 값은 undefined가 된다. 값을 저장하기 위한 변수 x를 선언한다. 자료형을 적을 필요는 없다.
x = 100; // x는 숫자를 가진다. 변수 x에 정수 100을 저장한다.
document.write(x+"<br>");
x = "홍길동"; // x는 문자열을 가진다. 변수 x에 문자열 "홍길동"을 저장한다.
document.write(x+"<br>");
</script>

결과)

100
홍길동

수치형, 문자열, 부울형은 기본 자료형이다.
1) 수치형(number): 정수나 실수가 될 수 있다. 실수는 e를 사용해 지수형으로 표시할 수 있다.

var x = 123.00; // 실수
var y = 123; // 정수
var z1 = 123e3; // 123000
var z2 = 123e-3 // 0.123

2) 문자열(string): 문자가 연결된 것을 의미한다. 텍스트라고 생각하면 된다.
연속된 문자들로서 "abc", 또는 'abc'와 같이 나타낸다. 문자열 내의 문자는 유니코드로 표현된다.

문자열의 길이는 내부에 들어 있는 문자의 개수이다. 문자의 위치는 0부터 시작한다.
문자열의 길이는 문자열 length 속성으로 알 수 있다.

예시) length 속성

var s = "abc"; // s는 문자열 "abc"를 저장한다.
alert(s.length); // 3이 출력된다.

예시) 문자열의 중요한 메서드

var s = "Hello World";
s.charAt(0); // => "H": 첫번 째 문자
s.replace("e", "E"); // => "HEllo World": E를 e로 변경한다.
s.toUpperCase(); // => "HELLO WORLD": 대문자로 변경한다.

문자열 처리에서 주의할 점: 문자열을 변경하는 메서드는 새로운 문자열을 생성하여 반환한다. 기존의 문자열을 수정하여 반환하는 것이 아니다.

3) 부울형(boolean): true(참) 또는 false(거짓) 값만을 가질 수 있다. 둘 중 하나를 표현하는 데 사용된다.
일반적으로 조건문에서 실행 조건을 검사하는 데 사용된다.

var x = (20 > 10); // x는 true가 된다.
var y = (10 > 20); // y는 false가 된다.

4) 객체형(object): 객체를 나타내는 타입이다. 기본 자료형(수치형, 문자열, 부울형)을 제외하면 모두 객체형이라고 할 수 있다.
객체는 사물의 속성과 동작을 묶어서 표현하는 기법 중의 하나이다.

ex) 자동차의 속성: 메이커, 모델, 색상, 마력
자동차의 동작: 출발하기, 정지하기

객체는 이것을 묶어서 다음과 같이 표현한다.

var myCar = {model: "bmz", color: "red", hp: 100}

//위의 객체에 동작을 나타내는 메서드를 추가하면 완전한 객체가 된다.
//객체의 속성을 사용할 때는 도트(.) 연산자를 사용한다.
document.write("myCar.model + "<br>");

5) undefined: 값이 정해지지 않은 상태를 나타낸다. 변수가 선언되었지만 아직 값이 대입되지 않았으면 undefined 상태가 된다.

7. 연산자 p. 287

7.1 산술 연산자 (arithmetic operator)

: +, -, *, /, %(나머지), ++(증가), --(감소)

int x=1;
y=x+1;

y=x++; post increment /*후위형: 선 저장 후 증가*/
y=x; x=x+1;   // y는 1, x는 2이다

y=++x; pre increment /*전위형: 선 증가 후 저장*/
x=x+1; y=x;  // x는 2, y는 2이다

증감 연산자(increment and decrement operator)

- 후위형(post increment): 선 저장 후 증가 p=x; x=x+1;
x++ value is incremented after value assign or printed.

- 전위형(pre increment): 선 증가 후 저장 x=x+1; p=x;
++x value incremented before the value is printing.
++x: x의 값 3->4
--x: x의 값 4->3

예시)

var x;
x=10;
y=++x; /*전위형: 선 증가 후 저장 x=x+1, y=x*/
document.write("x값: "+x+"<br>");
document.write("y값: "+y+"<br>");

x=10; 
y=x++; /*후위형: 선 저장 후 증가 y=x, x=x+1*/
document.write("x값: "+x+"<br>");
document.write("y값: "+y+"<br>");

결과)

x값: 11
y값: 11
x값: 11
y값: 10

7.2 대입 연산자 (assignment operator)

+=, -=, *=, /=, %=
우선순위가 제일 낮다.

x+=y : x=x+y
x-=y : x=x-y
x*=y : x=x*y
x/=y : x=x/y
x%=y: x=x%y

문자열에서의 + 연산자

예시)

// 문자 + 문자 (연결자)
t1 = "Hello "+"World"; // + = 연결자 역할 

// 숫자 + 숫자 (연결자)
t2 = 3 + 4;

// 숫자 + 문자 (연결자)
t3 = 2 + " Things";

// 문자 + 숫자 (덧셈)
t4 = "Good " + 2;
document.write(t1+"<br>");
document.write(t2+"<br>");
document.write(t3+"<br>");
document.write(t4+"<br>");

결과)

Hello World
7
2 Things
Good 2

7.3 비교 연산자 (comparison operator)

==: 값이 같으면 참
!=: 값이 다르면 참
>: 크면 참
<: 작으면 참
>=: 크거나 같으면 참
<=: 작거나 같으면 참

결괏값은 true, false로 나온다.

===: 값과 타입이 모두 같으면 참
!==: 값이나 타입이 다르면 참

예시)

document.write((1==1)+"<br>") //T 자료형(Type)은 고려하지 않고 값만 비교한다.
document.write((1=="1")+"<br>") //T
document.write((1===1)+"<br>") //T 자료형(Type)도 같은지 고려한다.
document.write((1==="1")+"<br>") //F

결과)

true
true
true
false

7.4 논리 연산자 (logical operator)

&&: AND 연산, x와 y가 모두 참이면 참, 그렇지 않으면 거짓
ex) 로그인
||: OR 연산, x나 y 중에서 하나면 참이면 참, 모두 거짓이면 거짓
!: NOT 연산, x가 참이면 거짓, x가 거짓이면 참

7.5 조건 연산자

max_value = (x>y) ? x: y:

x>y가 참이면 x가 수식의 값이 된다.
x>y가 거짓이면 y가 수식의 값이 된다. ex) 결과 = 서류점수 > 60 && 면접점수 > 60 ? "합격" : "불합격"

기타)

프로토타입 기반 언어

Prototype-based programming is a style of object-oriented programming in which behaviour reuse (known as inheritance) is performed via a process of reusing existing objects that serve as prototypes. This model can also be known as prototypal, prototype-oriented, classless, or instance-based programming.
프로토타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과는 다르게,
객체를 원형(같거나 비슷한 여러 개가 만들어져 나온 본바탕. 프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용할 수 있게 한다.
참고: https://ui.toast.com/weekly-pick/ko_20160603

클래스: 객체에 대한 설계도(템플릿). 객체가 자동차라면 클래스는 자동차의 설계도이다. p.339

생성자 함수
https://developer-talk.tistory.com/281

728x90

저작자표시

'🌳Bootcamp Revision 2023✨ > JavaScript, jQuery, Ajax, JSON' 카테고리의 다른 글

[13] 230113 Ch. 8 자바스크립트 기초: 11. 배열 [K-디지털 트레이닝 13일] (0)	2023.01.13
[12] 230112 [K-디지털 트레이닝 12일] Ch. 8 자바스크립트 기초: 9. 조건문 응용 예제 (0)	2023.01.12
[11] 230111 [K-디지털 트레이닝 11일] Ch. 8 자바스크립트 기초: 9. 조건문, 10. 반복문 (0)	2023.01.11
[10] 230110 [K-디지털 트레이닝 10일] Ch. 8 자바스크립트 기초: 8. 숫자와 문자열 사이의 변환 (0)	2023.01.10

'🌳Bootcamp Revision 2023✨/JavaScript, jQuery, Ajax, JSON' Related Articles

Comments

A Joyful AI Research Journey🌳😊

[9] 230109 Ch. 8 자바스크립트 기초: 1. 자바스크립트의 소개 · 2. 용도 · 3. 위치, 4. 문장, 5. 변수, 6. 자료형, 7. 연산자 [K-디지털 트레이닝 9일] 본문

[9] 230109 Ch. 8 자바스크립트 기초: 1. 자바스크립트의 소개 · 2. 용도 · 3. 위치, 4. 문장, 5. 변수, 6. 자료형, 7. 연산자 [K-디지털 트레이닝 9일]

Ch. 8 자바스크립트 기초

1. 자바스크립트 (Javascipt) p.268

특징

2. 자바스크립트의 용도 p. 271

3. 자바스크립트의 위치 p. 273

3.1 내부 자바스크립트

3.2 외부 자바스크립트

3.3 인라인 자바스크립트

4. 문장 (Statement) p. 277

4.1 블록

4.2 문자 집합과 대소문자 구별 p.278

4.3 주석문

5. 변수(Variable) p.280

6. 자료형 (data type) p. 283

7. 연산자 p. 287

7.1 산술 연산자 (arithmetic operator)

증감 연산자(increment and decrement operator)

7.2 대입 연산자 (assignment operator)

7.3 비교 연산자 (comparison operator)

7.4 논리 연산자 (logical operator)

7.5 조건 연산자

'🌳Bootcamp Revision 2023✨ > JavaScript, jQuery, Ajax, JSON' 카테고리의 다른 글

티스토리툴바