TIL LIST/JavaScript (21) 썸네일형 리스트형 [chrome app 코딩 챌린지] 2. 버튼 클릭 시 랜덤 이미지 출력 Math.random() 메서드를 이용해 Remind Your Memories Button을 클릭하면 로그인 화면의 이미지 경로가 바뀌어 각기 다른 이미지를 출력하도록 한다. 코드 리뷰 Remind Your Memories const imagesArray = ["welcome.gif", "sign-visual.png", "sign-visual.gif"]; const randomButton = document.querySelector(".login__random-btn"); const loginImg = document.querySelector(".login__img"); function changeImagesHandler() { const mainVisual = imagesArray[Math.floor(.. [chrome app 코딩 챌린지] 1. 로그인 화면 노마드 코더의 바닐라 JS 수업을 들으며 챌린지를 하고 있는데 Window 95 컨셉으로 잡고 작업 중이다. (덕분에 디자인 할 일이 거의 없다. 챌린지는 굉장히 촉박한데 시간은 아끼면서 퀄리티는 챙기는 방법이라 좋은 선택이라 생각하고 있다) 개중 로그인 화면 로직을 짜고 있다. Login 버튼을 Submit 하면 로그인 화면이 사라지고 유저 화면이 뜨는 방식인데 submit 이벤트와 display: none css를 사용하였다. 코드 리뷰 Name: Password: .hidden { display: none; } const greeting = document.querySelector(".main__greeting"); const userInterface = document.querySelector(".. 바닐라JS 강의 완강 챌린지와 동시 진행하고 있어서 그런지 정신이 없고 어디서부터 회고해야 할 지 감이 잡히지 않는다. 예습은 진짜 필수구나. 새로 배운 개념인 event, random, date, api 등등... 졸업 작품을 진행하면서 하나하나 천천히 TIL로 올려야 겠다. [기초 이론] if ... else if ... else JavaScript 는 위에서 아래로 한줄씩 순차적으로 코드의 흐름을 읽어나가는 데, 특정 조건을 걸고 조건을 충족하면 실행하거나 실행하지 않는 것을 조건문이라고 한다. 그 중 하나인 if ... else 는 만약 ... 이라면 ... 한다. 라고 생각하면 편하다. 즉 if ... else 문은 지정한 조건이 참(true)인 경우 명령문(Statement)을 실행한다. 조건이 거짓(false)인 경우 또 다른 명령문이 실행 될 수 있다. if(condition) { statement; } else { last statement; } 먼저 if 문을 작성해주는데 쉽게 구문으로 풀면 만약(라면) { 중괄호 안의 명령문을 시행한다 } 와 같다. 최종적으로 소괄호 안의 표현식이 true 일.. [기초 이론] Function Function 함수(Function)는 하나의 로직을 실행할 수 있도록 수행하는 코드의 집합이다. 사용자가 서버에서 특정한 일을 수행(x)하면 해당 명령을 입력(input) 해서 함수 box에서 처리(f)한다. 그리고 그 처리한 값을 출력(output) 하면 사용자는 함수가 처리한 값을 받을 수 있다. 즉, 함수에 값을 전달하면 함수는 값을 반환한다. 나는 이 지점에서 왜 '슈의 초코공장' 게임이 생각났는 지 모르겠다. 땅콩이 초코 볼에 들어가 볶아(?)져서 티피가 되는 게 비슷하다고 느낀 걸까. 함수의 장점 중 하나는 재사용성인데, 반복되는 구문을 계속 작성하지 않고 함수로 만들어서 필요할 때마다 재사용하는 것이 좋은 코더의 자세다. 함수 선언 함수의 대략적인 선언 방법은 아래와 같다. functio.. [기초 이론] Data Type: Object 시작하며 JavaScript의 객체는, 다른 프로그래밍 언어와 마찬가지로 현실 세계에서 객체(사물)라고 부르는 것과 비교할 수 있다. JavaScript 객체의 개념은 현실에서 인식 가능한 사물로 이해가 가능하다. JavaScript 에서 객체는 속성과 타입을 가진 독립적인 개체(Entity)이다. 현실의 컵과 비교해본다면, 컵은 '색', '디자인', '무게', '소재' 등의 속성을 가진 객체라고 할 수 있다. 마찬가지로 JavaScript 객체 역시 특징을 결정짓는 속성을 가질 수 있다. Object 객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메서드라고 부른다)의 집합이다. 여타 JavaScript 의 요소 들과 마찬가지로, 객체를 .. [기초 이론] Array Array Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역객체이다. 배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖고 있다. JavaScript 배열은 길이도, 각 요소의 자료형도 고정되어 있지 않다. 배열의 길이가 언제든지 늘거나 줄어들 수 있고 데이터를 연속적이지 않은 곳에 저장할 수 있으므로 JavaScript 배열은 밀집성을 보장하지 않는다. 즉 배열은 정의된 상태에서 추가하거나 삭제할 수도 있고, 내용을 변경할 수도 있다. const week = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat']; week 이라는 변수에 6개의 요소를 가진 배열을 생성했다. 이렇게 정의된 상태에서 다양한 연산을 사용할 수 있다. .. [기초 이론] Data Type: Primitive 원시 값 JavaScript에서 원시 값(Primitive, 또는 원시 자료형)은 단일 데이터만 담을 수 있는 데이터이다. 복합 데이터인 객체나 객체의 속성 함수인 메서드 그리고 함수는 포함하지 않는다. 원시 값은 변하지 않으며 변형되지 않는다. 원시 값 자체와 원시 값을 할당할 변수를 혼동하지 않아야 한다. 변수는 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와 달리 변형할 수 없다. // !!문자열 메서드는 문자열을 변형하지 않음 let bar = 'hangul' console.log(bar); // > hangul bar.toUpperCase(); // > 소문자를 대문자로 변환해주는 '문자열 메서드' console.log(bar) // > 여전히 hangul //.. 이전 1 2 3 다음
