웹언어 (193) 썸네일형 리스트형 [JS강좌] 13강 자바스크립트 로또 자동만들기 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=lAnrCuVxNWc See the Pen 로또생성하기 by OSSAM (@5ssam) on CodePen. - 이번강좌에서는 자바스크립트로 로또를 자동으로 만드는 방법을 알아보도록 하겠습니다. - 그동안 배웠던 Array객체와 Math객체를 활용한 아주 좋은 예제가 되겠습니다. - 아래는 만드는 과정이고 위에 정답을 바로 볼 수 있도록 코드펜으로 연결해놓았습니다. 1. 배열 생성하기 - 우선적으로 로또는 6개의 번호를 반환하는 게임입니다. - 그래서 6개의 숫자를 담을 배열을 선언해줍니다. ## 코드 보기 2. 6개 번호를 할당받기 위한 반복문 처리 - 번호 한개 받을 때마다 코드를 적으면 .. [Git과 GitHub강좌] 2강 VS CODE로 GitHub 쉽게 사용하기 1. GitHub 이란? 1) GitHub란? - [GitHub]란 소프트웨어 개발 프로젝트를 위한 소스코드 관리 서비스입니다. - 여기에 소스코드열람, 버그관리, SNS기능까지 갖추고 있어 개발자에게는 필요한 서비스입니다. - 기업들 중에서도 GitHub를 사용하여 버전관리를 하고 있는 곳도 있어서 취업시 GitHub사용가능자를 물어보기도 하죠 2) GitHub 가입 - 주소 : github.com/ GitHub: Where the world builds software GitHub is where over 56 million developers shape the future of software, together. Contribute to the open source community, manage .. [Git&GitHub강좌] 1강 Git(깃) 시작하기 - 오쌤의 니가스터디 1. Git(깃) 이란? - Git(깃)은 꼭 개발자만 사용하는 것은 아닙니다. 많은 문서를 다루고, 수정한 문서를 관리하는 일이 필요한 모든 사람들이 사용하면 많은 도움을 받을 수있습니다. - 하나의 프로그램을 개발하기 위해서는 소스 코드를 수백번 수정하기 마련인데, Git(깃)이 이 과정을 많이 도와주기 때문에 사용합니다. - 그리고 공유하는 문서의 파일을 다른 사람이 수정편집하는 바람에 내용이 지워지거나 문제가 되는 경우도 많이 있습니다. - GIt(깃)이란 소소코드를 효과적으로 관리하기 위해 개발된 '분산형 버전 관리 시스템'입니다. 원래는 Linux 소스코드를 관리할 목적으로 개발되었습니다. - Git(깃)은 소스코드가 변경된 이력을 쉽게 확인할 수 있고, 특정 시점에 저장된 버전과 비교하거나 .. [ES6강좌] 7강 Array객체의 메서드 추가 - 오쌤의 니가스터디 1. find() 메서드 - find() : 함수의 조건을 통과한 첫 번째 배열 요소 값을 반환하는 메서드입니다. ## 문법 find(함수명) ## 예제 - 20보다 큰 숫자 중자 중 첫번째 배열 요소를 찾음 var nums = [4,9,16,25,29]; function test(x){ //함수에 조건을 작성 return x > 20; } document.write(nums.find(test)); - 결과는 문서에 20보다 큰숫자에서 첫 번째 배열 요소인 25가 나옵니다. 2. findIndex() 메서드 - findIndex() : 함수의 조건을 통과한 첫 번째 배열 요소의 인덱스 번호를 반환하는 메서드입니다. ## 문법 findIndex(함수명); ## 예제 - 20보다 큰 숫자 중자 중 첫번째 배.. [ES6강좌] 6강 Import & Export 모듈화 - 오쌤의 니가스터디 1. 모듈화의 필요성 - 기본적으로 자바스크립트의 유효 범위는 전역으로 시작합니다. - 따라서 아래와 같이 코딩하면 js를 읽어오지만 원하는 결과를 줄 수는 없습니다. ## test01.js var a = 10; function test() { return a; } ## test02.js var a = 20; ## test.html - 모듈화란 다른 파일의 자바스크립트기능을 특정 파일에서 사용하는 것을 말합니다. - 그 이유는 다른 파일에서 변수나 함수나 객체명이 같을 수 있습니다. - 그래서 에러 혹은 값이 변경되는 큰 문제가 발생됩니다. - 자바스크립트는 준비구문을 한번 쓰지만 제이쿼리같은 경우는 준비구문을 여러번 작성해서 각각의 라이브러리가 갖고 있는 변수가 겹치지 못하게 미리 막습니다. - 자바스.. [ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디 1. 배열의 비구조화할당(destructuring assignment) - 비구조화할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식입니다. 1) 기존 배열 값을 해체(ES6전 코드) ## 코드 //배열선언 const animalList = ['CAT', 'DOG', 'TIGER']; //각각 변수담기 const cat = animalList[0]; const dog = animalList[1]; const tiger = animalList[2]; //각각호출 console.log(cat); console.log(dog); console.log(tiger); - 배열이 갖은 값을 각각 꺼내어 쓰려면 이렇게 직접 하나하나 지정했습니다. - 작성하기 귀찮.. [ES6강좌] 4강 Class 문법추가 - 오쌤의 니가스터디 1. class 선언하기 - java에서는 클래스를 객체를 만들기 위한 설계도라고 부릅니다. - 객체를 생성하기 위한 필드와 메소드가 정의되어 있는 설계도입니다. - 인스턴스라고 하는 것은 클래스로부터 만들어진 객체입니다. 하나의 클래스는 여러개 인스턴스 생성할수있습니다. - 예시로 동일한 설계도로 여러 대의 자동차를 생산하는 것과 같은 의미입니다. - 클래스는 일종의 함수지만 function키워드 대신 class키워드를 사용한다. - 속성은 constructor()메서드 내부에 할당됩니다. - class는 사실 함수이기 때문에 함수선언식과 변수선언식으로 둘다 선언할 수 있다. 1) 함수선언식의 class문법 ## 선언 문법 class 클래스명{ constructor(){ this.속성명 = 값; } 메.. [ES6강좌] 3강 향상된 객체 리터럴(Object Literal) - 오쌤의 니가스터디 1. 향상된 객체 리터럴(Enhanced Object Literal) - 향상된 객체 리터럴이란 기존 자바스크립트에서 사용되던 객체 정의 방식을 개선한 문법입니다. - 자주 사용하던 문법을 한층 더 간결하게 작성할 수 있도록 도와줍니다. 1) 기존 객체 정의 방식 ## 문법 var 객체명 = { 속성: 값, 메서드: function(){ //메서드 명령 } } ## 예시 코드 var person = { name: '홍길동', age: 20, walk: function(){ console.log(this.name + '이 걷습니다.'); } } 2) 축약문법 ## 속성명과 속성값이 같으면 한번만 작성해도 됨 var test = { //javascript: javascript, javascript } con.. 이전 1 ··· 9 10 11 12 13 14 15 ··· 25 다음
