본문 바로가기

developer/Udemy - 100일 코딩 챌린지

[Udemy - 100일 코딩 챌린지] 2/8 개발공부일지 - Java Script 등장

어제는 피곤해서 커밋만 하고 도서관 탈출했다.

오늘은 강의 들으면서 필요한 거 그때그때 블로그에 정리하면서 하는 중!

 

javascript는 브라우저에서 실행되는 프로그래밍언어다.

javascript 사용하려면 head 태그 안에 <script></script> 요소를 만든다.

javascript 사용을 위한 <script> 태그도 html 태그에 속한다.

 

html에서 javascript를 사용하려면

1. head element 안에 script 요소에 직접 입력하든지

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Javascript Introduction</title>
    <script>
      let greetingText = "Hi I'm hwanhee";
      let age = 32;
      // let -> variable declaration.
      alert(greetingText);
      greetingText = "hi I am really hwanhee!!!";
      alert(greetingText);
      alert(age);
      age = 123;
      alert(age);
    </script>
  </head>
  <body></body>
</html>

2. script 요소에서  src 속성을 통해 java script 파일을 연결한다. src 속성 사용하면 <script> </script> 태그 사이에 코드 입력하면 안 된다고 함. 막상 해보니까 못 불러옴. 왜 그렇지..

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Javascript Introduction</title>
    <script src="app.js"></script>
  </head>
  <body></body>
</html>

------------------------------------------------------------------------------------

let greetingText = "Hi I'm hwanhee";
let age = 32;
// let -> variable declaration.
alert(greetingText);
greetingText = "hi I am really hwanhee!!!";
alert(greetingText);
alert(age);
age = 123;
alert(age);

외부 *.js 파일에 script 태그 있으면 안 된다. by 공식문서 https://www.w3schools.com/tags/att_script_src.asp

 

그리고 헷갈려서 공식문서에서 또 가져왔다.

Variable은 value 를 저장하는 container다.

valuestring(text), number, array 등등 있음.

 

array

에는 string과 number 함께 입력가능 (List of data!!!)

let age = 32;
let userName = 'Hwanhee';
let hobbies = ['Sports', 'Cooking', 'Reading', 1, 2, 3];

array는 0번부터 index number 시작함.

 

Object

object  는 array 상위 호환이라고 해야 할까.

let job = {
  title: "Developer",
  place: "New York",
  salary: 500000,
};

alert(job.place);

Variable 최초 선언할 때만 let 기입.

let age = 32;
let age = 33; (X)
age = 33; (O)

 

Function

let adultYears;

function calculateAdultYears() {
  adultYears = age - 18;
  alert(adultYears);
}
calculateAdultYears();

age = 45;
calculateAdultYears();

 

함수 안에서 선언한 변수는 함수 안에서만 유효함.

전체 코드에선 선언되지 않은 것으로 봄.

 

위에 코드는 함수안에 변수를 선언하고 함수를 호출해서 에러가 없지만,

아래 코드는 상황이 다름. 함수 외부에서는 선언되지 않은 변수(adultYears)를 호출했기 때문에 오류 뜸.

function calculateAdultYears() {
  let adultYears = age - 18;
}
calculateAdultYears();
alert(adultYears);

age = 45;
calculateAdultYears();
alert(adultYears);

오늘의 마지막

함수 내부 변수 선언할 때 함수 외부 값 사용

let age = 32;
let totalAdultYears;

function calculateAdultYears(userAge) {
  return userAge - 18;
}

totalAdultYears = calculateAdultYears(age);
alert(totalAdultYears);

age = 45;
totalAdultYears = calculateAdultYears(age);
alert(totalAdultYears);

간략하게 얘기하면 calculateAdultYears에서의 userAge에다가 age를 가져다 쓸 거다.

 

function calculateAdultYears(userAge, anotherParameters) 와 같이 parameter 여러개 사용 시 콤마(,)로 구분한다.

 

끝!