Every step counts

DOM이란 document object model의 약자로, 웹페이지에 대한 인터페이스이다. 프로그램이 페이지의 컨텐츠 및 구조, 스타일을 읽고 조작할 수 있도록 해준다. 활용구문은 다음과 같다. document.getElementById('id명') : ID는 단일요소이기 때문에 해당하는 단일요소를 리턴한다. document.getElementByClassName('클래스이름'): 복수의 요소를 리턴할 수 있다. HTMLCollection 타입으로 저장한다. document.getElementByTagName('태그이름'): 클래스이름과 같으나 태그이름의 요소를 리턴한다. 활용해보자. 태그로 가져올 것 요소 가져오기 클래스로 가져와볼 것 1 클래스로 가져와볼 것 2 요소3 요소4 콘솔에 출력되는 결과는..

JSON이란 Javascript Object Notation의 약자로, 자바스크립트 객체 표기법을 말한다. 자바스크립트와 백엔드간 데이터 송수신은 단일 형식으로 통일되어 모두 string 타입으로 이루어지기 때문에 송수신 모듈에서 타입 변환이 필요하다. 하여, 서버로 데이터를 보낼 때는 JSON.stringify(객체), 서버에서 데이터를 받을 때는 JSON.parse(stringData)를 사용한다. 사용해보면서 익히는게 최고다. const stringData = '{"id": "0001", "type": "donut","name": "cake","image":{"url":"image/0001.jpg","width": 200, "height":200}, "thumbnail": {"url":"image/..

자바로도 구성해본 야구게임이다. 이하는 규칙이다; 1) 컴퓨터가 0~9 사이의 중복되지 않는 정수 3개를 랜덤으로 출제하면 플레이어가 맞추는 게임 2) 플레이어가 입력한 숫자와 컴퓨터의 출제 숫자의 수, 자리수가 동일하면 1 Strike 3) 입력한 숫자는 출제 숫자에 포함되어 있으나 자리수가 동일하지 않으면 1 Ball 4) 숫자가 전혀 포함되어 있지 않으면 Out 5) 3 Strike는 성공 게임 시작 숫자 추측하기: 결과 확인 html 태그를 먼저 자리잡아준다. 컴퓨터가 숫자를 생성하게 해줄 게임시작 버튼을 위치시키고 플레이어거 숫자를 입력할 input 박스, 결과를 확인할 버튼, 게임시작에 대한 피드백을 표시할 위치, 결과의 위치, 그리고 재미로 넣을 이미지의 위치 태그까지 작성해줬다. 이제 스크..

그동안 공부한걸 좀 활용해보자. 이번에 만들어볼건 조금 복잡하다. 먼저 input 박스에 숫자를 입력하고 버튼을 누르면 이름, html, css, js 과목 input 박스들이 입력된 숫자만큼 나타나고, 각 박스에 데이터를 넣고 버튼을 누르면 이름별 각 과목의 점수, 총점, 평균을 테이블로 출력할 것이다. 먼저 html 태그를 잡아주자. 인원제출 결과보기 사람 수를 기입할 input 박스를 첫줄에 작성 기입한 사람 수를 제출할 버튼이 두번째 기입된 이름과 점수들을 테이블로 띄울 버튼이 세번째줄에 있다. 이름과 점수를 기입할 input 박스들은 네번째줄에 뜰 것이다. 열자 스크립트. let name = ''; let html = 0; let css = 0; let js = 0; let cnt = 0; 사용..

자바스크립트로도 로또를 만들어보자. 자바로 해봤는데 뭐 어렵겠어.. 라고 생각했지만 쉽진않았다. 약간의 재미와 약간의 스트레스와 약간의 성취감까지.. Generate User Numbers Generate Winning Numbers Result 먼저 버튼 세개와 출력될 곳 세 곳을 잡아줬다. 첫번째 버튼은 유저의 로또번호 여섯개가 랜덤생성되고 userNums 자리에 출력 시켜주는 버튼이고, 두번째 버튼은 보너스 번호를 포함한 로또번호 일곱개가 랜덤생성되고 winNums 자리에 출력 시켜주는 버튼이다. 세번째 버튼은 유저의 번호와 당첨번호를 대조하여 당첨여부를 result 자리에 출력해주는 버튼이다. 스크립트를 열고 직관적이게 버튼별로 작성해보자. let userNumArr = new Array([]);..

