Programming (47) 썸네일형 리스트형 querySelector & textContent 오늘 배운 내용은 짧게 정리해봤다. 해당 부분은 추후 배울 DOM 주제에서 더 살펴볼 예정이다. 핵심은, 아래의 방법, querySelector와 textContent를 활용하여 텍스트 조회를하고 텍스트 내용을 변경할 수 있다는 점이다. 1. querySelector document.querySelector를 활용하여 웹 페이지의 특정 엘리먼트 (Element) 를 선택/조회할 수 있다. 2. textContent textContent를 활용하여 선택한 엘리먼트의 콘텐츠(Content)를 고칠 수 있다. 두 가지를 동시에 사용할 수도 있는데, 이를 통해 꽤 재미있는 시도들을 해볼 수 있다. 예를 들어, 기사 제목의 일부를 수정하거나, 네이버 실시간 검색어 1위를 바꿔 볼 수도 있다. 물론, 콘솔창에서 이.. HTML 기초 웹 또는 앱을 만들 때 꼭 사용되는 세 가지: HTML, CSS, JS 중 한 가지인 HTML 에 대해서 알아보자. 1. HTML 은 HyperText Markup Language, 즉 '구조를 표현하는 언어' 이다. HTML 구조와 문법 HTML 구조는 부모가 하나이고 자식이 여러 가지인 트리 구조를 가지고 있다. HTML 은 다양한 tag 들의 집합이다. ( 부등호로 묶인 HTML 의 기본 구성 요소) The truth about elk. Opening tag, Closing tag, Self-closing tag 들이 존재한다. 나 같은 태그들은 나 과 같이 꼭 태그를 닫아줘야 한다. 이 외에 몇 가지 Self-closing tag 들은 아래와 같이 정리했다. – clickable area insi.. HTML & CSS 오늘 배운 내용은 Javascript 와 깊게 연관성이 있는 HTML 그리고 CSS 다. 웹 또는 앱을 만들 때 꼭 사용되는 세 가지다. 오늘은 페어 프로그래밍 없이 혼자서 HTML & CSS 를 배우는 시간만 가지게 되서, 그 내용이 매우 길다. 그리고, Javascript 와는 조금 다른 분야이기 때문에 세부 내용 관련해서 따로 정리해서 올리겠다. 1. HTML 은 HyperText Markup Language, 즉 '구조를 표현하는 언어' 이다. 2. CSS 는 구조적인 문서를 어떻게 시각적으로 표현하는지에 대한 언어이다. 2 - 1.줄바꿈이 되는 박스 (Block) vs. 옆으로 붙는 박스 (inline, inline-block) 2 - 2. 박스를 구성하는 요소 2 - 3. Border [테두리.. While 반복문 반복문은 크게 For 반복문과 While 반복문 두 가지가 있다. For 반복문 관련해서는 지난 주 작성한 TIL에 내용이 있기에, While 반복문에 대해 알아보자. 1. While 반복문 우선, For 반복문과 While 반복문은 똑같은 반복 작업을 한다고 볼 수 있다. 하지만, While 반복문이 유용한 경우는, 끝을 알수 없는 애매모호하거나, 그 끝을 명시적으로 알 수 없을 때 주로 사용한다. For 반복문의 경우, 보통 문자열이나 배열의 길이가 정해졌을 때 사용을 많이 한다. While 구문은 반복할 조건 중에 초기화, 증감문은 따로 적고, 괄호 안에는 조건식만 넣어준다. 예시로 아래 코드를 보자. let sum = 1; let n = 2; // 초기화 while (n String Methods 1. String Methods 문자열 메소드 모든 문자열 메소드들은 그 형태가 기본적으로 Immutable 하다. 즉, 원본의 형태가 유지된다는 의미다. 기본적인 문자열 메소드 먼저 알아보자. indexOf, lastIndexOf (includes) 문자열의 글자 하나하나에 접근 할 수가 있다. 예를 들어, str[index]. 자바스크립트는 첫번째 인덱스가 아닌, '0번째' 인덱스부터 시작한다. indexOf 메소드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환, 일치하는 값이 없으면 -1을 반환한다. length str.length 를 통해 문자열의 길이를 구할 수 있다. 예시로, 위 문자열 'hello'의 길이는 5 이다. 이 length 메소드는 배열(Array)의 .. Javascript Number 타입 1, Javascript 에서 Number 타입을 선언하는 방법 자바스크립트에서 Number 타입을 선언하는 방법부터 알아보면 간단하다. let num = 12345 그저 num 혹은 임의로 지정한 변수에 숫자 타입을 할당해주면 된다. 2. Number 타입으로 변환하는 방법 지난번 포스팅에 우리가 다른 데이터 형태/타입을 String/문자열로 변환시켜주는 방법을 알아봤었다. 이번에는 다른 형태의 데이터들을 Number 타입으로 바꾸는 방법을 알아보자. "임의의 값을 입력받아 숫자(number)의 형태로 리턴해야 한다"라는 문제가 있다고 치자. 함수를 활용하는 방법들 먼저 보면 이렇다. Number('12345'); // 12345 Number('anything'); // NaN (수로 변환할 수 없음).. Javascript String 문자열 문자열은 'string' 처럼 작음 따옴표로 표시하는데 간혹 큰 따옴표도 사용한다. 차이점은 없다. 문자열은, 요소가 문자 인코딩과 관련된 문자를 대표하는 일련의 자료값을 저장하고 있는 자료형으로 이해할 수 있다. string 에는 아래와 같이 string, number, boolean, null, undefined, array, object 등등 모든 타입이 들어갈 수 있다. 보이는 바와 같이 콘솔창에서 테스트 결과, 그 어떤 타입이 들어가도 'string'의 타입은 문자열이다. 문자열이 소스 코드에 보이면 그 문자열을 'string literal', 문자열 리터럴이라고 부른다. 1. Javascript(JS)에서 문자열(String)을 선언하는 방법 문자열을 선언하는 방법은 대표적으로 세 가지가 존재.. 변수와 자료형 & 함수 & 조건문 이번 TIL에서 다룰 내용인 익숙한 개념이지만, 다시 나를 다시 돌아보는 마음으로 개념을 한번 다시 확인해보자. 1. 변수 (Variable) 변수는 이름이 붙은 값을 의미하며, 변수는 말 그대로 상황에 따라 변할 수 있다. 숫자 3까지의 간단한 구구단을 예로 들어보자. console.log(3 * 1); console.log(3 * 2); console.log(3 * 3); /// 한 번의 작업을 세번 혹은 9를 곱할 때까지 9번 수정해야하는 번거로움 발생 구구단을 효율적으로 출력하기 위해서, 아래와 같이 num이라는 변수를 선언하고 값을 할당해주는 코드가 편리하다. let num = 4 // num 변수는 계속 바뀔 수 있음 console.log(num * 1); console.log(num * 2).. 이전 1 2 3 4 5 6 다음
