JavaScript - javascript basic memo [개발스터디 기몬]

자바스크립트
초기에는 
웹브라우저에서 사용하도록 만들어진 언어 // 


웹 페이지에서 개발자 도구 오픈 ctrl +shift + I
elements = DOM


nodejs 설치 
eclipse contants assistant + plug in 
1. node js 설치
2. Tern 설치 - 수동 다운로드를 추천 .. 속도의 차이 
수동 다운로드 : https://github.com/angelozerr/tern.java/releases
3. eclipse에 tern 설치 

------->> eclipse - help - install new software - add
- archive - term.repository zip file / add
- select all --- next --- accept license agreements checked/ -
-- finish - 
Preference > Web > Client-side JavaScript > Tern > Server > Node.js > Native Node.js 클릭
navtiv path : 설정 opt - nodejs-node.exe - apply and close- 

Project > 우측마우스 > Configure > Convert Tern Project 클릭
Bootstrap, Browser, Browser Extension 클릭  - Apply and Close

 

---

node.js 활용 문법 학습.. 

avascript 는 대소문자 구분 **** !!!!!

javascript에서  변수를 만들 때 현재는 
보편적으로 let을 사용해서 초기화를 함 . 

과거 // 변수구분을 하지 않거나 var를 사용함
var는 블록스코프를 따라가지 않음 
ex ))) for(조건에 var i=0; ~~~)
var i 는 for문 조건에 블록 스코프를 따르지 않고 
외부에서도 구분없이 사용을 하기에 권장하지 않음. 

스코프의 차이와 최신 버전 권장에 따라 let을 사용함
또 다르게 사용하는 ' const '

what is const? - java의 final과 같은 존재 


javascript에서 변수를 만드는 방법 
: 1.  num = 10; // 가능은 하지만  X 쓰지 않는다
: 2.  var num = 20; // 가능, but 권장하지 않음
: 3.  let num = 30; // 가능, 권장함. 
: 4.  const num = 40;


javascript 에서 biginteger type을 선언하려면 
정수에 n을 붙여 준다 
let num = 12345678901234567890n 

모든 산술 연산은 실수형으로 연산된다. 


> "20" + 10
'2010'

단항연산자를 사용해서 문자열에서 
산술식을 구현할 수 있음.
 
> +"20" +10
30


백틱을 사용한 정수 문자열화
> `${num}, ${num2}`
'100, 12345678901234567000'
> `${num}, ${num2}`
'100, 12345678901234567000'


