앱 만들기389

• 

  로또 번호 자동 생성하기 지난 시간 PC에 설치된 브라우저에서 로또번호 를 한개씩 생성하는 방법을 알아보았다.이번에는 6개의 숫자를 중복없이 생성하는 방법을 알아본다.실행 결과물은 하기와 같다.로또번호 받기 버튼을 클릭하면 로또 번호 6개를 받을 수 있다.  그럼, 소스를 살펴보자.  소스는 크게 자바스크립트 코드 부분과 HTML 요소 이렇게 두개로 나뉜다. 1. HTML 요소 (버튼 과 숫자가 표시될 영역)   1-1. 버튼 input 타입을 활용해서 버튼을 만들었다. 버튼 클릭시 동작을 위해서 lotto2() 함수를 연결한다.  1-2. div (숫자가 표시될 영역) 숫자가 표시될 영역으로 div 요소를 설정한다. 2. 자바스크립트 ( 함수 )버튼 클릭시 동작을 위한 자바스크립트 함수 부분이다.로또 번호를 얻는 .. 앱 만들기/JavaScript study 2024. 8. 15.

• 

  로또 숫자 만들기 with 자바스크립트 (랜덤 함수 활용하기) 로또는 45개로 이루어진 숫자이다.로또 번호 6개가 갑자기 생각이 안난다면, 여러분의 브라우저를 통해서 6개의 랜덤한 숫자를 받을 수 있다.물론 동행복권 사이트 및 다른 방법을 통해서도 할 수 있지만,아주 간단히 여러분의 PC에서도 가능하다. 1. 브라우저를 연다. (크롬이면 더 좋겠다)2. 키보드 F12번을 누른다.3. 브라우저 오른편에 하기와 같은 창이 나온다.4. 콘솔 탭을 선택한다. 5. 이제 여러분의 브라우저를 통해서 랜덤 숫자 6개를 받을 준비가 완료되었다. 콘솔창 커서 부분에 하기 명령어를 입력한다. Math.floor(Math.random()*46); 뜻은 우선은  몰라도 된다.여러번 입력하면, 랜덤한 숫자들이 나온다.숫자들이 중복될 수는 있지만 0~45까지의 숫자가 나온다.물론 0을 제외.. 앱 만들기/JavaScript study 2024. 8. 12.

• 

  17강. DOM을 활용하여 신규요소 추가하기 16강. 웹 페이지를 동적으로 만들기15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는soo0100.tistory.com 동적으로 HTML신규 요소(Element) 를 추가한다.이 동작을 하기위해서는 DOM의 createElement() 와 appendChild() 함수를 사용해야 한다. 예제를 만들어보자. 이곳에 신규 요소가 생성됨  1. body 에서 버튼 과 신규요소가 생성될 div 영역을 만들었다.   신규 요소는 p 이다. 2. 버튼을 클릭하면 addItem() 함수가 실행될수 있도록 버튼 속성에 onclick 을 정의한다. 3. add.. 앱 만들기/JavaScript study 2024. 8. 5.

• 

  16강. 웹 페이지를 동적으로 만들기 15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는 하기와 같다. funsoo0100.tistory.com 웹 페이지를 동적으로 만들기란. 바로 사용자의 행동에 반응하는 웹페이지를 의미한다.기존 앞에서 서술했던 HTML 과 CSS 만으로만 웹 페이지를 만들면그저 정보를 보여주는 역할에만 충실하게 된다. 예를 들어 버튼 클릭시 화면이 변화하게 만들어야 된다면, 바로 자바스크립트를 활용해야 한다.이것이 바로 동적인 웹 페이지를 만드는 기본적인 개념이다.앞 시간에 보았던 팝업창을 띄워주는 alert() 역시 자바스크립트에서 기본으로 제공해주는 함수이다.기본적으로 제.. 앱 만들기/JavaScript study 2024. 8. 3.

• 

  15강-2. 버튼 만들기 (함수 이용) 15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는 하기와 같다. funcsoo0100.tistory.com 지난 시간 onlick 속성에 alert() 함수를 사용해서 팝업을 띄웠다.이번 시간에는 onclick 속성에 함수를 연결해 본다.  위와 같이 popup() 이라는 함수를 만든 후 onclick 속성에서 함수를 호출한다.결과 동작은 15강 과 동일하게 팝업창이 잘 나온다.함수를 연결하여 HTML요소의 동작요소를 처리 할 수 있다. 앱 만들기/JavaScript study 2024. 7. 30.

