앱 만들기/JavaScript study38

• 

  자바스크립트 window 객체에 대해서 자바스크립트에서 window객체는 브라우저 창을 나타내며, 모든 브라우저에서 지원된다.마이소프트 Edge를 실행시켰다.여기 보이는 이창을 모두 나타내는 객체가 바로  window이다. 자바스크립트 DOM 역시 window 객체의 하부 객체이다.DOM은 화면 안의 웹 문서를 모두 객체 구조화 하여 DOM이란 객체에 담아낸다.자주 쓰이는 하기 루틴에서도 사실은 window 가 생략되어 있다.  document.getElementById("header");  [생략되기 전] window.document.getElementById("header");  window 가 창을 나타내고, document는 그 안의 내용을 객체로 담은 것이기에window는 당연하다고 보는 것이다.창을 나타내는 window는 당연히 하.. 앱 만들기/JavaScript study 2024. 8. 31.

• 

  document.writeln 과 document write 차이점 document.writeln과 document write 차이점이 둘의 차이점은 줄바꿈을 하느냐 하지 않느냐 이다.그런데, 자바 코드와는 달리 HTML의 pre 태그를 자바스크립트에 감싸 주어야 작동을 한다.하기와 같이 말이다.  이 코드를 브라우저에서 확인 해보면,줄 바꿈이 된 것을 확인할 수 있다.첫 줄의 들여 쓰기는 pre 태그와 writeln의 조합으로 보인다. 정확히 잘 모르겠다. 문단을 시작해 주는 것 같은 효과를 준다. document.writeln 은 텍스트 출력 후 줄 바꿈.docuemnt. wirte는 그냥 텍스트만 출력. 정리하자면,자바스크립트 를 사용해서 텍스트를 출력하기 위해서는 먼저. 1. HTML  pre 태그를 사용해야 한다.2. document.writeln 또는 wr.. 앱 만들기/JavaScript study 2024. 8. 29.

• 

  20강. 자바스크립트 타이머 만들기 19강. 로컬스토리지 사용하기18강. DOM을 활용하여 신규요소 제거하기17강. DOM을 활용하여 신규요소 추가하기16강. 웹 페이지를 동적으로 만들기15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함soo0100.tistory.com 타이머란?일정 시간에 어떤 일들을 반복해서 실행시키는 동작을 의미한다.타이머를 활용할 수 있으면, 게임을 만드는 기본 툴 하나를 완성했다고 볼 수 있다.19강까지의 강의를 통해서 우리는 랜덤함수를 만들었고, DOM을 활용해서 화면에 요소들을 추가 제거 그리고 로컬스토리지를 통해서 값을 저장했다.랜덤 함수 + 타이머만 가지고서도 간단한 게임을 만들 수 있다.오늘은 우선, 타이머를 가지고 카운팅 하는 예제를 만들어 본다. 1. 타이머 함.. 앱 만들기/JavaScript study 2024. 8. 20.

• 

  19강. 로컬스토리지 사용하기 18강. DOM을 활용하여 신규요소 제거하기17강. DOM을 활용하여 신규요소 추가하기16강. 웹 페이지를 동적으로 만들기15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문soo0100.tistory.com 입력받은 값을 브라우저를 종료하고 다시켜도 나타나도록 하기위해서 로컬 스토리지를 사용한다.물론, 서버에 저장해도 되지만 로컬에 저장하는 방법부터 먼저 공부한다. 1. 화면구성.텍스트 필드에 값을 입력한다.버튼 클릭시 화면에도 추가되면서, 내부적으로는 로컬스토리지 라는 브라우저 내부공간에 저장된다. 내가 좋아하는 과일을 적어주세요  소스에서는 input 태그를 사용해서 텍스트 필드와 버튼을 만들었고,추가될 영역을.. 앱 만들기/JavaScript study 2024. 8. 19.

• 

  로또 번호 자동 생성하기 지난 시간 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.