javaScript #1 :: Media query | 함수의 호출과 정의 | 변수 | return | 증가연산자 | 비교연산자 | 논리연산자

 

Media query

: Responsive Web을 구현하기에 단말기의 유형과 특성이나 수치에 따라 웹사이트나 앱의 스타일 수정시 용이하다.
: @media로 작성

• all : 모든 장치에 적합
• print : 인쇄 출력 미리보기 화면에서의 문서
• screen : 화면 대상
• speech : 음성 합성장치

@media only screen and (min-width: 769px) {
}

@media - media쿼리 작성 시작 | only screen - 디바이스에 상관없이, 화면에 보이는 스크린이면 O | and(min-width : 769px) - 내가 주고 싶은 조건. 이 조건을 기준으로 CSS가 적용된다.

 

자바스크립트란?

---

: 웹페이지와 상호작용하도록 만들어진 언어로 다이나믹하고 인터랙티브하게 만드는 일을 한다. 브라우저에서 사용자의 행동을 처리, 데이터 저장, 네트워크 응답과 요청을 처리하는 역할을 한다.

❗️브라우저 O < HTML file < HTML 파일에서 JavaScript file(.js) 연결

 

알림창 띄우기 (alert)

alert("안녕! 오래 기다렸니?");

 

함수란?

---

: 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록

 

함수의 정의와 호출

: 함수 정의 만으로는 함수의 내부가 실행되지 않는다.
: 함수 이름을 부르면 함수 내에 있는 코드가 실행이 된다. == 함수호출 

//함수정의

function 함수이름(){
	//함수 실행 단위//return
}

//함수호출

함수이름();

 

변수

var 변수이름 = 값;

• 한 파일에서 같은 변수 이름을 중복해서 사용X
• 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수.
• 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나.
• 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.
• 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 쓸 것.

 

변수선언 방식

1. camelCase
   : 낙타의 등처럼 울퉁불퉁하기에 붙여짐, 첫 단어는 소문자로 작성해주고 단어가 새로 시작할 때부터 대문자로 써준다.
2. snake_case
   :변수이름에는 - 사용X, _를 사용해준다.

 

let과 const

: var과 동일하게 변수를 생성할 때 사용한다.

• let : 변수 값 수정가능하다.
• const : 변수 값 수정불가능.

 

변수 값 수정

: 값을 먼저 변수 생성시 저장하고, 그 후에 값 수정이 가능하다. 수정시 변수 생성시 사용했던 let은 제외시켜야 수정이 가능하다. let키워드는 변수를 새로 생성할 때만 사용이 가능하다.

let name = "gwonRan";
name = "code";

let name = "gwonRan";
let name = "code";
//위 두 줄 처럼 같은 변수 이름을 중복해서 생성하면 안된다. 

 

함수의 반환 (return)

: 모든 함수는 반환(return)을 합니다. 모든 함수는 반환을 하지만, return을 생략할 수도 있습니다. 함수가 반환을 생략하면 undefined라는 값을 반환합니다. 함수를 호출하고 변수에 담아 console.log를 확인해도 되고, 함수 호출과 동시에 console.log로 확인해봐도 됩니다.

function noParameter() {
  return 10;
}

const result4 = noParameter();

console.log(result4);

 

 

Math expressions

• num++ (사후 증가 연산자)
  : 첫 리턴시 처음 변수에 담긴 원래의 값을 내어주고 다음 변수 출력시에는 더한 값을 내어준다. 쉽게 얘기하자면 증가되기 전의 값을 우선적으로 넘겨준 후 자기 자신을 증가 시킨다.

let num = 1;
num++;
console.log(num); 

//num = num + 1; 

• num--
• ++num (사전 증가 연산자)
  : 자기 자신을 증가 시킨 뒤 넘겨준다.

The Difference between ++num vs num++

 

 

if

if(조건) {

if 조건이 성립되면 실행되는 코드들

} else if(조건) {

else if 조건이 성립되면 실행되는 코드들

} else {

 위의 조건에 충족되지 않았을 때, 실행되는 코드들

}

 

 

비교연산자

: 비교연산자가 있을 때에는 비교연산자 기준으로 왼쪽/오른쪽 나눠서 코드를 실행한다.

• === : 값이 서로 같은지 비교하는 "동등 비교 연산자" | 엄격한 비교연산자
• ! == : 틀린지는 비교하는 것
• == : 동등 비교연산자 | 느슨한 비교연산자

 

논리연산자 (or, and)

• or == ||
• and == &&

if (age > 65 || age < 21 && res === "한국")

/*: 이 경우 3가지의 의미로 해석될 수 있기에 이것을 방지하고자 
내가 원하는 결과로 명확하게 보일 수 있도록 괄호를 묶어 if문을 사용해준다. 
하나의 조건에 많은 조건을 논리연산자를 통해 넣을 수 있음.*/