Every step counts

공부했던 setInterval과 setTimeout을 활용하여 화면을 만들어보자. 특정 문장의 글자가 마치 타이핑을 하듯 한글자씩 화면에 순차적으로 출력되도록 하고 커서바가 깜빡이는 효과도 줄 것이다. language Learn New Language 시작은 역시 HTML 태그 빌딩 let sents = ["Bienvenue!", "Welcome!", "歡迎!", "환영합니다!"]; let randSent = ""; 전역변수로는 두가지를 쓸 것이다. 먼저 네가지 언어로된 인사가 담긴 sents라는 배열과 이중 랜덤으로 뽑힌 문장을 담을 randSent이다. randomSent(); function randomSent() { randSent = sents[parseInt(Math.floor(Math.ran..

일정시간이 지난 후 코드를 실행시키는걸 호출 스케줄링이라고 한다. 두가지 명령어로 스케줄링이 가능하다. setTimeout : 일정시간이 지난 후 코드를 실행시킴 setInterval : 일정시간 간격을 두고 코드를 실행시킴 이런 차이로 setTimeout은 주로 단회성 코드에, setInterval은 반복되는 코드에 지연이 필요할 때 사용된다. 문법은; setTimeout(callback function, duration) setInterval(callback function, interval duration) 으로 작성된다. duration에 들어가는 숫자는 밀리초(1/1000초)이다. setTimeout은 해당 시간 이후 callback function이 실행되고 setInterval은 callba..

HTML, CSS, JS를 모두 사용하여 활용하는 연습이다. 인풋박스에 준비물이름을 작성하고 버튼을 누르면 버튼 박스 아래 리스트에 추가된다. 추가된 아이템은 각기 아이템 이름 오른편에 있는 X를 누르면 리스트에서 삭제된다. 어려울거 없다. 먼저 HTML로 뼈대를 잡자. 여행 준비물 점검 목록 추가 간단하게 h2 헤더하나 두고 준비물이름을 작성 받을 인풋박스와 리스트에 더해줄 버튼, 그리고 리스트가 출력될 자리를 설정했다. 스크립트 오픈 let cnt = 0; let itemNm = ""; let arr = []; 사용할 전역변수들을 선언한다. 사실 처음부터 세개를 모두 선언한건 아니고, 알고리즘을 짜고 시행착오를 거치며 필요한 변수를 추가하기도 했다. document.getElementById("ite..

document 영역에서 사용되어지는 이벤트 함수들을 보자. 마우스 이벤트: click(), focus(), blur(), input(), change(), mouseover(), mouseout(), drag() => drop(), select(), scroll() 키보드 이벤트: keydown(), keypress(), keyup() 기타 이벤트 관련 함수들: target, submit(), reset(), search() 함수를 태그 속성이나 요소에 직접 부여하는 방식보다는 차후 수정이나 유지보수의 편의를 위해 addEventListener('eventName', callback Function) 함수 사용을 권장한다. 간단하게 활용해보자. 엘비스 삼촌이 씐나게 춤추는 Fun in Acapulco의..

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와..