javascript

변수(variable)란 무엇인가 ? 변수(variable)를 사용하여 여러가지 형태의 데이터를 저장할 수 있다 컴퓨터도 데이터를 기억해두었다가 필요할때 마다 꺼내 사용하는데 이때 변수를 사용한다 변수 생성(선언) & 변수 값 할당 변수(variable) = 값

자바스크립트라는 컴퓨터 프로그래밍 언어에 어떤 형태의 데이터가 있는지 살펴보고, 각각의 특징에 대해 살펴보자 공식문서 (MDN | JavaScript Data Type)원시타입 : 들어갈 공간 안에 실제 데이터가 들어있지만참조타입 : 공간 안에 실제 데이터가 아닌 실제

DOM이란 웹페이지의 html 을 계층화 시켜 트리구조로 만든 객체 모델이다 자바스크립트는 이 model 로 웹페이지에 접근하고 페이지를 수정할 수 있다 DOM은 html 인 웹페이지와 스크립팅 언어(javascript)를 서로 잇는 역할이다DOM은 hrml문서의 계층

heroElement 변수에 hero id 를 찾아와 접근하고 할당 한뒤클래스이름을 "right"로 수정한다 (용사가 오른쪽을 바라보고 있는 모습)hero의 css에서 left값을 30px로 수정한다(위의 사진과 같은 모습)

특정 요소에 interactive 한 반응이 있는것을 이벤트 라고 한다event는 사용자에 의해 발생된다특정요소와 사용자 사이의 상호작용이다클릭, 마우스 스크롤, 터치, 화면 크기 변화 이벤트 등 종류가 다양하다function은 함수는 사용자가 발생시킨 이벤트 결과이다

"만일 ~라면 ~한다"의 조건문 이다if 의 조건에는 참 아니면 거짓인 boolean으로 결과가 나오는 조건이어야 한다비교 연산자는 연산자 양쪽에 있는 두 값을 비교 후 boolean 값으로 결과를 낸다비교 연산자의 종류에는 동치 연산자(==, ===, !=, !==)

많은 데이터의 수를 하나의 변수로 순서대로 관리할 때 필요한 자료구조가 바로 '배열’이다 배열은 대괄호(\[])로 감싸져 있다 배열(Array)의 안에 있는 값을 요소(Element) 라고 부른다배열 안에는 String, Number, Array 등 다양한 데이터 타입

반복문은 조건식의 결과가 참인 경우 코드 블록을 실행한다 이는 조건식이 거짓일 때까지 반복된다간단한 예제를 살펴보자위의 반복문을 한줄 씩 살펴보면i가 5보다 적을때까지 반복문 안의 내용은 0~4까지 5번 반복된다5번 돌아갈때 count에 들어가는 값은 2씩 늘어난값 1

함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미.이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다즉 계속 반복해서 사용할 수 있는 코드 조각이라고 생각하면 된다함수를 사용하는 이유는 코드의 재사용 측

유령 위치를 랜덤하게 시작하게 할수 있게 한다유령은 여러마리 생성해야 하므로 코드의 재활용이 필요하다유령의 위치는 컴퓨터가 랜덤한 수를 계산하고 그 값을 유령의 left 값으로 지정한다먼저 유령을 랜덤하게 나오는 법을 알아보자Math.random() 함수는 0 이상 1

setInterval()메서드 는 정해진 주기적마다 특정 함수를 반복적으로 호출하거나 코드 조각을 실행setTimeout() 메서드는 타이머가 만료되면 특정 시간 뒤에 실행하고 끝나는 것

객체는 말 그대로 object 사물을 뜻한다그리고 클래스는 결국 {num :1 } 처럼 생긴 객체를 잘 설계하기 위한 틀이라고 볼 수 있다객체를 정의,생성 할수도 있지만 클래스로 만들면 여러 객체를 더 쉽게 만들 수 있다그런데 이 때의 객체는 특정 로직을 갖고 있는 행

