- ECAMAScript = specification (설명문 같은?)
주석 설정 방법
// : 한줄한줄 주석거는 방법
/ / : / 시작에 넣고, 몇줄 후에 / 하면 블럭 주석
임의의 변수값을 정할 때, 영어 띄어쓰기 구분법
'Days of week'이라는 변수를 코드로 입력 시, 띄어쓰기가 불가하기에
첫번째 영문은 소문자로 시작하고, 띄어쓰기 부분은 대문자로 할 것!
ex : Const daysOfWeek="monday"
***!!중요!! 자바스크립트의 기본 구성
ex : console.log (a)
- console : object
- log : 함수 (기능을 얻을 수 있는 키)
* 이는 즉, object안에 함수가 들어가는 구조
-> console(오브젝트).log(오브젝트 안의 함수) (argument(인자))
function 함수 구성 시에도,
function 함수명 (인자1, 인자2) {
console.log ("lalala", 인자1, 인자2)
}
함수명 ("ㅋㅋㅋ"//이게 인자1 , "ㅎㅎㅎ"//이게 인자2)
-> lalalaㅋㅋㅋㅎㅎㅎ (출력)
/* console.log ("lalala", 인자1, 인자2)
위 코드에 "", 등 깨끗하게 코딩하기 위해서는
console.log(`lalala${ㅋㅋㅋ}${ㅎㅎㅎ}`)
-> lalalaㅋㅋㅋㅎㅎㅎ 출력됨
웹페이지 구성 시,
1. index.html
2. index.css
3. index.js
3가지로 구성,
- index.html : 본문의 뼈대와 더불어, "index.css" & "index.js" 를 열 수 있게 하는 파일
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
** <link rel="stylesheet" href="index.css"/>**
-> html의 스타일을 입힐 수 있는 기본 파일
</head>
<body>
<h1>bbb</h1>
** <script src="index.js"></script>**
-> html의 자바스크립트 구성 (body) 최하단에 넣을 것!!
</body>
</html>JS 함수 1. Variable (var 변수)
ex)
a = 10
b = a-1
console.log(b)
*console.log() : 출력용 함수
-> 9 (출력 완료 내용)***But, a=10/b=a-1 조건을 걸 때,
'Let' 명령어를 없이 넣어도 진행이 되지만, JS함수에 맞게 Let을 넣어주자!
**올바른 답
let a=10;
let b=a-1;
console.log(b);
-> 9***여기서! Let/Const/Var 의 차이를 보면,
**Let : 'Let a=1' & 'a=3' 이라는 두개의 중복 조건이 걸렸을 시,
아래쪽에 작성 된 내용으로 변경됨. 즉, 변경 가능한 함수
ex)
let a=1;
a=3;
console.log(a);
-> 3**Const : Constant라는 상수이며, 위와 같은 중복을 대비하기 위해
변경되지 말아야할 숫자는 const 함수를사용 할 것
꼭 필요할 때 아니라면 Let말고 Const로!!!
ex)
const a=1;
a=3;
console.log(a);
-> **1**Const or let 함수에 변수를 어떻게 넣을 수 있을까?
- string : ""로 구분하여 텍스트 변수를 만드는 방법
const what = "남자";
console.log(what);
-> 남자- boolean : True/False 구분
const what = true or false; (소문자, "" 없이!! 중요)
console.log(what);
-> what이 true일 경우 나오는 내용 넣을 것- number : 숫자 넣는 함수
const a=1;
console.log(a);
-> 3- float : 소수점이 있는 숫자
const what=55.1;
console.log(what);
->55.1-> 위 조합을 잘 구성하면 웹사이트에서 회원가입 페이지를 만들 수 있음!
**var : 변수함수
여러가지 변수들을 정렬해서 사용 할 수 있는 함수
array : 여러 스트링,불린,넘버 등을 하나로 묶어서 쓸 수 있는 함수
리스트를 만들 때, 사용하는 함수
array = [] 사용
object = {} 사용
- array를 모를 때,
const mon="Mon";
const tue="Tue";
const wed="Wed";
console.log(mon,tue,wed);
-> Mon, Tue, Wed
*일일이 작성 후 결과값 도출
- array 이용 시,
const daysOfWeek = ["Mon", "Tue", "Wed"];
console.log (daysOfWeek);
-> Mon, Tue, Wed-
문자의 순서를 통해서 필요 변수만 출력 가능 & true, 숫자 등 넣을 수 있음
const daysOfWeek = ["Mon", "Tue", "Wed"];console.log (daysOfWeek[0]);
-> Mon
array함수는 []괄호로 시작하며, 첫번째부터 0,1,2 로 읽음
-
**object : array와 달리 각 변수들에 이름을 정해줄 수 있고, 그 이름을 토대로 출력을 할 수 있음
const Info = {
// **object 함수는 {}를 사용해서 구분
name : "ysh"
age : 31
gender : "male"
favMovie : ["Wanted", "왕의남자"]
//object 함수 안에 array함수 삽입 가능
favFood : [
{
name : "kimchi",
fatty : false
}
{
name : "cheese burger",
fatty : true
}
]
// **object 함수 안에 array함수 사용이 가능하며, array 함수 안에 object 함수 활용 가능
**console.log (Info) = 위의 내용들 출력
**console.log (Info.favFood[0].name) = Info에서 favFood의 첫번째(0번째) 음식의 이름을 출력리턴함수 사용법
ex)
function 변수(){
console.log("abc"
}
const 변수 = "ㅁㅁ"/* 아래 수식 이해가 안감!!!
변수 circulator는 왜 'plus:' 을 한 뒤, funtion을 들어갔는지,
return을 써야하는지... 이해가 안감
*/
const calculator = {
plus: function(a,b) {
return a+b;
}
}
const plus = calculator.plus(5,5)
console.log(plus)------- #2.1 More Function Fun 부터 다시 듣기!!!! -----
기본을 중요하게 생각하는 프론트엔드 개발자 유승현입니다! 🙋🏻♂️