JavaScript기초 -1

유성훈·2022년 10월 14일

프론트앤드 과정 공부

목록 보기

2/16

📌JavaScript란?
웹을 위한 언어이다.
프로그래밍 언어이다, 서버개발, 어플리케이션 개발등에 이용한는 언어이다.
주된 활동 분야 == 웹개발(인터넷을 통해 서비스 되는 웹사이트)
웹개발중 프론트앤드 에서는 html, css, js를 사용한다.

html, css, js차이점
1. html : 웹 콘텐츠를 정의 한다, 마크업 언어
2. css : 웹 콘텐츠를 스타일링 한다., 스타일 시트
3. js : 웹 사이트의 동작이나 상호작용을 정의 한다. , 프로그래밍 언어

📌html, css는 정적인 언어이다. ==> 문서를 실행한면 웹브라우저를 통해 결과가 확인이 된다.
렌더링 == 언어를 해석해서 결과를 보여주는 것.
웹브라우저와 사용자가 상호작용을 하지 않는다 == 정적이다
js는 동적인 언어이다(프로그래밍 언어) : 웹의 기능을 만든다.
사용자와 웹브라우저와 상호작용을 한다.

📌javascript사용법
1.내부 연결 : 보통 바디 태그 바로 위에 script태그 안에 작성 / 암묵적인 약속
2.외부 연결 :외부 .js파일을 만들어 작성 하고 현 파일에 script태그안에 src="외부 파일.js를 넣어 연결")

📌javascript작성 규칙
-대소문자를 구분하여 작성 한다
-코드가 끝날때 ;을 붙여 준다(선택 사항) 필수일 때는 ==> 코드 한 줄에 두개의 명령이 있을 경우 ;로 구분한다
(자바스크립트는 한줄에 여러개의 명령어를 사용X, 사용 하고 싶을 경우 ;으로 구분해 준다.)
==>한줄에 두개 이상의 구문을 사용 하지 않는다(가독성이 나쁘다.)

📌javascript에서의 변수 사용
let 변수이름 = 데이터
let food = '치즈케이크'
console.log(food);
let : 변수를 만들겠다는 의미

🎈var food = '치킨' var로 써도 무방하지만 var의 문제점을 보완한게 let이기 때문에 let을 사용하는게 더 좋다

📌변수 이름 선언 특징
1.오직 문자,숫자 기호$, _만 포함될 수 있다
2.변수명 첫번째 들자는 숫자가 올수 없다
3.이미 존재한느 내용은 변수명으로 사용할 수 없다.

📌타입별 사용 방법
🎈정수형
let num1 = 10;
let num2 = -10;
let num3 = 0;
🎈실수형
let num4 = 3.14; //실수형 데이터
let num5 = -3.14 //실수형 데이터
🎈문자형
let word1 = ""; // 문자열 데이터
let word2 = ''; //문자열 데이터
타입 확인 ==> ex. console.log(typeof num4)

📌상수란?
변하지 않는 값(선언과 초기화를 동시에 할 수 없다.) ==> 선언 될때 값을 가지고 있어야 한다.
상수 선언 방법 => const 상수이름 = 데이터;
let myName = "수정전";
myName = "수정후";
const myPet = "수정전";
// myPet = "수정 불가"; //상수는 변경할 수 없다 에러 발생
console.log(myPet);
console.log(myName);

📌메소드 : window.prompt(question)

const question = "가장 좋아하는 가수는?";
window.prompt(question)    //질문창을 띄운다(대화형 다이얼 로그 박스를 띄운다.)
//결과는 반환 된다.. 웹브라우저에서 입력한 값으로 question이 바뀐다.
//반환이란 : 기능이 값을 돌려주는 것 
let answer = window.prompt(question)
window.alert(answer);

