앱 만들기/JavaScript study38

• 

  새로운 윈도우 창 열기 함수 자바스크립트 를 사용해서 새로운 윈도우 창을 열 수 있습니다. 새로운 윈도우를 여는 함수는 window.open() 입니다. window는 자바스크립트 최상위 클래스 이며 기본 클래스로써 편의상 window 를 생략하고 사용할 수 있습니다. 예제를 통해 알아보겠습니다. 1. 신규 팝업창을 호출할 웹 문서를 만듭니다. 새 윈도우 팝업창 열기예제 여기서 중요한 것은 바로. open 함수 입니다 window.open("testPopup.html","popup" , "width=300, height=400, left=300 , top=300"); 첫번째 인자는 열고자 하는 파일명. 두번째 인자는 윈도우에 이름을 주어서 여러번 열리는 것을 방지하는 것 입니다. 세번째 인자는 윈도우의 크기 및 좌측 상단에서 얼마나.. 앱 만들기/JavaScript study 2023. 1. 10.

• 

  자바스크립트 콘솔창 단축키 자바스크립트 콘솔창 은 디버그 및 여러용도로 사용될 수 있습니다. 가장 많이 사용되는 크롬 브라우저를 예시로 들겠습니다. 물론 파이어폭스 및 기타 브라우저도 유사하니 응용하면 되겠습니다. 브라우저가 열린상태에서 Ctrl + Shift + J 혹은 F12 번을 누르면 콘솔창이 열립니다. 콘솔창에서는 직접 자바스크립트 코드를 실행 및 테스트 해볼 수 있습니다. 간단한 연산식도 바로 확인 가능하며, 자바스크립트 함수들도 실행해 볼 수 있습니다. 물론, 콘솔창은 앱 구동시 상황 및 트레이스를 할수 있는 디버그 활용 용도로 가장 많이 사용됩니다. 오늘은 브라우저 콘솔창 단축키 를 알아보았습니다. 감사합니다. 앱 만들기/JavaScript study 2023. 1. 2.

• 

  자바스크립트 로그 함수 자바스크립트 에서 로그를 출력하는 방법을 알아봅니다. 로그는 디버깅 시에 매우 유용한 함수 입니다. 사용방법은 하기와 같습니다. console.log() 인자값으로 스트링 및 변수를 출력할 수 있습니다. 다만 태그는 동작하지 않고 스트링으로 출력 됩니다. console.log("입력받은 폰번호는" + phone + " 입니다."); 콘솔 로그 창에 로그가 나오는 예제를 만들어 봅니다. 1. 콘솔 로그를 위해서 자바스크립트 파일을 생성합니다. var phone = prompt('전화번호를 입력하세요', '010-1234-5678'); document.write("입력받은 전화번호는" + phone + "입니다"); console.log("입력받은 폰번호는" + phone + " 입니다."); - 지난시간에.. 앱 만들기/JavaScript study 2023. 1. 1.