멀티라인을 사용할 때 ` 사용
멀티라인 스트링을 만들 수 있고 
스트링안에 표현식을 구현할 수 있음. 

> `
... num=
... ${num}
... `
'\n\n\nnum=\n100\n\n'

> let str = `
... java
... python
... html
... css
... javascript
... `
undefined
> console.log(str);

java
python
html
css
javascript



function을 사용해서 함수 생성가능. 

delete는 객체의 속성을 삭제할 때 사용. 
javascrip interpriter language는 객체의 속성을 삭제 할 수 있음.

// 객체 리터럴 
> let x =
... {
... line : 10,
... column : 20,
... fg : 31,
... bg : 41,
... ch : 'A',
... }

> x
{ line: 10, column: 20, fg: 31, bg: 41, ch: 'A' }

> typeof x
'object'
> x.line
10
> x.fg
31

// delete 사용.
> delete x.line
true
> x
{ column: 20, fg: 31, bg: 41, ch: 'A' }



스크립트 타입 언어는 문자타입이 없음 / 문자열 만 있음

>>"A".codePointAt(0)
>> 65 

>> String.fromCodePoint(65)
>> 'A'


문자열은 '' 와 "" 의 구분을 하지 않음.
이스케이프문자 \ 역슬래시
\t 수평 탭
\n 행 바꿈
\\ 역슬래시
\' 작은 따옴표 
\" 큰 따옴표
문자열 연결  + 


==============================

section 03 자바스크립트 기초 

자바스크립트란?
자바스크립트(Javascript)
- 정적인 HTML 콘텐츠에서 사용자와 상호작용하며 동적으로 변경하는 부분을 담당
- 객체(Object) 기반의 스크립트 언어로 기본적으로는 웹 브라우저에서 
해석되는 인터프리터 언어임
- Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에도 사용할 수 있음
 
자바스크립트의 특징
- 동적이며 타입을 명시할 필요가 없는 인터프리터 언어
- 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있음
- HTML의 내용, 속성, 스타일을 변경할 수 있음
- 이벤트를 처리하고 사용자와의 상호작용을 가능하게 함
- 서버와 실시간 통신 기능을 제공



==============================

자바스크립트 기본 용어와 출력 방법.

 자바스크립트 기본 용어
- 표현식 - 값을 만들어 내는 간단한 코드
- 문장 - 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위
- 종결 - 문장 마지막에 세미콜론(;) 또는 줄 바꿈

273;
10 + 20 + 30 * 2;
var name = '윤' + '인' + '성';
alert ('Hello JavaScript' );

273
10 + 20 + 30 * 2
'JavaScript'

---

자바스크립트 기본 용어

- 키워드 - 자바스크립트를 처음 만들 때 정해진 특별한 의미가 부여된 단어
 >>> break / else/ instanceof / true / case / false / new / try / catch / finally / null 
typeof/ continue / for / return / var / defualt / function / switch / void / delete / if / this
while / do / in / throw / with / const / class

- 식별자 - 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어
: 식별자 생성 규칙. 
- 키워트를 사용하면 안됨
- 특수 문자는 _와 $만 허용
  - 숫자로 시작하면 안됨
- 공백은 입력하면 안됨
식별자 생성 규칙 
- 생성자 함수이름은 항상 대문자로 시작
- 변수, 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작
- 여러 단어로 된 식별자는 각 단어의 첫 글자를 대문자로. 

자바스크립트의 식별자 종류
구분  단독으로 사용  다른 식별자와 함께 사용
식별자 뒤에 괄호 없음  변수 속성
식별자 뒤에 괄호 있음  함수  메서드

주석 - 프로그램 진행에 전혀 영향을 주지 않는 코드로, 프로그램을 설명하는 데 사용
// 주석문 ,  /* 주석문 */ ctrl+shift+c

자바스크립트 출력 
 - 가장 기본적인 출력 방법 - alert() 함수를 사용해 웹 브라우저에 경고 창을 띄우기
alert() 화면상의 출력 //// console.log() - 콘솔 화면에 출력


자료형과 변수 
 자료형 : 숫자, 문자열, 불(boolean), 비교 연산자, 논리 연산자 
 숫자 
- 가장 기본적인 자료형 
- 정수와 실수를 구분하지 않음 

javascript에서 변수를 만드는 방법 
: 1.  num = 10; // 가능은 하지만  X 쓰지 않는다
: 2.  var num = 20; // 가능, but 권장하지 않음
: 3.  let num = 30; // 가능, 권장함. 
: 4.  const num = 40; // java의 static final과 유사함. 


javascript 에서 biginteger type을 선언하려면 
정수에 n을 붙여 준다 
let num = 12345678901234567890n 

모든 산술 연산은 실수형으로 연산된다. 



 문자열 
- 문자 집합 
- 'abcdefg', 'Hello World'. '안녕하세요.'

문자열은 '' 와 "" 의 구분을 하지 않음.
이스케이프문자 \ 역슬래시
\t 수평 탭
\n 행 바꿈
\\ 역슬래시
\' 작은 따옴표 
\" 큰 따옴표
문자열 연결  + 

참거짓 (boolean)
- true / false 

비교 연산자 
- 두 대상을 비교할 수 있는 연산자
>=, <=, >, <, ==, !=

논리 연산자 
!, &&, || 

변수 
- 값을 저장할 때 사용하는 식별자 
: 변수 선언 / : 변수 초기화
변수 선언과 초기화 : >> var pi = 3.14159265;

변수 선언과 값 할당 
: > var pi;  // 변수 선언
: > pi = 3.14159265; // 값 할당

변수에 저장된 값 출력
: > var pi = 3.14259265;
:> alert(pi);

 

조건문 
 : if 조건문 
- 조건이 true 이면 문장을 실행하고 false 이면 문장 무시
- 실행 문장이 한 행이면 중괄호 생략 가능함
- 실행 문장이 여러 행이라면 중괄호 필요함

if (조건) {
       문장
}

 : if else 조건문 
- 두 가지로 분명하게 나뉘는 상황에서 편리하게 사용 가능
- 실행 문장이 한 행이면 중괄호 생략 가능함
- 실행 문장이 여러 행이라면 중괄호 필요함

if (조건) {
       문장 
} else {
       문장
}  

 : 중첩 조건문 if else if 조건문

if (조건) {
       if (조건) {
             문장 
       } else {
             문장
       }  
} else {
       if (조건) {
             문장 
       } else {
             문장
       }  
}  


: 중첩 조건문의 중괄호를 생략했을 때 만드는 조건문 
- if else if 조건문

if (조건) {
       문장 
} else if (조건) {
       문장
} else if (조건) {
       문장
} else {
       문장
}

반복문
: 배열 
- 변수 여러 개를 한꺼번에 다룰 수 있는 자료형
- 요소 : 배열 내부에 입력된 자료 하나하나
- 배열 내부에 다양한 자료형을 입력 가능
- 배열 전체를 출력하면 요소가 순서대로 표시



: while 반복문
- 가장 기본적인 반복문
- if 조건문과 형식이 비슷하지만,
if 조건문과 달리 불 (bool) 표현식이 참이면 중괄호 안 문자을 계속 실행

while (조건) {
       문장
}

 

: for 반복문

for (초기식; 조건식; 종결식) {
  문장
}