[Day 19 | WebUI] CSS, JavaScript, 과제(호이스팅, 자바스크립트 함수)

 

비주얼 스튜디오에서 html preview 앱을 설치하면 html을 미리보기를 바로할 수 있다.

<div>는 영역이다. 

영역 태그 내에는 색을 입힐 수 있다. 

 

문서 상에서 박스 내의 여유공간 

margin : 바깥 여유 공간(외부 여백) 

padding: 내부 여백

 

 

background

두 개의 이미지를 합쳐서 하나의 백그라운드로 만들 수 있다. 

 

 

 

 

 

Reference: 

https://bangu4.tistory.com/25

[HTML/CSS] 패딩과 마진차이

 

 

 

 

핸들링할 수 있는 것을 어떻게 할 수 있는지 고민해야.

 

자바스크립트도 버전이 있음

버전에 따라, 브라우저에 따라 코드가 달라질 수 있다. 

 

어떤 기능은 서버가 아닌 클라이언트 쪽 기능을 쓴다. 

그래서, 웹 브라우저가 다르면 언어가 다를 수 있고,

너무 최신 언어를 쓰면 브라우저에서 지원이 안될 수 있음. 

 

자바는 콘솔창에서 표현을 하지만

자바스크립트는 웹 콘솔에서 쓴다. 

 

정리하면 

1. 버전을 탄다. 

2. 자바스크립트는 계속 변화할거다

3. 흐름자체는 자바와 유사하다. 

 

 

<script> </script> 사이에 넣어주면 된다!   

브라우저에 종속적일 수 밖에 없음 

 

 

 

 

주석처리!

 

 

모든 언어별로 주석은 다르니 헷갈려하지 않기! 

 

 

아래의 경우처럼 하나 때문에 전체 자바스크립트가 안돌 수 있음 

 

 

 

산술 연산, 비교, 변수 선언 모두 가능! 

 

 

조건절 if문 

 

 

 

자바스크립트의 Hoisting(호이스팅)

자바스크립트 내의 모든 변수는 메모리에 먼저 올라간다. 

 

 

 

 

사실 오늘 한 것들은 머리 속에 넣고 있으면 물론 좋겠지만

이런 기능이 있다 정도만 알아두고, 

그때 그때 찾아써도 될 것 같은 느낌인데...

 

 

---

HTML과 CSS는 아래의 폴더에서 나중에 찾아보기 

 

 

 

JavaScript는 아래에서 찾아보기 

자바에서 한 것이라 크게 다르지 않은듯

 

---

 

과제1: Hoisting에 대한 정리

hoist는 건축/건설이나 화물 운반에 사용하는 장비로, 화물 등을 들어올리는 업무를 수행한다. 

즉, 아래에 위치한 것을 위로 끌어올리는 역할을 하는 장비이자, '들어올리다'라는 의미를 가지고 있다. 

 

자바스크립트에서 호이스팅은 코드에 선언된 변수 및 함스를 코드 상단으로 끌어올리는 것을 말한다. 

헷갈릴 수 있는 부분은, 

변수의 선언과 할당 내용 모두를 상단으로 끌어올리는 것이 아니라, 

변수의 선언과 할당이 동시에 일어나지 않고 분리되어 

선언부분만 최상위로 끌어 올린다.

 

* 선언: 변수를 초기화하는 구문

* 할당: 변수에 값이 부여되는 것 

 

 

아래의 구문에서, 

일반적으로라면 에러가 뜨겠지만, 

아래의 구문으로부터 a1의 선언(초기화) 부분이 상단으로 올라오게 되어

에러가 아닌 undefined(초기화된 상태)으로 뜬다! 

호이스팅의 우선순위

변수 및 함수 선언시, 선언 구문이 유효범위의 최상단으로 호이스트된다는걸 이젠 알았다. 

그러면 변수 선언과 함수 선언의 우선 순위는? 

변수 선언 먼저 --> 그 다음 함수 선언 호이스트!

 

 

 

 

 

 

 

과제2: 자바스크립트 함수 정의 

 