• 

  자바스크립트 출력함수 document.write() 웹페이지에 바로 출력을 할때 사용하는 함수 doucument.write() 입니다. 디버그 로그를 사용하지 않고, 간략히 값들을 웹페이지에 출력할 수 있는 함수 입니다. 사용법은 하기와 같습니다. document.write() 인자 값으로 태그 혹은 변수 및 string 으로 출력내용을 기재할 수 있습니다. document.write("입력받은 전화번호는" + phone + "입니다"); 인자는 "" 쌍다옴표 와 '' 작은 따옴표를 모두 지원합니다. 관련 예제를 만들어 봅니다. 1. 필드 팝업창으로 값을 입력받는 자바스크립트 파일을 만듭니다. var phone = prompt('전화번호를 입력하세요', '010-1234-5678'); document.write("입력받은 전화번호는" + phone + ".. 앱 만들기/JavaScript study 2022. 12. 31.

• 

  자바스크립트 입력 팝업창 만들기 자바스크립트 함수 중 입력필드를 가진 팝업창을 만들어 봅니다. 바로, prompt() 함수입니다. 영어로 prompt라는 뜻은 입력을 받을 준비하고 있는 컴퓨팅 상태를 의미합니다. 결과를 먼저 본다면 하기와 같습니다. 예제를 만들어 봅니다. 1. 자바스크립트 파일을 만듭니다. var phone = prompt('전화번호를 입력하세요', '010-1234-5678'); prompt() 함수 대소문자에 주의해야 합니다. 인자값은 "" , '' 두 개다 지원합니다. 두 번째 인자값은 필드영역에 들어갈 기본 값입니다. 두 번째 인자값이 없을 때는 필드가 공란으로 보입니다. 2. HTML 파일에서 자바스크립트 파일을 연결합니다. 확인 버튼을 선택하면, 필드에 입력된 값이 phone 변수에 저장이 됩니다. 해당 값.. 앱 만들기/JavaScript study 2022. 12. 30.

• 

  자바스크립트 confirm 팝업 함수 지난 시간 자바스크립트 함수 중 기본 팝업창을 띄우는 alert() 함수를 알아보았습니다. 이번 시간에는 확인, 취소 버튼이 있는 팝업창인 confirm() 함수입니다. 확인, 취소에 따른 동작을 구현하기에 좋은 팝업 창입니다. 사용법입니다. 자바스크립트 파일을 만들고, 하기처럼 코딩합니다. alert() 팝업 창과 매우 유사합니다. 역시, 대소문자 구별에 주의를 해야 합니다. confirm("confirm 팝업창을 종료하시겠습니다까?"); 해당 파일과 연결되어 있는 HTML 파일을 실행시키면 하기와 같은 결과를 얻을 수 있습니다. 참고로, 확인 및 취소 버튼 동작에 따른 값을 받고 싶을때는 하기처럼 코딩 하면 됩니다. var result = confirm("confirm 팝업창을 종료하시겠습니다까?").. 앱 만들기/JavaScript study 2022. 12. 29.

• 

  자바스크립트 팝업창 함수 자바스크립트 함수 중 기본 팝업창을 띄우는 alert() 함수 입니다. 간단한 팝업 메뉴를 보여줄 때 사용하면 되겠습니다. 사용법 입니다. 자바스크립트 파일을 만들고, 하기처럼 코딩 합니다. 단 한 줄 이면 됩니다. [merryChristmas.js] alert("alert 팝업창 입니다."); 해당 파일과 연결되어 있는 HTML 파일을 실행 시키면 하기와 같은 결과를 얻을 수 있습니다. alert 는 "알리다" 라는 뜻을 가진 영단어 입니다. 뜻 그대로, 알림 팝업창을 호출하고 싶다면 alert() 함수를 사용하면 됩니다. 참고로, 자바스크립트에서는 대소문자를 구별하기에 Alert() 라고 잘 못 표기하면 안되겠습니다. alert() 인자 값을 줄때는, " " , ' ' 두가지를 혼용해서 사용 가능 합.. 앱 만들기/JavaScript study 2022. 12. 28.

• 

  HTML에 자바스크립트 연결 하기 자바스크립트 파일을 HTML 파일과 분리하여 만들면 소스 관리 및 유지보수에 유용합니다., 여러 HTML에 하나의 자바스크립트 파일을 연동해서 사용할 수 있고, HTML 에는 웹 문서의 구조만 표현하고, 동적인 처리 들은 별도의 파일인 자바스크립트에서 관리해 주면 유지 보수의 효율성이 높아집니다. HTML 파일에 자바 스크립트 파일을 연결하는 방법은 하기와 같습니다. 1. 자바스크립트 파일 생성 - 비주얼스튜디오 에디터에서 한 줄로 팝업창 노출 코드를 작성 후 JS 파일로 저장합니다. 2. HTML에 자바스크립트 연결. 자바스크립트 파일이 HTML과 다른 폴더에 있다면, "폴더명/스크립트 파일명"을 기재해주면 됩니다. 해당 HTML을 실행하면, 하기와 같은 결과가 나옵니다! 정리하자면 자바스크립트 를 H.. 앱 만들기/JavaScript study 2022. 12. 25.