[공부] Javascript

자바스크립트에 대해 공부하기 전에 먼저 자바스크리브란 어떤 언어인지 알아보려고 한다.html 마크업 언이, css는 스타일시트 언어이듯이자바스크립트는 프로그래밍 언어이다.자바스크립트는 서버 개발, 어플리케이션 등 다양한 목적을 위해 사용할 수 있지만 주된 활동 분야는

이번 페이지에서는 console 명령문에 대해 알아볼 예정이다.console이란 실시간으로 자바스크립트를 실행하고 그 결과값을 보여주는 계기판을 의미한다.일반적으로 console은 브라우저의 디버깅 console로써 사용한다.(디버깅이란? 오류는 잡아내는 작업. 즉 디

자바스크립트를 사용하려면 '변수'라는 개념이 필수적이다.코드를 짜게되면 데이터를 다루어야 하는데, 이러한 데이터를 넣고 관리할 수 있는 수단이 변수이기 때문이다.변수란 '데이터에 붙이는 이름표'라고 할 수 있으며변수를 선언한 뒤 계속해서 재사용하듯이 사용할 수 있다.

이번 페이지에서는 자바스크립트의 함수 중 하나인 propmpt()에 대해 공부해볼 예정이다.propmpt() 함수는 실행 시에 사용자로부터 문자열을 입력받고 입력받은 문자열을 자신이 사용된 곳에 반환할 수 있는 메소드이다. 즉 메소드가 문자열로 바뀌게 되는 함수이다.예

템플릿 리터럴(Template)은 문자열을 표현하는 또 다른 방법으로 따옴표와 비슷한 역할을 하지만 장점을 더 채운 문법이다. 백틱(\`\`)을 사용하여 그 안에 데이터를 채운다.esg 이전에는 템플릿 문자열로 불렸으나 esg 이후에 템플릿 리터럴이라 불리게 되었다.

이번 페이지에서는 DOM에 대해 알아볼 예정이다.브라우저는 html 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성한다. 이를 DOM(document object model)이라고 하며 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다

사용자 정보를 입력받을 수 있는 실습을 해보려고 한다.앞서 배웠던prompt()textContentQuerySelector의 복습이다.추 후에 자세히 공부할 if문을 예습하는 느낌으로 사용하여 첫 팝업문의 확인, 취소 둘 중 어떤 버튼을 눌렀냐에 따라 달라지는 사용자

DOM 메소드 document.querySelecotr(x) : css 선택자 x를 기반으로 첫번째 요소를 선택한다. document.querySelecotrAll(x) : css 선택자 x를 기반으로 여러 요소를 선택한다. document.getElementById

이전 페이지에서 배운 내용들을 실습을 통해 복습해보고, 조건문 문제를 공부해보려고 한다. 성적이 입력될 h1태그를 h1이라는 변수에 저장했다. prompt창을 띄울 grade라는 변수를 만들었다. parseInt를 통해 성적을 입력하여 얻을 숫자 '문자열'을 숫자형으

반복문은 비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문이다. for과 while이 대표적이며 구조 및 동작 방식에서 차이가 있다.for문for문은 조건 부분에 반복 될 때 처음 시작할 수와 마지막 수, 어떻게 반복될지(ex.1씩 증가)를 쓰고 중괄호 안에 반복

부트캠프에서 과제로 내준 반복문 실습을 해볼 예정이다.실습.1str의 문자열 안에서 0과 짝수 번째를 제외한 홀수 번째에만 문자가 있다.따라서 처음 시작은 0번째가 아닌 1번째부터 시작하며 2씩 증가하도록 만들었다.(2씩 증가해야 홀수가 나오므로)str의 문자열에 i를

화면에 html요소를 추가하기 위해서 자바스크립트로 dom에 접근하여 엘리먼트를 만드는 방법이 있다.바로 createElement, appendChild이다.바로 예시를 써보자면createElement코드를 해석하자면 document안에 p태그를 create해서 p라는

기존에 배웠던 코드들을 사용하여 간단한 투두리스트를 만들었다.addEventListener라는 메소드를 사용해 add-btn이라는 id를 가진 객체가 클릭되었을 경우의 로직을 만들었다.필요한 엘리먼트들을 id로 불러오거나 create하여 변수로 선언했다.newTodo라

함수와 함수 만드는 방법함수 : 함수를 선언하고 기능을 정의하면 그 함수의 이름을 긴 코드 대신 사용할 수 있다. 커스텀으로 기능을 만든다 생각하면 되는 것 같다. '불러서 쓸 수 있는 코드'이며 함수 안에는 여러가지의 변수나 로직을 저장할 수 있다.함수를 만드는 방법

앞서 배운 함수를 사용해서 실습을 해보았다.실습.01

이벤트 핸들링이벤트란 DOM에서 발생하는 다양한 이벤트 혹은 상호작용 동작을 나타내는 프로그래밍 인터페이스이다.예를 들어 버튼을 클릭했을 경우, 키보드를 눌렀을 경우, value값이 바뀌는 경우 등등이 있다.따라서 각각의 이벤트에 대한 이벤트 핸들러(event hand

실습 : https://stackblitz.com/edit/stackblitz-starters-ovnvnm?file=script.jsinput창에 글을 입력하면 밑에 트윗 형식으로 글의 리스트가 나오고 좋아요 버튼과 좋아요 개수를 표기할 수 있는 기능이 있는

코드: https://stackblitz.com/edit/stackblitz-starters-ga26xh?file=script.js회원가입 폼을 만들어 노드객체를 변수 선언하고 if의 조건으로 데이터를 형식에 맞춰 받은 뒤 콘솔로 찍어내는 웹사이트를 만들었다.

객체 생성자우선 자바스크립트 명령문으로 어떤 처리를 지시하고자 하는 대상을 가리켜 '객체'라고 한다.객체에 내릴 수 있는 명령의 유형은 2가지다.객체.데이터(객체가 가지고있는 숫자, 문자 등의 다양한 데이터 사용 가능. 속성)객체.기능()(객체가 가지고있는 다양한 기능

시계 코드: https://stackblitz.com/edit/stackblitz-starters-bcr5qw?file=script.js드림카 소개하기 코드: https://stackblitz.com/edit/stackblitz-starters-h3s

배열배열은 여러개의 데이터를 보관하는 역할을 수행하는 객체이다.예를 들어과 같이 대괄호 안에 여러개의 데이터를 입력할 수 있다. number, string, boolean등 모든 자료형을 입력할 수 있으며 또다른 배열을 넣어 이중으로 데이터를 넣는 것도 가능하다.배열은

실습01: 추가 버튼 클릭 > 햄버거 추가 / 제거 버튼 클릭 > 리스트 삭제 코드: https://github.com/hanhyochan/study-javascript/tree/master/10%ED%9A%8C%EC%B0%A8 기존 예제는 똑같은 멘트에 추가된 햄

로또 번호 출력당첨 번호와 번호 자동 생성기(5가지 출력) 2가지의 기능으로 당첨 번호와 자동 생성된 번호 중 일치하는 번호는 노란색으로 표시하는 프로그램이다.어려워서 정답 코드를 보고 공부하려고 한다. 공부해서 안보고 쳐봐야지..코드의 전체적인 구조는 1\. 6자리로

고차함수에 대해 공부해보았다.지금까지는 for문이 익숙한데 아무래도 가독성문제 때문에고차함수를 보편적으로 많이 쓴다고 한다.나도 map, filter, reduce를 몇 번 사용해보기도 했고 간편해서제대로 써먹기 전 공부해본다.mapmap은 배열에 쓰이는 함수로써 배열