[CODECADEMY] 코드카데미 : Java Script Introduction (사용하는이유 / 매소드(Methods) / data type)

 

자바스크립트 (JavaScript)를 사용하는 이유

 

 

사람으로 비유를 하자면

HTML 로 뼈대를 만들고

CSS로 살과 머리카락을 붙여 이쁘게 만들고

JavaScript로 사람이 때리면 방어를하는 등의 동작을 하게한다. 

 

JavaScript가 동적이라고 하는 이유가 여기에서 나오게 되는데,

예를 들어, 구글 설문지를 사용했을 때 작성을 완료한 후 제출을 누르면

 '제출이 완료되었습니다'하는 문구와 함께 팝업창이 뜨는 것 처럼

사용자(user)가 어떤 어떤 행위를 했을 때 그것에 '반응'할 수 있도록 한다. 

 

/

 

웹에서 검사 - 콘솔창을 켜서 

그 웹페이지에 바로 적용하여 실행시켜볼 수 있다. 

(따로 파일을 만들 필요 없음 = 간편함)

 

 

 

 

---

 

1. console.log()

JavaScript에서 console키워드는 코드에서 사용할 수있는 객체, 데이터 및 작업 모음을 나타냅니다. 

키워드는 JavaScript 언어로 작성된 단어이므로 컴퓨터에서 인식하여 특수하게 취급합니다.

console객체에 내장 된 하나의 조치 또는 메소드 는 .log()메소드입니다. 

console.log()괄호 안에 넣은 내용 을 쓰면 콘솔에 인쇄되거나 기록됩니다.

 

---

 

 

1-1. console.log() data type

 

 

1. Number : 임의의 수, 소수와 번호를 포함 : 4, 8, 1516, 23.42  

 console.log(12.1) 

 

 

1-1-1. 산수 계산

 

• Add: +
• Subtract: -
• Multiply: *
• Divide: /
• Remainder: %

console.log(3 + 4); // Prints 7
console.log(5 - 1); // Prints 4
console.log(4 * 2); // Prints 8
console.log(9 / 3); // Prints 3
console.log(11 % 3); // Prints 2
console.log(12 % 3); // Prints 0

 

---

 

2. String(문자열) :

키보드의 문자 그룹 (문자, 숫자, 공백, 기호 등)을 작은 따옴표 ' ... '또는 큰 따옴표로 묶습니다 " ... ".

주로 작은 따옴표를 사용함. 

console.log('Woohoo! I love to code! #codecademy')

 

2-1. 문자 결합

 

산수에서 쓸 수 있을 뿐만 아니라 

'문자A'+'문자B'를 결합하여 문자A문자B를 만들 수 있다. 

 

console.log('hi' + 'ya'); // Prints 'hiya'
console.log('wo' + 'ah'); // Prints 'woah'

 

 

단어와 단어 사이에 띄어쓰기가 하고 싶으면 

1. 첫번째 글자 맨 뒤에 스페이스

2. 두번째 글자 맨 앞에 스페이스

3. 문자 + '스페이스' +문자

console.log('front ' + 'space'); 
// Prints 'front space'
console.log('back' + ' space'); 
// Prints 'back space'
console.log('no' + 'space'); 
// Prints 'nospace'
console.log('middle' + ' ' + 'space'); 
// Prints 'middle space'

---

 

3. Boolean :

이 데이터 유형에는 두 가지 가능한 값 ( true또는 false따옴표 제외) 만 있습니다. 

부울을 켜기 및 끄기 스위치로 생각하거나 "예"또는 "아니오"질문에 대한 답변으로 생각하면 도움이됩니다.

console.log(true)

 

 

---

 

 

4. Null :이 데이터 유형은 의도적으로 값이 없음을 나타내며 키워드 null(따옴표없이)로 표시됩니다.

console.log(null)

 

 

---

5. Undefined : 이 데이터 유형은 키워드 undefined(따옴표없이) 로 표시됩니다 . 

또한 다른 용도로 사용되지만 값이 없음을 나타냅니다 null.

console.log(undefined)

 

 

---

 

6. Symbol : 언어의 새로운 기능인 Symbol 은 고유 식별자로보다 복잡한 코딩에 유용합니다. 

 

---

 

7. Object : 관련 데이터의 수집

 

 

 

 

---

 

2. JavaScript 안에서 comment 사용 법

다른 개발자나 내가 읽기 쉽도록 comment 작성하기

// Prints 5 to the console
console.log(5);

/*
This is all commented 
console.log(10);
None of this is going to run!
console.log(99);
*/

console.log(/*IGNORED!*/ 5);  // Still just prints 5 

 

---

3. Methods

 

JS 가 가지고 있는 데이터 타입이나/객체뒤에 붙어서 동작하는 함수

 

---

3-1.  data type methods

 

 

 

• 해당 문자열의 문자 추출

사용법 : console.log('문자blahblah'.length)

console.log('Teaching the world how to code'.length)
>>print 30

---

 

• 모든 문자 대문자로 바꾸기 .toUpperCase()

console.log('hello'.toUpperCase()); // Prints 'HELLO'

---

• H로 시작하는지 확인하기 .startWith('H')

console.log('Hey'.startsWith('H'))
// Prints true

---

• 공백 제거 .trim()

console.log('    Remove whitespace   '.trim());

 

 

더 많은 string methods ↓

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

String

 

 

 

---

 

 

4. Built-in Objects

 

 

data type 만으로는 원하는 값을 내는데 한계가 있을 때,

JS에 내장되어있는 객체의 유용한 기능들을 사용하여 값을 추출해 냄

 

 

↓↓ buil-in objects 종류 ↓↓

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

Standard built-in objects

 

예를 들어, 산술보다 더 복잡한 수학 연산을 수행하려는 경우 Math Objects 사용한다. 

 

 

---

 

 

4-1 0~1사이의 랜덤 소수 추출

console.log(Math.random()); 
// Prints a random number between 0 and 1

위의 예 .random()에서 객체 이름(Math)에 도트 연산자(.)를 추가하고 

메소드 이름(rando)을 열고 괄호를 열고 닫음으로써 메소드를 호출했습니다 . 

이 메소드는 0과 1 사이의 난수를 리턴합니다.

 

 

---

 

4-2. 0~50사이의 랜덤 소수 추출 .random()*50

console.log(Math.random() * 50;)

0에서 50 사이의 난수를 생성하려면 위와 같이 결과에 50을 곱하면됩니다.

만약 *100일경우 0~100까지의 소수 추출 됨

 

 

---

 

4-3. 소수를 가까운 정수로 추출

console.log(Math.floor(Math.random() * 50);)

답이 정수인지 확인하기 위해 Math라는 또 다른 유용한 방법 을 활용할 수 있습니다 = Math.floor().

Math.floor()10 진수를 취하고 가장 가까운 정수로 내림합니다. 

다음 Math.floor()과 같이 난수를 반올림 하는 데 사용할 수 있습니다 .

 

---

 

 

4-4. 10 진수 이상의 최소 정수를 반환 하는 메소드  .ceil

console.log(Math.ceil(43.8));
//print >> 44

 

 

---

 

 

4-5. 내장 된 객체에서 숫자가 정수인지 확인 하는 메소드 Number.isInteger

console.log(Number.isInteger(2017.2));
//print >> false

console.log(Number.isInteger(2017));
//print>> true

()안의 숫자가 정수이면 true / 소수이면 false

 

 

 

↓↓ 더 많은 math object의 methos ↓↓

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

Math

 

---