입문자를 위한 자바스크립트 기초 강의_JS기초01

* HTML + CSS(웹 페이지는 이렇게 생겼어)에서 하나 더 추가 
=> JavaScript : 브라우저/웹페이지에 동작을 추가 가능하게 하기.

* 웹 콘텐츠에 JS 추가하는 방법으로는 두 가지가 있다.
첫 번째는 HTML 내부에 작성하기. 
두 번째는  .js 확장자로 자바스크립트 문서 만들고 html 문서에 파일 연결시켜주기. 이때 <script> 태그로!

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

* 자바스크립트에서 객체란?

어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단.
자바스크립트 코드 내에서 객체란 '값 또는 기능을 가지고 있는 데이터'라는 의미.
여기서 새롭게 알게 된 사실!

웹브라우저는 소프트웨어 세계에 존재하는 사물 즉 객체이다.
대표적인 웹브라우저 객체는 window. 이것을 이용해서 웹브라우저에게 다양한 명령어를 내릴 수 있다.

객체 뒤에 점을 찍으면 값 또는 기능을 사용할 수 있다.
구체적으로 객체.데이터 or 객체.기능()으로 사용할 수 있고 예로는 아래와 같다.
여기서 객체가 가진 기능을 우리가 "메서드"라고 부른다고 한다.

// 경고창 띄우기. 확인을 누를 시 경고창 사라짐.
window.alert('hello world')

* 콘솔(console)

위의 이미지에서 저 초록 부분이 디버깅 콘솔(크롬 개발자 도구로 보이는 거 그거!!!!)이다.
console은 window의 하위 객체이고 JS코드에서 window는 생략 가능하다.
코드에서 세미콜론은 하나의 구문이 끝났다는 것을 의미하는데 JS에서는 생략 가능하다.
프로그래밍 언어 처음 배울 때 세미콜론 안 찍어서..오류 내고 그랬었는뎁... 하핳....

* 변수와 상수

데이터를 기억하는 수단이며 변수에 데이터를 대입하면 그 데이터 값 대신 변수를 사용할 수 있게 된다.
키워드 let을 활용해 변수를 선언하며 데이터는 얼마든지 변경할 수 있다.
변수 이름은 공백은 안되고 특수문자는 $랑 _만 사용 가능하고,
let 같은 키워드 안되고 이 정도만 지키면 자유롭게 변수명 지어서 사용 가능!
상수는 키워드 const를 활용해 선언해 줄 수 있고 변하지 않는 값이기 때문에 반드시 값 초기 설정도 필요하다.

// 변수 선언
let test_1 = 10; 
console.log(test_1)
test_1 = '테스트용'
console.log(test_1)

// 상수 선언
const pi = 3.141592;
console.log(pi);

 

* prompt

window 객체의 prompt 메서드는 사용자로부터 문자열을 입력받는 다이얼로그를 생성해준다.
입력받은 문자열은 반환 가능하고 이걸 가지고 코드에서 적절히 사용해주면 된당.

const promptMessage = "프롬프트 다이얼로그에 표시될 문자열";
const message_result = prompt(promptMessage)
console.log(message_result)

 * 템플릿 리터럴

템플릿 리터럴이란 표현식ㅇ르 내장할 수 있는 문자열 표현법이다.
데이터 삽입시에는 ${} 기호를 사용하며, 삽입된 데이터는 문자열의 맴버가 된다.
데이터를 대신해 사용할 수 있는 것이라면 템플릿 리터럴에 삽입될 수 있다.
변수, 숫자, 문자열, 데이터 반환 메서드 모두 가능.

let number = 21;
console.log(
    `제가 좋아하는 축구선수는 ${prompt("좋아하는 축구 선수는?")}, 그의 등번호는 ${number}`
)

* 연산 / 연산자

우리가 아는 사칙연산에다가 나머지 연산자 % 하나 더 생각해주자.
복합 대입 연산자는 +=, -= 이케생긴 연산자들을 말한다.
강의 들으면서 코드로 테스팅한거 보면 바로 이해 가능😶

https://www.inflearn.com/course/입문자-자바스크립트-기초강의/dashboard

입문자를 위한 자바스크립트 기초 강의 - 인프런 | 강의