JS - 변수 / 배열 / 객체 / iFrame

자바스크립트

변수 - 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 값
상수 - 변하지 않는 일정한 값

Let - 데이터 수정 가능, 재선언 불가
Const - 데이터 수정 불가, 재선언 불가

 

// 선언
let name
 
// 할당
name = "홍길동"
 
// 재할당
name = "김코딩"
 
// 재선언 불가
let = name = "김코딩"
 
/
const name = "홍길동"
 
// 재할당 불가
name = "스티브 잡스"

배열로 한번에 담을 수 있음 /  쉼표로 구분
종류는 빈 배열 / 숫자 / 문자열
인덱스는 0부터 시작함

 

배열관련 함수

 

const array = ["배열"]
 
// 배열 맨뒤에 값 추가
array.push()
// 배열 마지막 값 삭제
array.pop()
// 배열 요소 정렬
array.sort()
// 배열 데이터 확인
array.includes
// 배열 연결
array.concat(array2)
// 배열 문자열 화
array.join()
// 배열 분리
array.slice()
// 배열에서 원하는 요소
array.filter()
// 배열의 모든 요소 변경
array.map()

 

예시1

let developer = ["도전", "헌신", "전문성", "팀워크", "꺾이지 않는 마음"]
console.log(developer[4])
let dream = ["커리어점프" ,"성공" ,"할 수 있다"]
let result = developer.concat(dream)
console.log(result)

위 경우, result = ["도전", "헌신", "전문성", "팀워크", "꺾이지 않는 마음", "커리어점프", "성공", "할 수 있다"] 산출 가능

 

예시2

// 이메일을 마스킹하는 예제
const email = "codecamp@gmail.com"
 
email.includes("@")
// @를 기준으로 이메일을 쪼갬
email.split("@")
// ["codecamp","gmail.com"]
 
// 각 영역에 따라 정의
let userMail = email.split("@")[0]
// "codecamp"
let comany = email.split("@")[1]
// "gmail.com"
 
// 빈 배열 설정 = 마스킹하지 않을 영역을 가져오기 위함
let maskingMail = []
maskingMail.push(userMail[0])
maskingMail.push(userMail[1])
maskingMail.push(userMail[2])
maskingMail.push(userMail[3])
 
// 위 경우 maskingMail = ["c","o","d","e"]

 

앞서 배운 array함수를 응용한 방식

maskingMail.push(userMail.slice(0,4))
// ["c","o","d","e"] 대신, [“code”]라는 값이지만, 원하는 결과를 얻을 순 있다.

마스킹

// maskingMail = ["c","o","d","e","*","*","*","*"]
maskingMail.push("*")
maskingMail.push("*")
maskingMail.push("*")
maskingMail.push("*")

앞서 배운 array함수를 응용한 마스킹

maskingMail.push("****")
// 이 방법 역시 상황에 따라 가능함 
// 다만 [“c”,”o”,”d”,”e”,”****”]로 나오게 됨

 

요소분리

let result = maskingMail.join("") + "@" + comany
 
// 마스킹된 이메일을 얻을 수 있음 result = code****@gmail.com

 

객체

객체 - 어떤 한 요소에 대해 여러 정보를 담을 수 있음
객체는 key와 value로 구분함 / 이때 value는 비어있을 수 있음

Friend 는 객체 이름 / name, age,camp는 key / “철수”,13,”code camp”는 value

 

let friend = {
    name : "철수",
    age : 13,
    camp : "codecamp"
}
// '상위요소.하위요소' 로 구분하여, 원하는 값을 호출할 수 있음
console.log(friend.name)
 
예시1
let classmates = [
    {name : "철수", age:13, school:"다람쥐초등학교"},
    {name : "영희", age:8, school:"공룡초등학교"},
    {name : "훈이", age:11, school:"거북이초등학교"},
]
 
console.log(classmates.length)
console.log(classmates[0].school)
console.log(classmates[0].age)
 
예시2
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:"귤"},
]
// 공백을 넣을 때는 " "
console.log(fruits[0].number+"  "+fruits[0].title)

 

싸이월드 2일차

오늘은 iframe 태그에 대해 배웠음

변하지 않는 부분은 그대로 두고, 페이지 내에 변하는 부분을 영역으로 지정하여 상황에 따라 원하는 페이지를 대입하는 방식인 것 같음

 

/* iframe 기억해둘 것 */
iframe {
    width: 100%;
    height: 100%;
    border: none;
}

이때, 올바르게 사용하기 위해서는 영역 지정을 확실히 해두어야 함

iframe.css 내에서 영역 지정하는 것이 아니라, 전체.css에서 영역을 설정함

사이즈 측면에서,
'전체.iframe > iframe.html > iframe.body'
이기 때문에, iframe.body의 사이즈를 백날 조정해봐야 전체 크기가 변하지 않기 때문