📌템플릿 리터럴 : 데이터 삽입이 가능하다.(문자열의 내부에 데이터를 삽입한다.)
- 백팁을 사용한다 :
let age = 20;
let a = "저의 나이는 ${age}살 입니다."; 
let b = `저의 나이는 ${age}살 입니다.`; //템플릿 리터럴은 이때 사용한다.
(데이터를 삽입 하지 않으면 문자열로 사용되고 데이터를 삽입하고 샆으면 ${}사용 하여 삽입한다.
템플릿 리터럴을 사용하지 않고 문자열 내무에 데이터를 넣는 방법
let d = "제 이름은" + myName + "이고 나이는 " + age + "입니다.";
console.log(d);

📌데이터를 반환 받는 방법
const food = `현재 먹고 싶은 음식은 ${prompt("음식을 적으세요")}`;
console.log(food);
==>웹브라우저 에서 prompt로 값을 받는 창을 띄워 값을 사용자에게 받아 console에 띄운다.
(prompt가 열린다 -> 사용자가 음식 입력 -> console에 입력된 값이 출력 된다)

📌[연산자(산술 연산, 대입 연산)]
-산술연산자

//더하기
let a =3 + 5   //산술연산자는 2개의 항으로 받는다.
console.log(a);  // 값이 바뀌는게 아니라 실행된 값이 보이는 것이다.
//곱셈
let b =3 * 5   
console.log(b); 
//나눗셈 몫
let c =3 / 5   
console.log(c); 
//나머지 연산자
let d =3 % 5   
console.log(d);  //몫이 0이고 나머지가 3이기때문에 3

📌[대입 연산, 복합 대입연산자(대입 연산자 앞에 산술 연산 기호가 붙는다.)]

let num = 10;  //num에는 10아 저장이 되어 있다.
num = 20; // num에 다가 20을 대입 한 것이다.
num += 5; //기존 num의 값에 다가 5를 더해서 저장한다.
console.log(num); //25
num -= 10; //기존의 num에 10을 빼서 대입
console.log(num); //15
const result = 1 + 2 + 3 + 4 + 5; //대입연산은 오른쪽이 모두 끝나고 맨 마지막에 실행 된다.
//산술연산 순서 : * = /  > + = - 
//순서를 바꾸고 싶다면 ()를 사용한다.

📌null vs undifined vs boolean
-null 데이터 : 없다를 의, 의도적으로 데이터가 없음을 의미(값의 의미)
money = null;
console.log(money); 
-undefined : 아직 데이터가 정의 되지 않았음을 나타낸다.(값의 의미)
let money; //money라는 변수를 만들었다.
console.log(money); //undefined상태 이다.
-boolean : 참가 거짓의 여부를 나타내기 위해 사용하는 데이터

📌화면 조작!!
DOM이란?
DOM은 자바스크립트를 사용하여 웹 콘텐츠를 추가, 삭제, 수정을 하거나 마우스로 클릭, 키보드 타이핑
등 이벤트에 대한 처리를 정의할 수 있도록 제공된느 프로그래밍 인터 페이스다.
자바스크립트가 DOM에 관여해서 추가, 삭제등을 하는 한다.
HTML -> DOM ->렌더링
(용어==> 노드 : 선택된 해당 요소를 의미)
문서 인터페이스와 기능들 (window.document) -> DOM에 대한 진입점 역할을 한다.(window는 생략 가능)
API : 다양한 기능을 제공하는 것들.
window의 document속성은 창이 포함한 문서를 참조
==>window.document는 현재 브라우저에 렌더린 되는 문서를 의미, 이 속성을 이용해 해당 문서에 접근
document.querySelector() : 요소를 선택하는 것. 문서 내에서 내가 조작하고 싶은 요소를 선택, 선택하고 싶은 요소는 괄호 안에 적는다(css선택자로 작성).
document는 문서(html,xml,svg)에 대한 공통의 속성과 메서드를 제공(API)
document.querySelector : 해당 메서드는 선택자를 인자로 전달 받아, 전달 받은 선택자와 일치하는 문서내 첫 번째 요소를 반환한다
만약 일치하는 요소가 없다면 null값을 반환한다.
document.getElementById : 해당 메서드는 id를 인자로 전달 받아, 전달받은 선택자와 일치하는 문서 내 요소를 반환한다.
일치하는 요소가 없다면 null값을 반환한다.
(변수명.textContent를 통해 해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성, 해당 값을 읽기, 수정이 가능하다.)
html
<!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>자바스크립트 배우는 날</title>
</head>
<body>
  <h1>노래 제목</h1>
  <p>loveaffraid 뎁트</p>
  <p id="song">상상속의 그대</p>
   
  <script src="./script-05.js">   
  </script>
</body>
</html>
JS
const h1 = document.querySelector("h1")  //현재 선택할 수 있는 것 h1 or p
const p = document.querySelector("p") // 문서 내애서 선택하겠다 
const song = document.getElementById("song");
console.log(h1);
console.log(p);
console.log(song);
console.log(h1.textContent);
console.log(p.textContent);
console.log(song.textContent);
h1.textContent = "변경1" //값을 다른 값으로 변경 가능한다.
p.textContent = "변경2"
song.textContent = "변경3"
📌결론
document.querySelector =>선택자를 인자로 전달 받아, 전달 받은 선택자와 일치하는 문서 내 첫 번째 요소를 반환한다
document.getElementById => id를 인자로 전달 받아, 전달 받은 선택자외 일치하는 문서내 요소를 반환한다.
-window.document : 현재 펼쳐져 있는 문서를 의미한다. == 문서의 DOM(트리 구조의 문서 객체)
-선택한 태그 하나하나도 객체 이다.