자바스크립트로도 자바처럼 Set, Map을 사용할 수 있다. 1. Set set안에서는 중복데이터를 허용하지 않는다. 중복 검사 후 존재하는 데이터의 최초 데이터만 저장한다. set안에도 다양한 데이터 타입의 값들이 들어갈 수 있다. 이하는 set 전용 메소드들이다. add: 값을 추가할 때 사용. setName.add(값) size: 크기를 알려줌. setName.size has: 값이 이미 있느지 검사. setName.has(값). true/false가 반환된다. delete: 값을 삭제. setName.delete(값). 해당 값 삭제. 존재하지 않을시 false 반환. 삭제되면 true 반환 clear: 모두 삭제. setName.clear() forEach(v,i,self(set)) index와..

자바스크립트의 조건문과 반복문도 자바의 그것들과 유사하다. - 조건문 if(조건절){실행문}; 으로 작성되며 조건절은 true나 false로 구분될 수 있어야한다. 다중조건문도 자바와 같이 if(조건절1){실행문1}else if(조건절2){실행문2}else{실행문3}의 형태로 작성 가능하다. switch문은 switch(변수 또는 식){ case 값1: 실행문; break; case 값2: 실행문; break; ... default: 구문; 로 작성한다. - 반복문 for, while, do~while문을 사용 가능하다. 역시 자바에서와 같은 형태로 작성된다. for(초기화 ; 조건식 ; 증감식){실행문}; while(조건식){실행문}; do {실행문1} while(조건식){실행문}; 으로 작성하면 된다..

자바스크립트에서도 데이터타입 string을 사용한다. string으로 정의된 문자열은 index 번호를 가지고 있다. 1. 명령어 - 문자열 일부 추출 substring(시작지점, 끝지점-1). slice(시작지점, 끝지점). substring과 같으나 음수 입력이 가능한 것이 특징이다. substr(시작지점, 시작지점부터의 개수). charAt(index) 해당 위치의 문자만 추출 - 대체 replace(기존 문자열, 새로운 문자열) 첫번째 대칭되는 문자열만 대체되며 대소문자가 구분된다. - 채우기 padStart(목표문자길이, 채울문자) 앞쪽에 채우기 padEnd(목표문자길이, 채울문자) 뒷쪽에 채우기 - 인덱스 indexOf(문자열, index from), lastIndexOf(문자열) 지정 문자열..

자바스크립트에서 객체란 상세 특징으로 표현된 식별할 수 있는 요소를 말한다. 객체의 지속성을 확보하기위해 주로 const로 선언된다. [자료형] 이름 = {속성명: 속성값, 속성명: 속성값 ...}으로 표현한다. 속성명은 같은 객체 내에서는 중복될 수 없다. 간단하게 활용해보자. dude라는 객체를 작성했다. 속성 중 자동차의 인트로 사항은 함수로 작성했다. 라인50은 자동차의 속성을 콘솔창에 출력해주는 것이고 라인51은 자동차의 속성을 리턴해주는 것이다. 테스트를 위해 콘솔에 출력해보자. 라인58은 intro라고만 작성했기에 intro 안에 있는 글이 그대로 출력되었다. 재밌는건 이벤트 객체인데, 이벤트 객체는 전역객체이며 모든 태그에 객체를 참조시킬 수 있다. 이런식의 사용이 가능하다.

자바스크립트에서 Function은 자바에서 메소드와 유사한 쓰임을 보인다. 너무 팡션? 사용 하지 마세요. JS에서는 많이 쓰인다. 펑션은 특정기능을 수행하기 위한 코드의 집합이다. 메소드처럼 호출되어야 작동한다. 일반적으로 function 키워드를 사용하여 선언된다. function [함수명](매개변수){기능 로직}의 구조로 작성되며 return 키워드로 함수의 종료시점을 지정할 수 있다. 바로 활용해보자. herName을 매개변수로 받는 callHerName이라는 함수를 만들어줬다. 일단 라인60에서 her는 김민수로 선언해줬고, 63에서는 차후 테스트를 위해 hisName을 홍길동으로 선언했다. 정상적으로 동작한다면 콘솔창에 ur name: 매개변수 ur another name: 김민수 가 출력이 ..