JavaScript 3

성지혜·2022년 6월 6일
0

개발

목록 보기
3/3
post-thumbnail

JavaScript Data Types

let length = 16;                               // Number
let lastName = "Johnson";                      // String
let x = {firstName:"John", lastName:"Doe"};    // Object

다음과 같이 정리할 수 있다.

(여기서 볼 수 있듯 숫자에는 “”을 붙이지 않고 사용한다.)

그렇다면 작성을 할 때

let x = 16 + 4 + "Volvo";

이 경우 숫자는 더해지고 “Volvo”는 스트링이기 때문에

결과 값은 20Volvo가 나오게 된다.

📌참고할 것!

JS는 왼쪽부터 인식을 하여 계산을 하게 된다.

따라서

let x ="Volvo" + 16 + 4 ;

라고 작성했을 경우 결과는

Volvo164 가 된다. (모두 스트링,문자로 인식되기 때문)

JavaScript Booleans

불린은 두가지 값이 있다. true false

let x = 5;
let y = 5;
let z = 6;
(x == y)       // Returns true
(x == z)       // Returns false

JavaScript Arrays

  • 브라킷으로 작성이 된다.
  • 콤마 (,)로 분리가 될 수 있다.

eg)

const cars = ["Saab", "Volvo", "BMW"];

JavaScript Objects

=사전

키(key) 가 있고 값 (value) 이 있기 때문에 찾을 수 있다.

(찾으려고 지정해두는 것이다.)

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

이렇게 지정해두었을 때 결과는 John is 50 years old 라고 결과가 나오게 된다.

The Typeof Operator

typeof연산자를 사용하여 변수의 유형을 찾을 수 있다.

예를들어

“John Doe” 는 string이다.

3,4,5 과 같은 숫자는 number이다

여기서 이런 string 인지number인지 유형을 알려준다.

document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof "John" + "<br>" + 
typeof "John Doe";

이건 모두 string으로 나온다


document.getElementById("demo").innerHTML = 
typeof 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);

다음은 모두 number로 나오게 된다


JavaScript Functions

  • Functions는 어떤 테스크를 수행하기 위한 코드블락이다.
  • function의 이름은 문자, 숫자 $와 같은 문자 등을 포함할 수 있다.
  • 파라미터들은 콤마로 분리가 될 수 있다.

Function Invoke

invoke 는 코드를 실행시키는 것이다

  • 어떤 이벤트가 발생할 경우 (버튼을 눌렀다와 같은 경우)
  • 실행되거나
  • 자동적으로 실행된 경우

Function Return

return

을 하게되면 function은 더이상 실행되지 않습니다.

invoke 에 의해 명령이 호출된 경우


예제

<script>
document.getElementById("demo").innerHTML =
"The temperature is " + toCelsius(77) + " Celsius";

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
} 
</script>

여기서, 나는 도큐먼트에서 코드를 가져올것이고

the temperature is () celsius라고 작성할 것이라 작성했다.

그리고 가운데 들어가는 부분을 함수로 작성했다,

function toCelsius (fahrenheit) 을 작성하고 계산 하는 방법/ 입력받을 값을 작성했다.

→ 이렇게 작성할 경우 the temperature is 25 celsius 라는 결과가 나온다


또한 함수 function에 받을 값에 대한 변수를 {} 중괄호 안에 작성할 수 있다.

다만 이 변수는 작성된 부분에 대해서만 영향을 준다.

즉 전체 문서에 대한 변수를 만드는 것이 아니다.

<script>
myFunction();

function myFunction() {
  let carName = "Volvo";
  document.getElementById("demo1").innerHTML =
  typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML =
typeof carName;
</script>
profile
UXUI디자인

0개의 댓글