자바스크립트에서 함수는, 코드를 그룹핑하고 묶어서 정리해주는 역할을 한다.
이 힘수를 나중에 언제든지 꺼내서 재사용할 수 있다.

함수 선언

Javascript 에서 함수를 선언하는 방법은 3가지가 존재한다.

1. function statement 함수 선언문
2. function expression 함수 표현식
3. Function 생성자

그 중 대표적으로 사용되는 방법은 함수 선언이다.

function functionName() {
   console.log('Hello World!');
};

function은 함수 생성을 알리는 말이다.
functionName은 함수의 이름이자, 해당 함수의 성격을 요약한다. (*꼭 뒤에 괄호가 붙어야 한다.)
중괄호 내의 명령어는 함수를 불러왔을 때 함께 실행된다.

함수 불러오기

함수는 아래의 방법을 통해 불러올 수 있다.

console.log(functionName()); // Output: Hello, World!

console.log를 실행시켜 그 안에 함수를 담으면, 함수가 실행된다.

Parameter(매개변수) and Argument(인자)

어떤 함수는 매개변수를 갖고, 그 매개변수를 함수 실행에 사용하기도 한다.

function calculateArea(width, height) {
   console.log(width * height);
};

함수를 정의하는 괄호 내의 (width, height)가 매개변수이다.
매개변수는 함수 안에서 변수처럼 이용되고 있다.

코드를 불러와 실행할 때는, 이 매개변수가 인자의 성격을 갖는다.
보다 정확하게 '값으로서의 인자'의 성격을 갖는다.

Default Parameter (기본값 매개변수)

Default Parameter는 매개변수의 기본값을 미리 정해놓는 것이다.

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}

위 함수처럼 name이라는 매개변수의 값이 'stranger'라고 미리 지정했을 때,
함수 내에서 그레이브 악센트 내에 ${}를 이용함으로서 Default Parameter를 이용할 수 있다.

이 Default Parameter를 일시적으로 변경해서 사용하고 싶을 경우,
아래와 같이 소괄호 내에 다른 문자를 넣어주면 된다.

greeting('Jean') // Output: Hello, Jean!

함수 표현

함수 표현은 자바스크립트의 유연성을 활용한 함수 선언 방식이다.

const calculateArea = function(width, height) {
  const area = width * height;
  return area;
}

위의 함수와 마찬가지로 함수의 이름은 대게 생략된다. 대신 변수의 이름을 통해 대신 함수를 특징지을 수 있다. 이처럼 이름이 없는 함수를 무명 함수라고 한다.

이 함수를 불러올 때는 변수이름과 함수의 인자를 입력하면 된다.

calculateArea(width, height)

Arrow Functions (화살표 함수)

Arrow Functions는 2015년에 업데이트된 자바스크립트(ES6)의 기능 중 하나이다. ES6는 2016년부터 브라우저에 적용되기 시작했다.

Arrow Functions는 간단한 기호로서 함수를 표현하기 때문에 함수를 선언할 때 'function'이라는 글자를 쓰지 않아도 된다.

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

Arrow Functions를 활용해 함수를 선언하는 방식이 널리 퍼졌고, 이 방법이 다른 것보다 간편하기 때문에 잘 익히는 것이 중요하다.

함수 바디 내의 명령문이 한 줄일 경우, 더욱 간단하게 바꿀 수 있다.

const squareNum = (num) => {
  return num * num;
};
// 위의 함수를 아래와 같이 변경할 수 있다. (소괄호와 중괄호, return 명령어가 없어졌다.) 
const squareNum = num => num * num;

 

 

 

 

 

참고:
https://m.blog.naver.com/tcloe8/221549773024

[자바스크립트] 호이스팅(hoisting)이란

https://velog.io/@jeanbaek/JavaScript-%ED%95%A8%EC%88%98-%EB%AC%B8%EB%B2%95-%ED%8C%A8%ED%84%B4-%EC%A0%95%EB%A6%AC

JavaScript 함수 문법 패턴 정리

https://pks2974.medium.com/javascript%EC%99%80-function-%ED%95%A8%EC%88%981-a35281b56f8a

Javascript와 Function 함수1