100일코딩챌린지 강의정리 javascript 1

html파일에 외부 js파일 연결하기

<script src="app.js"></script>

js파일링크의 위치에 따라 html파일을 읽어오는 타이밍에 차이가 있음.
요즘은 script태그를 head에 두고 defer 속성을 추가하는것을 권장함.
<script defer src="app.js"></script>
=> defer: 전체문서를 분석할때까지 javascript의 실행을 지연시키는 속성
html문서를 읽어들이지 않은 상태에서 스크립트를 먼저 실행할 경우 접근할 객체를 찾지못해 오류가 생기게 됨.
자세한건 아래의 링크 참고.
[HTML] script 태그의 위치에 따른 차이점

변수

• 레이블 된 일종의 데이터 용기.

• 관례적으로 변수명의 첫 문자는 소문자 (camelcase사용)

• 전역변수: 코드 어디에서든 참조할 수 있는 변수
  지역변수: 특정 영역(함수)에서만 참조할 수 있는 변수
  참고링크

• 키워드: let

• 변수선언

  let greetingText = 'hi!!';
  alert(greetingText);

• 배열

  let hobbies = ['Sports', 'Cooking', 'Reading'];
  console.log(hobbies[2]);

• 객체: 하나의 변수로 다양한 속성 묶기

  let job = { title: 'Developer', place: 'New York', salary: 50000 };
  console.log(job.salary);

  => 세 개의 변수를 따로 선언하여 사용하는것도 가능하지만 그럴경우 세 변수 사이의 연관성을 일일히 기억해야하므로 객체를 사용한다.

javascript는 위에서부터 순서대로 실행됨.

상수

• 변수와 반대되는 개념으로, 초기값을 정의한 후 값을 변경할 수 없는 변수.
• 상수사용 시 변경되지 않는 값이라는 것을 한눈에 알 수 있는 장점이 있음.
• 키워드: const
• 선언

  const inputElement = document.getElementById('product-name');

• 참고로 함수 내에서 지역변수를 상수로 선언했을 경우 함수가 끝날때 지역변수는 메모리에서 삭제되므로 함수의 실행횟수가 여러번이라도 상수선언은 문제를 야기하지 않는다.
  => 함수를 실행할 때마다 새로운 상수를 선언한 것과 같음.

함수

• 함수 내에서 선언한 변수는 해당 함수 내에서만 사용가능.
• 이때 전역변수와 같은 이름의 지역변수를 새롭게 정의할 경우 두 변수는 서로 별개로 간주됨 (이를 변수쉐도잉이라 함)
• 함수 내에서는 전역변수등 외부의 변수를 참조하지 않는것이 좋음. 아래의 예시 참고.

let age = 32;
age = 48;
let adultYears;
function calculateAdultYears(userAge) {
  return userAge - 18;
}

adultYears = calculateAdultYears(age);
console.log(adultYears);
// 출력결과: 30

메서드

메서드란 객체 안의 함수를 말한다. (참고로 객체 안의 변수는 속성임.)

let person = {
  name: 'kim', // 속성(Property)
  greet() {    // 메서드(Method)
    alert('Hello!');
  },
};
// greet(); // 기존의 함수와 같은 방법으로 사용불가
person.greet;	// 객체를 호출한 후 메서드를 호출하여 사용

연산자

• +: 덧셈 or 두 개의 문자열을 연결
• -: 뺄셈
• *: 곱셈
• /: 나눗셈
• %: 나눗셈의 나머지
• ++: num = num + 1의 약식표기
• --: num = num - 1의 약식표기
• +=: num = num + 숫자값n의 약식표기
• -=: num = num - 숫자값n의 약식표기
• *=: age = age * 숫자값n의 약식표기
• /=: age = age / 숫자값n의 약식표기

문자열 연산

+기호를 이용해 문자열을 서로 연결할 수 있다.
단 -기호연산은 불가능. (-연산은 숫자가 아닐 경우 NaN이 출력됨.)

console.log('KIM' + 'ej');
// 출력결과: KIMej

~ 알아두면 유용한 문자열 메서드 ~

• 문자열.length : 문자열(배열)의 길이를 구함
• 문자열.toUpperCase() : 문자열을 모두 대문자로 변경한 값을 구함