반응형 앱 만들기/JavaScript study38 var 과 let 예약어 차이점 자바스크립트 ES6버전(2015년 발표) 이후에는 let 예약어를 사용해서 변수를 선언하는 것을 추천하고 있습니다. var 를 사용한다고 해서 큰 일이 나는 것은 아니나, var 예약어가 가지는 예상치 못한 코딩 실수를 줄여주기 위한 기능이 let 에는 들어있기에 권장하고 있다고 생각됩니다. 오늘은 var 과 let 의 차이점을 알아 보겠습니다. 먼저, 하기 예제로 var 예약어가 가지는 약점들을 확인 해 봅니다. let 예약어 예제 var 약점은 3가지로 뽑아 볼 수 있습니다. 위 주석처럼, 첫버째는 변수 선언시 예약어를 적지 않으면 전역변수로 선언이 되기에, 나의 의도와 별개로 동작을 할 가능성 이 있습니다. 두번째, 자유도가 높은 자바스크립트가 가지는 특색 중 하나라고 생각합니다. (자바에서는 생각.. 2023. 1. 13. 윈도우 창 닫기 함수 자바스크립트 를 활용하여 윈도우 창을 닫는 예제를 만들어 보겠습니다. 먼저 지난시간, 팝업창을 여는 open() 함수 예제를 재사용 하겠습니다. 코드는 하기와 같습니다. 1. 윈도우 창 열기 새 윈도우 팝업창 열기예제 2. 해당 윈도우 창에서 닫기 예제 새로운 팝업창 입니다 닫기 2번 항목에서 중요한 것은 바로 close() 함수 입니다. 자바스크립트 함수로도 윈도우 창을 닫는 역할을 수행 합니다. 닫기 예시를 위해서 닫기 버튼을 만들고, 태그 안에 이벤트 설정을 해줍니다. 버튼이 눌렀을때 이벤트 이기에 onclick 를 기재하고 뒤에는 자바스크립트 함수임을 알려주기 위해서 "javascript: 자바스크립트 함수" 이런식 으로 코딩 합니다. 위 처럼 닫기 창을 선택하면, 팝업창이 사라지고 1번 예제의 .. 2023. 1. 12. 자바스크립트 함수만들기 자바스크립트 에서 함수를 만드는 방법 입니다. 우선, 함수는 여러번의 실행 코드를 하나의 단위로 만들어서 필요할때 마다 편리하게 여러번 사용할 수 있는 장점이 있습니다. 예제를 살펴보겠습니다. 자바스크립트 함수 만들기 위 코드는 두수의 합을 구하는 소스 입니다. 결과는 하기처럼 팝업창에 합을 보여 줍니다. 그런데 이런 동작을 여러 파일 혹은 여러 곳에서 사용하려고 한다면, 같은 코드를 여러번 적어야 할까요? 그 답이 바로 함수 입니다. 함수를 만들어 놓으면 언제든 함수를 호출하여 편리하게 사용할 수 있습니다. 함수로 변경한 예제는 하기와 같습니다. 자바스크립트 함수 만들기 더하기 코드 부분을 함수로 만들었습니다. 자바스크립트에서 함수를 만드는 방법은 첫째, 함수를 정의 합니다. function 이라는 예.. 2023. 1. 11. 새로운 윈도우 창 열기 함수 자바스크립트 를 사용해서 새로운 윈도우 창을 열 수 있습니다. 새로운 윈도우를 여는 함수는 window.open() 입니다. window는 자바스크립트 최상위 클래스 이며 기본 클래스로써 편의상 window 를 생략하고 사용할 수 있습니다. 예제를 통해 알아보겠습니다. 1. 신규 팝업창을 호출할 웹 문서를 만듭니다. 새 윈도우 팝업창 열기예제 여기서 중요한 것은 바로. open 함수 입니다 window.open("testPopup.html","popup" , "width=300, height=400, left=300 , top=300"); 첫번째 인자는 열고자 하는 파일명. 두번째 인자는 윈도우에 이름을 주어서 여러번 열리는 것을 방지하는 것 입니다. 세번째 인자는 윈도우의 크기 및 좌측 상단에서 얼마나.. 2023. 1. 10. 자바스크립트 콘솔창 단축키 자바스크립트 콘솔창 은 디버그 및 여러용도로 사용될 수 있습니다. 가장 많이 사용되는 크롬 브라우저를 예시로 들겠습니다. 물론 파이어폭스 및 기타 브라우저도 유사하니 응용하면 되겠습니다. 브라우저가 열린상태에서 Ctrl + Shift + J 혹은 F12 번을 누르면 콘솔창이 열립니다. 콘솔창에서는 직접 자바스크립트 코드를 실행 및 테스트 해볼 수 있습니다. 간단한 연산식도 바로 확인 가능하며, 자바스크립트 함수들도 실행해 볼 수 있습니다. 물론, 콘솔창은 앱 구동시 상황 및 트레이스를 할수 있는 디버그 활용 용도로 가장 많이 사용됩니다. 오늘은 브라우저 콘솔창 단축키 를 알아보았습니다. 감사합니다. 2023. 1. 2. 자바스크립트 로그 함수 자바스크립트 에서 로그를 출력하는 방법을 알아봅니다. 로그는 디버깅 시에 매우 유용한 함수 입니다. 사용방법은 하기와 같습니다. console.log() 인자값으로 스트링 및 변수를 출력할 수 있습니다. 다만 태그는 동작하지 않고 스트링으로 출력 됩니다. console.log("입력받은 폰번호는" + phone + " 입니다."); 콘솔 로그 창에 로그가 나오는 예제를 만들어 봅니다. 1. 콘솔 로그를 위해서 자바스크립트 파일을 생성합니다. var phone = prompt('전화번호를 입력하세요', '010-1234-5678'); document.write("입력받은 전화번호는" + phone + "입니다"); console.log("입력받은 폰번호는" + phone + " 입니다."); - 지난시간에.. 2023. 1. 1. 자바스크립트 출력함수 document.write() 웹페이지에 바로 출력을 할때 사용하는 함수 doucument.write() 입니다. 디버그 로그를 사용하지 않고, 간략히 값들을 웹페이지에 출력할 수 있는 함수 입니다. 사용법은 하기와 같습니다. document.write() 인자 값으로 태그 혹은 변수 및 string 으로 출력내용을 기재할 수 있습니다. document.write("입력받은 전화번호는" + phone + "입니다"); 인자는 "" 쌍다옴표 와 '' 작은 따옴표를 모두 지원합니다. 관련 예제를 만들어 봅니다. 1. 필드 팝업창으로 값을 입력받는 자바스크립트 파일을 만듭니다. var phone = prompt('전화번호를 입력하세요', '010-1234-5678'); document.write("입력받은 전화번호는" + phone + ".. 2022. 12. 31. 자바스크립트 입력 팝업창 만들기 자바스크립트 함수 중 입력필드를 가진 팝업창을 만들어 봅니다. 바로, prompt() 함수입니다. 영어로 prompt라는 뜻은 입력을 받을 준비하고 있는 컴퓨팅 상태를 의미합니다. 결과를 먼저 본다면 하기와 같습니다. 예제를 만들어 봅니다. 1. 자바스크립트 파일을 만듭니다. var phone = prompt('전화번호를 입력하세요', '010-1234-5678'); prompt() 함수 대소문자에 주의해야 합니다. 인자값은 "" , '' 두 개다 지원합니다. 두 번째 인자값은 필드영역에 들어갈 기본 값입니다. 두 번째 인자값이 없을 때는 필드가 공란으로 보입니다. 2. HTML 파일에서 자바스크립트 파일을 연결합니다. 확인 버튼을 선택하면, 필드에 입력된 값이 phone 변수에 저장이 됩니다. 해당 값.. 2022. 12. 30. 자바스크립트 confirm 팝업 함수 지난 시간 자바스크립트 함수 중 기본 팝업창을 띄우는 alert() 함수를 알아보았습니다. 이번 시간에는 확인, 취소 버튼이 있는 팝업창인 confirm() 함수입니다. 확인, 취소에 따른 동작을 구현하기에 좋은 팝업 창입니다. 사용법입니다. 자바스크립트 파일을 만들고, 하기처럼 코딩합니다. alert() 팝업 창과 매우 유사합니다. 역시, 대소문자 구별에 주의를 해야 합니다. confirm("confirm 팝업창을 종료하시겠습니다까?"); 해당 파일과 연결되어 있는 HTML 파일을 실행시키면 하기와 같은 결과를 얻을 수 있습니다. 참고로, 확인 및 취소 버튼 동작에 따른 값을 받고 싶을때는 하기처럼 코딩 하면 됩니다. var result = confirm("confirm 팝업창을 종료하시겠습니다까?").. 2022. 12. 29. 이전 1 2 3 4 5 다음 반응형
