프로그래밍 언어/자바스크립트 7

자바스크립트 이벤트 관련 문제 모음

이벤트 처리 문제 연습 1. 증감 버튼 +버튼을 클릭하면 값이 1씩 증가하고 –버튼을 클릭하면 값이 1씩 감소하 도록 구현. 만약 값이 1인 상태에서 –버튼을 클릭하면 값이 감소되지 않고 1인 상태로 유지. 갯수 + - 2. 체크박스 선택 결과 출력 취미에 해당하는 체크박스를 선택하고 [결과보기]버튼을 클릭하면 선택 된 값들을 출력하는 예제이다. 취미 야구 농구 게임 결과보기 결과값: 3. 글자수 세기 textarea에 입력한 글자의 개수를 출력하는 예제이다. 글자를 입력할 때 마다 동시에 입력 문자수에 입력한 글자 개수가 출력된다. 글자수 세기 입력문자수: 4. 전체선택 체크박스 전체선택을체크하면모든체크박스가선택이되고,전체선택을해제 하면 모든 체크박스가 해제된다. 전체선택 java sql angular..

자바 스크립트에서의 객체 생성 방법

자바의 경우 new 를 통하여 객체 생성 class Student{ int age; String name; } Student student = new Student(); 객체 기반 언어인 자바스크립트에서는 다양한 방법으로 객체를 생성할 수 있다. 객체 리터럴 1. Object 생성자 함수 2.생성자 함수 3.Object.create 메서드 4. 클래스(ES6) 1. 객체 리터럴 방식(Object Literal) 객체 리터럴은 중괄호 안에 프로퍼티를 정의하여 객체를 생성 var obj = { key: value, ... } : 변수처럼 객체를 생성하는 방식으로, 중괄호 { } 안에 key:value를 쉼표(,)로 구분하여 만든다. 약 중괄호 안에 프로퍼티를 정의하지 않으면 빈 객체가 생성된다. 클래스를 정..

ES6 문법 정리(중요)

1. const 6이전에는 var 키워드가 전부 였으나, let 과 const를 제공하기 시작함. var study = true; study = false; console.log(study) // false const study = true; study = false; //Uncaught TypeError가 발생함 한번 활당후 다시 할당이 불가능 함. 2. let var study = "자바스트립트"; if(study){ var study = "리액트"; console.log('공부하자', study); // 공부하자 리액트 } console.log('재밌다', study); // 재밌다 리액트 if문 안의 study값을 변경하면 if밖의 study도 변경됨.(호이스팅) let을 사용하면 변수 영역을 코..

자바스크립트 - 가위바위보 게임

DOCTYPE html> Insert title here body{ height: 100vh; display: flex; flex-direction:column; justify-content: space-between; } $(document).ready( () => { function ComputerRspPlayer(yourRsp){ this.rsp = ['가위', '바위', '보']; this.img = ['./img/가위.png', './img/바위.png', './img/보.png']; console.log(Math.floor(Math.random() * 3)); this.computerRsp = this.rsp[Math.floor(Math.random() * 3)]; this.getResult ..