• 

  15강. 버튼 만들기 14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는 하기와 같다. function 함수이름(){  자바스크립트 구문} soo0100.tistory.com 지난 시간 HTML 요소를 클릭 시 동작하는 onclick 속성에 대해서 다루어 보았다.이번 시간은 한걸음 더 나아가 버튼을 만들고 버튼을 선택하면 어떤 액션을 수행하는 코드를 작성해 본다.웹 페이지 또는 웹 게임을 만들더라도 버튼 클릭 시 동작을 하는 것이 프로그래밍의 기본이 된다. 1. 버튼 만들기버튼을 만들기 위해서, 버튼 태그를 사용할 수도 있으나 여기서는 input 태그를 사용한다.     input 태그 속성으로 ty.. 앱 만들기/JavaScript study 2024. 7. 23.

• 

  14강. HTML요소 클릭시 동작하도록 만들기. 13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는 하기와 같다. function 함수이름(){  자바스크립트 구문} 함수를 만들기 위해서는 먼저1. fusoo0100.tistory.com HTML요소 즉, 화면에 보이는 버튼 이미지, 텍스트 등을 선택시 어떤 액션이 동작하도록 구현하기 위해서는HTML요소에 자바스크립트 코드를 직접 등록하면 된다. 구글 홈페이지 네이버로 이동 HTML 요소가 클릭 되었을때, 자바스크립트 코드가 동작하기 위해서는해당 HTML요소에 onclick 속성을 추가하면 된다. onclick="자바스크립트 코드; "  쌍따옴표 사이에는 자바스크립트 코드를 작성하고 마무리는 ; 을 꼭 적어준다. 위.. 앱 만들기/JavaScript study 2024. 7. 11.

• 

  13강. 자바스크립트 함수 사용법 12강. 자바스크립트 if 조건문 사용방법11강. 자바스크립트 블럭 과 변수 사용법HTML과 CSS로 만들어진 웹 사이트는일반적으로 정보를 기술하고 보여주는 역할만 할 수 있다. 사용자가 특정액션을 취했을때 동작을 하거나 상호 반응을soo0100.tistory.com 함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는 하기와 같다. function 함수이름(){  자바스크립트 구문} 함수를 만들기 위해서는 먼저1. function 키워드를 적어준다.2. 함수 이름을 적고 ()를 붙여준다3. () 괄호 안에는 매개변수(parameter)라고 불리는 값이 들어올 수 있다. 공백일 때는 값이 없을 때이다.4. {} 안에 자바스크립트 구문들이 실행된다.5. {} .. 앱 만들기/JavaScript study 2024. 7. 8.

• 

  12강. 자바스크립트 if 조건문 사용방법 11강. 자바스크립트 블럭 과 변수 사용법HTML과 CSS로 만들어진 웹 사이트는일반적으로 정보를 기술하고 보여주는 역할만 할 수 있다. 사용자가 특정액션을 취했을때 동작을 하거나 상호 반응을 보이기 위해서는 자바스크립트라는 프로soo0100.tistory.com 자바스크립트 if 조건문은 참/거짓에 따라 명령문을 분기하는 구조를 가진 조건문 이다.If() 다음의 괄호 안에 값이 참이면, { } 괄호 안의 구문이 실행되고  거짓이라면 실행되지 않는다. if(참/거짓){   statement(구문)} 추가로, else{ }  도 사용이 된다. if() 조건문이 거짓이라면 else { } 안의 구문이 실행된다. if(참/거짓){  참일때 }else{    거짓일때 }  예제를 실행하면, 두개의 문자열이.. 앱 만들기/JavaScript study 2024. 7. 6.

• 

  11강. 자바스크립트 블럭 과 변수 사용법 10강. 하이퍼링크 만들기웹 사이트는 많은 웹 페이지들로 연결되어 있다.특정 이미지나 텍스트를 클릭하면 새로운 페이지가 열리는 동작을 하이퍼링크 라고 말한다.HTML a태그 가 바로 이 하이퍼링크 기능르 수행한다. soo0100.tistory.com HTML과 CSS로 만들어진 웹 사이트는일반적으로 정보를 기술하고 보여주는 역할만 할 수 있다. 사용자가 특정액션을 취했을때 동작을 하거나 상호 반응을 보이기 위해서는 자바스크립트라는 프로그래밍 언어를 사용해야 한다. 대표적인 것이 게임이다.  자바스크립트를 사용하면 웹 게임 역시 개발이 가능하다. 웹 문서에서 자바스크립트를 사용하기 위해서는 닫힘 태그 사이에 자바스크립트를 코딩해야 한다.즉, 브라우저에게 script 태그 사이의 콘텐츠 가 "자바스크립트 코.. 앱 만들기/JavaScript study 2024. 7. 5.