변수가 어디까지 쓰일 수 있는지의 범위를 말한다스코프는 모든 식별자(변수 이름, 함수 이름. 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조 할 수 있는 유효 범위가 결정된다.이것을 스코프라 한다 즉 스코프는 식별자가 유효한 범위를 말한다

노마드 코더(Vanilla JS로 크롬 앱 만들기) 영상으로 클론 코딩 하며 기록한 글 입니다

노마드 코더(Vanilla JS로 크롬 앱 만들기) 영상으로 클론 코딩 하며 기록한 글 입니다명언을 랜덤으로 나타나게 해보자 (●'◡'●)예시로 크롬 확장 프로그램인 momentum을 화면 이다랜덤 배경화면과 하단에 랜덤 명언과 작가 이름이 나타난다Math는 흥미로운

노마드 코더(Vanilla JS로 크롬 앱 만들기) 영상으로 클론 코딩 하며 기록한 글 입니다1단계 : 먼저 input 으로 사용자의 value를 받아보자HTML의 태그를 javascript로 접근하여 각 변수에 저장하였다변수 toDoForm 즉 input에 사용자가

ES6에는 편리한 함수들과 문법들이 많이 추가되었다 그 중 살펴볼 것은 arrow function 이다 이전의 function을 표현하는 방법만 달라진 것, 호출 하는 방법은 같다이름이 없는 함수의 기본적인 표현이다 function 키워드가 없어지고소괄호()와 => (

브라우저에 이미 존재하는 object이다. 우리들이 접근할 수 있는 html 을 가리키는 object이다 javascript는 html에 이미 연결 되어 있다document가 html이 해당 js파일을 load 하기 때문에 document가 존재하는 것 → 그 후 브라

객체지향 프로그래밍 ?객체지향은 프로그래밍 방법론중에 하나로 객체들을 서로 소통할 수 있게만든 방법!객체 지향의 객체는 우리가 표현하고자 하는 구체적인 사물을 추상적으로 표현한 것,추상적이란 최소한의 정보로 대상을 표현 한 것이다 \-> 나를 추상적으로 표현해보자이처럼

풀이

함수심화 > ❓ 콜백함수? 재귀함수? 콜백함수란 함수에 매개변수로 전달되어 실행되는 함수를 의미 콜백함수는 일반적으로 비동기처리에서 많이 사용된다 sayHello 함수는 두개의 인자를 받는다. 첫번째 인자는 'Alice'를 전달하고 두번째 인자는 콜백함수를 전달한

color picker를 만들어보자!codepenLimJeeIn/embed/KKGapNO?default-tab=html%2Cresult

ul 태그 안에 li 태그를 5개씩 추가해보자❓ 왜 i를 createTextNode하지 않고 ulTag.appendChild(newLi)로 ul에 li를 자식 태그로 추가하면 이러한 에러가 뜨게 될까? Failed to execute 'appendChild' on '

풀이

최적화 (Optimization)❓ 왜 최적화를 해야하는가?사용자 경험이 좋아진다면접 문제로 많이 출제된다(!) 사용자 경험이 좋아진다는 것은 무슨 말일까 ?실제로 성능은 사용자 유지를 좌우한다고 한다성능 좋은 사이트는 더 많은 사용자를 이끌 수 있고 유지한다고 한다 

마이크로 소프트로 인해 탄생한 JS의 새로운 객체로 ActiveXObject다이후 업데이트 되어 XMLHttpRequest -> 비동기적으로 서버와 통신할 수 있는 방법들을 묶어 AJAX로 부르게 되었다빠르게 동작하는 동적인 웹페이지를 만들기 위한 개발 기법이다👉

클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다자바스크립트에 종속되지 않는 언어 독립형 포맷으로 대부분의 프로그래밍 언어에서 사용할 수 있다JSON은 자바스크립트의 객체와 유사하게 key와 value값으로 구성되었다객체 -> JSON 포맷의 문자열로

풀이

벤딩머신 - JavaScript

동기적 : 1,2,3 -> 1 -> 2 -> 3 순차적으로 실행비동기적 : 1,2,3 -> 1,2,3 각자 실행콜백헬에서 벗어날수 있게 한 promise문법 !

이전글은 요기로! 👉 Scope(1)   Scope의 오염 . . . > ❓ 스코프가 오염 된다는 말은 무슨 말일까 ? global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만, 너무 남용하면 프로그램에 문제를 일으킬 수 있다 g

products 배열안의 price와 title에 접근하여 html에 넣어보자cardTitle가 NodeList인 이유는 document.querySelectorAll('.card-body h5')를 통해 가져온 결과입니다. querySelectorAll 메서드는 주어

일단 ui 는 되게 별거 없어 보인다하지만 쇼핑몰에서 많이 봐왔던 선택한 목록별로 각각의 다른 사이즈가 나타나는 것을 보여주고 싶었다처음엔selectElement의 첫 번째 option 요소의 data-id 속성 값과 현재 순회 중인 option 요소의 data-id