JavaScript
-
[jQuery] jQuery를 사용한 객체 조작 및 생성JavaScript 2023. 10. 27. 11:06
input 태그의 값(value) 가져오기 $(function(){ // input 태그의 값(value) 가져오기 let result = $("#user_name").val(); alert(result); }) 이 코드는 #user_name 요소에서 val() 함수를 사용하여 input 태그의 값을 가져옵니다. 그 값을 result 변수에 저장하고 alert를 사용하여 값을 표시합니다. input 태그의 값을 변경하기 $(function(){ // input 태그의 값(value) 변경하기 $("#user_name").val("javascript"); }) 이 코드는 #user_name 요소의 val() 함수를 사용하여 input 태그의 값을 "javascript"로 변경합니다. Query를 사용하면 ..
-
jQuery 선택자JavaScript 2023. 10. 27. 10:50
모든 요소 선택하기 아래의 코드는 jQuery를 사용하여 웹페이지의 모든 요소를 선택하고 외각선을 1px solid blue로 설정하는 예제입니다. $(function(){ // * : 전체 선택자 // 전체 태그를 선택해서 외곽선 1px solid blue로 변경 $("*").css("border", "1px solid blue"); }); 위 코드는 $("*")를 사용하여 페이지 내의 모든 요소를 선택하고, css("border", "1px solid blue")를 사용하여 선택한 모든 요소의 외곽선 스타일을 변경합니다. id를 사용하여 요소 선택하기 $(function(){ // id가 "tit"인 요소를 선택하고 스타일을 변경 $("#tit").css("background-color", "#ff0..
-
[jQuery] jQuery를 사용한 웹 페이지 요소 조작JavaScript 2023. 10. 27. 10:14
jQuery 란? 웹 개발에서 jQuery는 널리 사용되는 라이브러리 중 하나로 HTML 요소를 선택하고 조작하는 작업을 더 간편하게 만들어 줍니다. jQuery 라이브러리 로드 jQuery를 사용하기 위해 먼저 해당 라이브러리를 HTML 문서에 로드해야 합니다. jQuery는 다음과 같이 CDN(Content Delivery Network)을 통해 불러올 수 있습니다. 위 코드를 태그 내에 추가 하면 jQuery 라이브러리를 사용할 수 있게 됩니다. jQuery 코드 작성 jQuery 코드를 작성하려면 문서가 로드된 후에 실행되도록 하는 것이 좋습니다. 이를 위해 $(function(){}) 구문을 사용합니다. 이 구문은 페이지가 로드될 때 jQuery 코드를 실행 합니다. HTML 요소 선택과 조작 ..
-
[DOM] JavaScript로 페이지 스크롤 제어하기JavaScript 2023. 10. 27. 09:48
스크롤 위치 이동 JavaScript를 사용하여 스크롤 위치를 이동하려면 window.scrollTo(x,y) 함수를 사용합니다. 아래의 코드를 통해 스크롤을 지정된 좌표로 이동시킬 수 있습니다. // x와 y 좌표로 스크롤 이동 window.scrollTo(0, 300); 위의 코드는 x 좌표 0 과 y 좌표 300으로 스크롤을 이동시킵니다. 이렇게 원하는 위치로 스크롤을 이동할 수 있습니다. 현재 스크롤 위치 확인 때로는 현재 스크롤 위치를 확인하고 싶을 때가 있습니다. 이를 위해 window.scrollY 를 사용하여 웹브라우저에서 y축을 기준으로 스크롤된 위치를 확인할 수 있습니다. 아래 코드는 스크롤 위치를 표시합니다. // 현재 스크롤된 위치를 표시 document.querySelector("..
-
[DOM] JavaScript로 화면 및 웹 브라우저 크기 가져오기JavaScript 2023. 10. 27. 09:43
화면 크기 가져오기 JavaScript를 사용하면 화면의 가로와 세로 크기를 가져올 수 있습니다. 아래 코드를 통해 화면의 가로와 세로 크기를 출력합니다. // 화면의 가로 크기 let screenWidth = screen.width; // 화면의 세로 크기 let screenHeight = screen.height; 웹 브라우저 크기 가져오기 웹 브라우저의 가로와 세로 크기를 가져오려면 window.innerWidth 와 window.innerHeight 를 사용합니다. 이를 통해 웹페이지 내에서 웹 브라우조 화면을 크기를 확인할 수 있습니다. // 웹 브라우저의 가로 크기 let browserWidth = window.innerWidth; // 웹 브라우저의 세로 크기 let browserHeight..
-
[DOM] JavaScript로 페이지 이동하기 Location 객체 활용JavaScript 2023. 10. 27. 09:29
Location 객체 란? location 객체는 현제 웹 페이지의 URL 정보를 다룰 때 사용하는 JacaScript 객체입니다. 이 객체를 활용하면 다른 웹페이지로 이동하거나 현재 URL을 변경할 수 있습니다. 페이지 이동 예제 예제1 - 페이지 이동 아래는 버튼을 클릭했을 때 공지사항 이동 버튼을 누리면 notice.html 페이지로 이동하는 예제 코드입니다. 공지사항 이동 함수 movePage에서 location.href를 변경함으로 써 새로운 URL로 이동합니다. 이렇게 간단한 JavaScript코드를 사용하여 웹페이지 간의 이동을 구현할 수 있습니다. 예제 2- 페이지 이동 및 이력제어 이번에는 페이지 이동과 함께 history 객체를 사용하여 이력을 제어하는 예제 코드입니다. moveNave..
-
[DOM] JavaScript로 팝업 창 열기와 닫기JavaScript 2023. 10. 27. 09:22
팝업 창 열기 먼저 JavaScript 를 사용하여 새로운 창을 열어보겠습니다. 아래 코드는 버튼을 클릭했을 때 "notice.html" 파일을 doit 라는 이름으로 새로운 창으로 엽니다. function openWin() { let opt = "width=400,height=350"; // 새 창 크기 myWin = window.open("notice.html", "doit", opt); } 함수 openWin 에서 window.open 함수를 사용해서 새로운 창을 열어 notice.html 파일을 띄우고 창의 이름은 doit로 정의하며 크기를 조절합니다. 팝업 창 닫기 다음으로 열린 팝업 창을 닫는 함수를 만들겠습니다. function closeWin() { myWin.close(); // 열린 팝..
-
[DOM]JavaScript로 달력 및 시간 가져와 경고창으로 표시하기JavaScript 2023. 10. 27. 09:15
날짜 가져와 경고창으로 표시 달력에서 선택한 날짜를 가져와서 경고창을 통해 사용자에게 표시하는 함수를 먼저 만들겠습니다. function getDate() { // 달력 선택 let dateVal = document.querySelector("#date"); alert("선택한 날짜: " + dateVal.value); } 위 코드에서 document.querySelector("#date") 를 사용하여 HTML 에서 'id' 가 'date' 인 요소를 선택하고, 해당 요소의 값을 dataval.value를 통해 가져옵니다. 그리고 alert 함수를 사용하여 선택한 날짜를 경고창으로 표시합니다. 시간 가져와 경고창으로 표시 마찬가지로 시계에서 선택한 시간을 가져와서 경고창을 통해 사용자에게 표시하는 함수..