04일차 프론트엔드 공부 - 기초 JS

- 프론트엔드 공부 04일차 -

 

html에 JS 연결시키는 방법

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

변수 : 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 수

상수 : 변하지 아니하는 일정한 값을 가진 수나 양

 

-> 데이터를 담는 공간

선언 : let (변수명)                   let num

할당 : (변수명) = (데이터)      num = 7

선언 + 할당 : let (변수명) = (데이터)  let num = 7

 

변수와 상수의 종류

var   이름 중복(재선언), 데이터 수정(재할당) 

let   이름 중복(재선언) X , 데이터 수정(재할당)

const   이름 중복(재선언) X , 데이터 수정(재할당) X

현재 var은 많이 쓰이지 않고 있다. 주로 변수는 let 상수는 const로 쓰인다.

 

변수와 상수의 작명 규칙 관례

JavaScript

camelCase : ex) let myPeople

 

Python

snake_case : ex) let my_people

 

Chrome 개발자 도구

- 웹사이트를 전반적으로 분석하고 시험해 볼 수 있도록 도와주는 도구

요소(Elements) : HTML을 분석하고 수정해볼 수 있는 도구

콘솔(Console) : 현재 로딩된 페이지에서 자바스크립트를 시험하거나 로그/오류 메시지 등을 확인할 수 있는 도구

소스(Resources) : 현재 로딩된 페이지에서 사용된 리소스를 열람할 수 있는 도구

네트워크(Network) : 서버와의 통신 내역을 보여주는 도구

성능(Audits) : 웹 어플리케이션의 성능을 향상시킬 방법을 컨설팅해주는 도구

 

배열 : 한번에 많은 데이터를 담을 수 있음

대괄호 안에 데이터를 넣고 쉼표로 각 데이터를 구분

 

let num = [“1”, “2”, “3”]

 

빈 배열 let array =[]

숫자 배열 let numArr = [99, 101, 5, 55]

문자열 배열 let strArr = [“문자열”, “배열”]

 

배열에 있는 각 데이터의 위치 : index

let students = [“길동”, “철수”, “짱구”, “맹구”]

 index                0           1         2          3

length                1           2   3         4

인덱스는 0부터, 길이는 1부터 카운트

 

배열의 다양한 기능

const array = [“배열”]

배열의 길이 구하기 : array.length

배열의 값 꺼내기 array[숫자(인덱스)]

배열의 맨 뒤에 값 추가 array.push()

배열 맨 마지막 값 삭제 array.pop()

배열 요소 정렬 array.sort()

배열 데이터 확인 array.includes(값)

배열 2개 연결 array.concat(array2)

배열을 문자로 만들기 array.join()

배열 분리 array.slice()

배열에서 원하는 요소 뽑기 array.filter()

배열의 모든 요소 변경 array.map()

 

배열 자체에 접근하여 데이터에 접근하는 경우 ()

간단히 배열을 읽는 경우 [] 

 

문자열도 배열처럼 다룰 수 있다

 

const str = “hello”

str[0] = “h”

str[1] = “e”

 

let classmates = ["철수", "영희", "짱구"]
// undefined
classmates
// (3) ['철수', '영희', '짱구']
classmates[0]
// '철수'
classmates[1]
// '영희'
classmates[2]
// '짱구'
classmates.includes("훈이")
// false
classmates.includes("짱구")
// true
classmates.push("훈이")
// 4
classmates.includes("훈이")
// true
classmates.length
// 4
classmates.pop("훈이")
// '훈이'
classmates.includes("훈이")
// false

let developer
// undefined
developer = ["열정", "반복", "연습", "시간", "지식"]
// (5) ['열정', '반복', '연습', '시간', '지식']
developer[1]
// '반복'
let dream = ["커리어 점프", "성공", "할 수 있다!!!"]
// undefined
 developer.concat(dream)
(8) ['열정', '반복', '연습', '시간', '지식', '커리어 점프', '성공', '할 수 있다!!!']
let result = developer.concat(dream)
// undefined
result
// (8) ['열정', '반복', '연습', '시간', '지식', '커리어 점프', '성공', '할 수 있다!!!']



let email = "abcdefg@gmail.com"
email.includes("@")
email.split("@")
// 결과 ["abcdefg" , "gmail.com"]

let userMail = email.slit("@")[0]   // "abcdefg"
let company = email.slit("@")[1]    // "gmail.com"

// userMail을 한글자씩 넣어주기 위한 빈배열
let maskingMail = []
maskingMail.push(userMail[0])
maskingMail.push(userMail[1])
maskingMail.push(userMail[2])
maskingMail.push(userMail[3])
maskingMail.push("*")
maskingMail.push("*")
maskingMail.push("*")
maskingMail.push("*")

// maskingMail = ["a","b","c","d","*","*","*","*"]
let emailMasking = maskingMain.join("")+"@"+company

 

 

객체

객체로 구분해 한번에 모두 담을 수 있음

중괄호 안에 데이터를 넣고 쉼표로 각 데이터를 구분

 

const profile = {

name : “짱구”,

age : 22,

height : 175,

}

 

키(Key): 값(Value)

값은 비어있을 수 있지만, 키는 비어있으면 안된다.

 

빈 객체 : let object = {}

숫자 값 : let numObj = { first : 3, second : 9 }

문자열 값 : let strObj = { name : “철수”, school : “떡잎초” } 

키에는 문자열이여도 “”를 붙이지 않는다.

 

객체에 담긴 값(Value)을 가져오는 방법

변수명.Key : profile.name -> “짱구”

변수명[“Key”] : profile[“school”] -> “떡잎초”

 

 

let friend ={
name: "철수",
age: 13,
school:"떡잎초"
}
// undefined
friend
// {name: '철수', age: 13, school: '떡잎초'}
friend.name
// '철수'
friend.age
// 13
friend.school
// '떡잎초'
friend.test
// undefined

 

배열에 담긴 객체

let student1 = {

name : “철수”,

pet : “강아지”,

house: “서울”

}

 

let student2 = {

name : “짱구”,

pet : “고양이”,

house: “경기”

}

 

let student3 = {

name : “맹구”,

pet : “새”,

house: “인천”

}

 

let students = {

{name : “철수”, pet : “강아지”, house : “서울”},      ->students[0]

{name : “짱구”, pet : “고양이”, house : “경기”},      ->students[1]

{name : “맹구”, pet : “새”, house : “인천”}              ->students[2]

}

 

students[0].name = 철수

const fruits = [
    {number: 1, title: "사과"},
    {number: 2, title: "귤"},
    {number: 3, title: "레몬"},
    {number: 4, title: "메론"},
    {number: 5, title: "수박"},
    {number: 6, title: "딸기"},
    {number: 7, title: "망고"},
    {number: 8, title: "한라봉"},
    {number: 9, title: "포도"},
    {number: 10, title: "천혜향"}
]
// undefined
fruits[0].number + " " +fruits[0].title
// '1 사과'
fruits[1].number + " " +fruits[1].title
// '2 귤'
fruits[2].number + " " +fruits[2].title
// '3 레몬'
fruits[3].number + " " +fruits[3].title
// '4 메론'
fruits[4].number + " " +fruits[4].title
// '5 수박'