개발을 하게 되면서 가장 중요한 개념중 하나인 배열(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)은 선언된 변수에 실제 값을 넣는 과정이다..
자바스크립트(JavaScript)를 조금씩 알아보다 보면 필연적으로 만나게 되는게 ECMA Script 다.ES6, ES2018 등등 처음보는 용어들을 만나서 이게 무엇일까에 대한 궁금증이 생기게 된다. 조금 용어가 어렵게 느껴지겠지만 ECMA Script는 자바스크립트의 규칙과 표준을 정한 하나의 규칙이라고 생각하면 된다.ES는 ECMA Script를 축약해서 ES라고 불리우고 뒤의 숫자와 년도는 버전 혹은 해당 ECMA Script가 개정된 년도라고 보면 된다. 그럼 대체 ECMA는 무엇일까?ECMA Script 가 등장하게 된 이유는 예전 웹브라우저 전쟁이 시작이라고 할 수 있다.1990년대 넷스케이프에서 '자바스크립트'라는 언어를 만들자 마이크로소프트에서는 'JScript'라는 비슷한 언어를 만들..
자바스크립트(JavaScript)를 학습하는데 가장 출발점이 되는 변수에 대해 알아보자.아마 처음 자바스크립트 공부를 시작하거나 필요에 의해 간단한 정보를 원하는 사람들이 처음 접하는게 바로 "변수" 라는 단어일 것이다. 변수(Variable)1. 어떤 상황에서의 가변적 요인2. 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 수 사전적 의미로는 이러한 뜻을 가지고 있어서 학습을 하면 할수록 혼돈이 오는 경우가 생긴다.일단 컴퓨터프로그래밍에서의 개념으로 접근하면 흔히들 설명하는 데이터를 담는 그릇 이라고 많이들 표현한다. 개인적으로 나도 처음 학습을 할때 저렇게 설명을 들어서 추상적으로 그냥 그런건가? 싶으면서 정확한 이해가 쉽지 않았던게 사실.근데 실무를 거쳐 어느정도 업무를 진행하더라도 저 설..
웹페이지를 풍성하게 만드는데 필요한 것 중 하나가 바로 JavaScript 이다.우리가 흔히 웹사이트에서 하는 행동들은 거의 대부분 자바스크립트를 이용한다고 생각하면 될 정도. 어떤 영역을 클릭하면 나오는 반응이나 현상, 움직이는 이미지나 계속 롤링되는 페이지 등.많은 영향을 주는 것이 바로 자바스크립트다. 쉽게 웹사이트의 구조를 설명하자면, HTML 은 큰 뼈대와 틀을 의미하고CSS 는 모양과 색감을 다양하게 만들어 주며JavaScript 가 페이지를 살아 움직이게 한다. 라고 볼 수 있다. 결국 웹페이지를 우리가 생각하는 웹페이지로 완성시키는게 자바스크립트라고 볼 수 있다.만약 자바스크립트가 없다면 웹페이지는 단순 정적인 문서에 불과할 것이다.어떤 버튼을 눌러도 동작하지 않고, 사진도 움직이지 않을 ..
- Total
- Today
- Yesterday
- 반복문
- CSS
- javascript
- 함수
- 태그
- node
- TAG
- Dom
- 배열
- 깃허브
- for
- 웹페이지
- position
- 자바스크립트
- 깃헙
- object
- 조건문
- 화살표함수
- function
- HTML
- github
- zindex
- vsCode
- height
- 변수
- width
- js
- 비주얼스튜디오코드
- array
- z-index
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |