본문 바로가기

분류 전체보기

 (76)
[jQuery] box를 toggle 할 때 왜 getElementById는 안될까? 추억 저장하기 사진 제목 - 문제 `추억 저장하기` 버튼을 누르면 postingBox 메뉴가 열리고 닫히는걸 구현하고자 한다. - 오답 function openClose() { document.getElementById('postingBox').toggle(); } //error 이렇게 지정했더니 안먹었다. 왜 그럴까 ? -해결 방법 - getElementById('postingBox') getElementById('postingBox')는 문서에서 ID가 'postingBox'인 요소를 찾아온다. 그 요소를 반환하고, 반환된 요소에 대해서는 순수 JavaScript로 다양한 작업을 수행할 수 있다 function openClose() { let postingBox = document.getElement..
[foreach 함수] 기초 문제 1 자바스크립트 문법 연습 1. 함수 결과 확인하기! 2. 붙이기 영수는 24살입니다. 세종은 30살입니다. 수영은 20살입니다. - 문제 기존에 있던 id = "q2"의 text들을 지우고 people 객체를 foreach 함수를 사용해 q2에 `서영의 키는 165cm 입니다.`이런 문장을 띄워보자. - 오답 과정 및 해결 방법 1. empty 대신에 remove를 써봤더니 html을 append해도 화면에 나오지 않았다. remove() 말고, 다시 text 자리를 위해 empty() 로 쓰기. $('#q2').empty(); 2. name과 height을 따로 변수로 빼주는데 앞에 people로 썼다가 error. a는 element를 a로 줄여서 썼고 people의 index들 하나하나가 돌아가면서 ..
[display] display의 종류 display: block; - 새로운 라인에서 시작 : display: block; 을 사용하면 해당 요소는 항상 새로운 라인에서 시작한다. 이는 다른 블록 레벨 요소들과 수직으로 정렬되어 있다는 것을 의미한다. - 전체 가로 폭 차지 : 블록 레벨 요소는 가능한 모든 가로 폭을 차지합니다. 부모 요소의 가로 폭 전체를 차지하게 되며, 너비를 지정하지 않으면 화면 전체를 차지한다. - 수직으로 쌓임 : 블록 레벨 요소는 수직으로 쌓이기 때문에, 다른 블록 레벨 요소와 수직으로 정렬된다. - 레이아웃을 쉽게 구성 : section 나누기, layout 구성 등에서 주로 활용된다. 콘텐츠 영역, 패딩, 테두리, 여백 등으로 구성된다. ex. `` 요소는 기본적으로 `display: block;`이 적용된 ..
[배열] toString 메서드 배열엔 `toString` 메서드가 구현되어 있어 이를 호출하면 요소를 쉼표로 구분한 문자열이 반환된다. `toString` 메서드는 배열에 있는 숫자, 문자열, 다른 종류의 값들을 쉼표로 이어붙여서 하나의 문자열로 만들어준다. 간단히 말하자면, 배열 안에 있는 것들을 쭉 나열한 문자열을 만들어준다고 생각하면 된다. 배열에 있는 모든 요소를 하나의 문자열로 합쳐서 반환해주는 역할을 한다. let numbers = [1, 2, 3, 4, 5]; let result = numbers.toString(); console.log(result); //'1,2,3,4,5' 여기서 `toString`을 사용하면 배열 `[1, 2, 3, 4, 5]` 이 쭉 이어져서 '1, 2, 3, 4, 5' 라는 문자열이 만들어진다..
[조건문] if문이란? if문 : 조건에 따라 다른 행동을 취해야 할 때가 있다. 이럴 땐, if문과 '물음표' 연산자라고도 불리는 조건부 연산자 ? 를 사용하면 된다. ' if ' 문 if( ... ) 문은 괄호 안에 들어가는 조건을 평가하는데 그 결과가 true이면 코드 블록이 실행된다. let study = prompt('지금 공부하는 과목이 무엇입니까?', ''); if (study == javascript) { alert( "정답입니다."); alert( "good!"); } 조건이 true 일 때 복수의 문을 실행하고 싶다면 중괄호로 코드 블록을 감싸야 한다. if 문을 쓸 때는 조건이 참일 경우 실행되는 구문이 한 줄이더라도 코드의 가독성을 위해 중괄호 { }를 사용해 코드를 블록으로 감싸는걸 추천한다. boole..
[자료와 변수] - 자료형 자바스크립트에는 8가지 기본 자료형이 있다. 숫자형 - 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용. 정수의 한계는 ±253. bigInt - 길이 제약 없이 정수를 나타낼 수 있다. 문자형 - 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용한다. 단일 문자를 나타내는 별도의 자료형은 없다. boolean형 - true, false를 나타낼 때 사용한다. null - null 값을 위한 독립 자료형이다. null은 알 수 없는 값을 나타낸다. undefined - undefined 값을 위한 독립 자료형이다. undefined는 할당되지 않은 값을 나타낸다. 객체형 - 복잡한 데이터 구조를 표현할 때 사용한다. 심볼형 - 객체의 고유 식별자를 만들 때 사용한다. 자세하게 알아보자. 자바스..
배열의 마지막으로 데이터 추가하기 배열의 마지막에 데이터를 추가하고 싶다면 push() 를 통해 배열에 데이터가 추가됩니다. push를 사용하여 배열에 cd, ef 라는 값을 추가해 보자. DOCTYPE HTML> Array Syntax let boom = ["A", "B"]; boom.push('cd'); boom.push('ef'); get document.write(boom[0]); //A document.write(boom[1]); //B document.write(boom[2]); //cd document.write(boom[3]); //ef add count document.write(boom.length); //4
배열에서 데이터 꺼내기 배열에 첫 번째로 들어가 있는 데이터를 꺼내고 싶은 경우, coworkers[0]이라고 쓰면 첫 번째 자리에 있는 값 = 0번째 자리에 있는 값이 나옵니다. 이를 index 라고 하는데, index(인덱스) 0번은 "a" 가 되고, 인덱스 1은 "b" 를 가리킨다고 볼 수 있습니다. DOCTYPE HTML> Array Syntax const boom = ["a", "b"]; document.write(boom[0]); //a document.write(boom[1]); //b get
[Programmers/JavaScript] Lv.0 - a 와 b 출력하기 문제 설명 정수 a와 b가 주어집니다. 각 수를 입력받아 입출력 예와 같은 형식으로 출력하는 코드를 작성해 보세요. 제한사항 -100,000 ≤ a, b ≤ 100,000 입출력 예 입력 #1 4 5 출력 #1 a = 4 b = 5 문제 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); let input = []; rl.on('line', function (line) { input = line.split(' '); }).on('close', function () { console.log(Number(input[0]), Number(i..
[calendar]자바스크립트로 날짜를 구할 수 있을까? 어떻게 하면 자바스크립트에서 오늘 날짜를 구할 수 있을까? Date는 날짜와 시간(년도/월/일/시/분/초/밀리초)까지 다 구할 수 있는 객체이면서 생성자 함수다. Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖는다. 한마디로 Date 객체는 기본적으로 현재 날짜와 시간을 나타내는 정수값을 가진다. Date 생성자 함수로 객체를 생성하는 방법은 다음과 같이 4가지가 있다. new Date() - Date 생성자 함수를 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 가지는 Date 객체를 반환한다. new Date(); //Thu Nov 09 2023 22:38:50 GMT+0900 (한국 표준시) Date(); /*Date 생성자 함수를 new 연..

티스토리툴바