코딩을 하는데 있어 가장 핵심적인 주제는 아마 반복의 최소화 이지 않을까 싶다.우리가 100개가 넘은 정말 많은 데이터를 작성해야 한다면,하나하나 입력을 통해 100번이 넘는 코딩을 직접 하는건 매우 비효율 적이라고 할 수 있다. 그런 비효율적인 행동을 효율적으로 만들어 줄 수 있는것이 바로 반복문이라고 할 수 있다.반복문에는 몇 가지가 존재하는데 이번에는 while 반복문에 대해서 알아보도록 하자. 1. while 반복문의 기본 구조while 반복문은 하나의 핵심요소인 조건식만을 가진다.while(조건식){ // 조건식이 참(true)일 경우 실행할 코드블록 // !! 반드시 조건식이 거짓(false)이 되어 반복문이 무한정 반복되지 않게 하는 코드가 있어야 한다.} 조건식은 while 문이 매..
자바스크립트를 이용해 개발함에 있어 가장 중요한 것 중 하나인 객체(Object). 문자열, 숫자, 불리언 같은 원시타입들이 각각 하나의 값만 담을 수 있는 기본적인 데이터라면,객체는 이름, 나이, 주소 등 서로 연관된 여러개의 데이터를 한 묶음으로 관리해주는 데이터 묶음 상자라고 할 수 있다.객체는 관련있는 데이터들을 체계정으로 정리해줘 데이터를 구조화 할 수 있게 도와준다. 예를 들어 어느 한 사람의 정보를 저장해야 한다면,let name = "김철수";let age = 20;let adress = "서울시"; 객체를 사용하지 않는다면 각각의 정보를 따로 담아서 저장을 해야 할 것이다.하지만 객체를 이용한다면,let user = { name: "김철수", age: 20, adress: "서울시"..
웹페이지를 CSS로 꾸미다 보면 HTML 요소들은 하나의 상자안에 들어 있다는 것을 알 수 있다.이 상자 안에 텍스트를 넣을수도 이미지를 넣을수도 있는 것이다. 패딩(padding)은 이 상자에서 상자 속의 컨텐츠(텍스트, 이미지 등)와 상자의 테두리 사이에 존재하는 안쪽 여백을 조절하는 역할을 한다.여백을 조절함으로써 시각적으로 편안한 디자인을 보여줄 수 있다. padding 사용하기1. padding 각 방향 사용padding 속성은 4가지 방향 상(top), 하(bottom), 좌(left), 우(right)로 각각 조절 할 수 있다. .top { padding-top: 20px;}.bottom { padding-bottom: 20px;}.left { padding-left: 20px;}.ri..
개발을 하게 되면서 가장 중요한 개념중 하나인 배열(Array).일상 생활에서 물건을 정리할 때 서랍장 혹은 수납장에 물건을 정리하듯이 컴퓨터에도 데이터들을 정리해서 수납하는 개념이 바로 배열이라고 할 수 있다. 1. 배열의 사용배열을 사용해야 하는 가장 큰 이유는 정리해야 하는 데이터의 양이 많아 졌을 경우이다.만약 한 학급의 학생들을 변수에 정리해야 한다면,let student1 = "짱구";let student2 = "맹구";let student3 = "철수";let student4 = "영희";... 이런식으로 각 학생별 다른 변수를 만들어 줘야 할 것이다.하지만 배열을 사용한다면 하나의 변수에 학생들을 순서대로 정리할 수 있다.let students = ["짱구","맹구", "철수", "영희",..
자바스크립트에는 변수에 데이터를 담는게 가장 기초적인 일이다.그렇다면 과연 변수에는 어떤 데이터들이 담기게 되는 것일까?컴퓨터가 데이터의 종류를 구분해서 관리하는데 이를 데이터 타입이라고 한다. 자바스크립트 데이터 타입에는 크게 "원시타입"과 "객체타입"이 있다.우선 가장 기초적인 "원시타입"에 대해 알아보도록 하자. 원시타입(Primitive Type)1. 문자열(String)문자열은 글자들의 나열을 뜻한다. 사람의 이름이나 주소, 문장 등 글자로 이루어진 모든 데이터를 뜻한다.자바스크립트에서는 작은따옴표( ' ) 나 큰 따옴표( " )로 감싸서 사용한다.let name = "철수";let message = "안녕하세요.";let food = "라면"; 숫자를 작성할 때도 따옴표로 감싸게 되면 컴퓨터는..
자바스크립트를 조금씩 알아가다 보면 책이나 다른 블로그를 참고 할 때가 많아진다.그럴땐 다른 누군가 만들었던 코드를 보는 일이 흔해지는데,가끔 처음 보는 문법을 만날때가 있다. 나같은 경우는 초보시절에 그 경우가 바로 '삼항연산자'였다.let age = 20;let isAdult = age >= 20 ? true : false; 이와 같은 코드를 봤던 것인데, 처음엔 뭔가 새로운 문법이 나온줄로만 알았다,하지만 나중엔 삼항 연산자라는 것을 알게 되었고 나중에는 간편하고 사용성이 좋아 많이 사용하게 되었다. 삼항 연산자의 기본 구조삼항 연산자는 이름 그대로 세 개의 항으로 이루어져 있다. ? : ◼ 조건 - 참(true) 또는 거짓(false)으로 평가 될 수 있는 표현식 ◼ ? - "만약 조건이 참(..
자바스크립트 조건문을 알게 되면 조건문이 동작하는데 반드시 필요한 친구가 있다.바로 비교 연산자와 논리 연산자인데, 이 연산자들을 통해 조건문의 조건이 완성된다. 그럼 바로 비교 연산자와 논리 연산자에 대해 알아보도록 하자. 1. 비교 연산자비교 연산자는 두 값을 서로 비교햐여 참(true) 또는 거짓(false)이라는 결과를 반환하는 연산자이다.이 결과가 바로 조건문이 어느 곳으로 향할지 결정하는 기준이 된다. A. 동등 연산자 / 일치 연산자같음을 비교하는 두 가지 연산자이다.초보일땐 가장 많이 햇갈려 하기도 하는 연산자이다. 🔹 == (동등 연산자) - 값이 같은지 비교한다. 다만 데이터 타입은 비교하지 않는다.🔹 === (일치 연산자) - 값과 데이터 타입이 모두 같은지 엄격하게 비교한다.//..
자바스크립트의 기초적인 것들을 하나하나 익히다 보면 이제 드디어 본격적인 것들을 알아보기 시작해야 한다.그 시작에 있는것이 바로 조건문이라고 생각된다. 조건문이 없다면 코드 작성시 하나의 일방적인 방향만 생산할 수 밖에 없다.그러면 코드가 더 복잡하고 길어지게 된다.하지만 조건문을 사용한다면 "만약 이럴 땐 이렇게 실행하고, 이게 아니면 저렇게 실행하고" 라는 방식으로상황에 따라 다른 행동을 하게 만들 수 있어서 좀 더 스마트한 프로그래밍을 할 수 있는 것이다. 조건문이란 특정 조건이 참(true)인지 거짓(false)인지에 따라 다른 코드블럭을 실행하도록 하는 문법이다.예를 들어 우리가 생활하면서 "비가 오면 우산을 챙기고 아니면 그냥 나가자" 와 같은 방식인 것이다. 프로그래밍에서 조건문은 사용자의 ..
본격적으로 자바스크립트를 활용해서 코딩을 하다 보면 점점 길어지는 코드 길이를 만나게 될 것이다.똑같은 행동을 하기 위해서도 작성된 코드를 다시 작성해야 하는 일들이 생기기 시작할텐데,그런 작업들을 획기적으로 줄여 줄 수 있는 것이 바로 함수(Function)다. 함수(Fuction)를 쉽게 설명하자면 특정 작업을 수행하는 코드의 묶음이라고 할 수 있다.미리 정해진 일을 수행해주는 것이라고도 설명할 수 있겠는데, 미리 정해진 코드를 간결하게 실행 할 수 있다. 예를 들어,"안녕하세요. 이번 학기에 수강하게 된 25학번 김철수 입니다."라는 메세지를 모든 신입생 이름을 넣어서 보여준다고 생각하자. 그럼 아마도console.log("안녕하세요. 이번 학기에 수강하게 된 25학번 김철수 입니다.");conso..
자바스크립트를 공부하려고 책을 찾아보면 가장 처음에 나오는 내용 중 하나인 '호이스팅(Hoisting)'.나도 처음에는 많이 햇갈리고 어려워 했던 개념이기도 하다. 호이스팅(Hoisting)우선 말 그대로 끌어올리다 라는 의미를 가진다.자바스크립트에서는 변수와 함수의 선언이 코드의 맨 위로 끌어 올려진 것처럼 동작하는 현상을 의미한다. 이렇게 말로만 설명하면 이해가 조금 어려울 수 있다.예를 들어 설명하면서 같이 확인해보도록 하자. 우선 호이스팅 설명하기에 앞서 선언과 할당을 알아두는 것이 중요하다. 선언(Declaration)은 이런 이름을 가진 변수가 있다고 컴퓨터에 알리는 과정이다.let age; // age 라는 변수를 선언했다. 할당(Assignment)은 선언된 변수에 실제 값을 넣는 과정이다..
- Total
- Today
- Yesterday
- for
- 함수
- github
- width
- 깃헙
- node
- 변수
- 자바스크립트
- CSS
- function
- 화살표함수
- object
- height
- zindex
- vsCode
- position
- 태그
- Dom
- 웹페이지
- 반복문
- 깃허브
- z-index
- js
- 조건문
- 배열
- TAG
- javascript
- 비주얼스튜디오코드
- array
- HTML
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 |