프로그래밍 언어/JavaScript
-
[JavaScript] input 태그에 입력한 value 가져오기프로그래밍 언어/JavaScript 2022. 11. 20. 23:11
form 태그 내 input 태그에 값을 입력하지 않고 submit button을 누르면 alert 창이 뜨게 만들려고 한다. 그럼 input 태그의 값을 어떻게 가져와야 할까? input 태그의 값을 가져오려면 다음과 같이 작성하면 된다 . document.getElementById('id 값').value; 로그인하세요 전송 닫기 inputValue에 사용자가 입력한 값을 저장하여 만약 그 값이 공백이라면 alert를 띄우게 하는 코드이다. 여기서는 alert를 띄운 다음 action에 지정해둔 url로 이동하게 되는데 이를 막으려면 아래와 같이 작성하자. $('form').on('submit',function(e){ if(inputValue=='' || inputValue == null){ aler..
-
[JavaScript] event.target , 이벤트 위임프로그래밍 언어/JavaScript 2022. 11. 18. 10:28
event.target은 이벤트가 일어날 객체를 말한다. 버튼을 눌러 새로운 창이 열리는 객체가 있다면, 여기서 버튼이 event target이다. 지정된 event target(html 요소)에 지정된 event type(클릭이나 스크롤 등)이 발생하면 지정된 event handler(함수)가 실행된다. 다른 프로퍼티와 조합하여 현재 이벤트가 발생한 요소의 속성 값을 얻을 수 있다. 아래와 같이 id값이 nulbo인 div 태그를 클릭하면 alert("안녕 늘보")라는 말이 코드가 있다. 늘보 마우스로 클릭했을 때 이벤트가 일어나는 event target으로 지정해 주었다. 이 target이 뭘까 살펴보자. event.target을 console로 찍어봤을 때 결과 값이다. 📌 event.target...
-
[JavaScript] html과 js 실행 순서, $('document').ready(function(){}) 쓰는 이유프로그래밍 언어/JavaScript 2022. 11. 13. 09:27
html 태그 안에서 js를 html 코드보다 위에 쓰면 js 동작이 적용되지 않는 걸 봤다. 그럼 html,js 등 어떤 방식으로 로딩 되는 걸까? 그 순서를 알아보며 $('document').ready(function(){})를 쓰는 이유도 적어볼까 한다. 📑 $('document').ready(function(){}) 란? $('document').ready(function(){})는 'html 문서의 로딩이 끝나면'을 의미한다. 즉) html 문서가 로딩된 후 해당 함수를 실행시켜라. 라는 의미이다. document는 하나의 html 파일을 나타내는 트리의 루트 노드 객체라고 생각하면 될 것 같다. 그럼 이 코드는 언제 사용되는 걸까? 예제를 통해 알아보려 한다. 📑 js와 html 아래 코드에선..
-
[javaScript] jQuery로 코드 변경해보기 (html, css, class 제어, 이벤트리스너)프로그래밍 언어/JavaScript 2022. 11. 12. 12:53
제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리로, “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표했다. javaScript보다 코드가 간결하기 때문에 종종 사용되는데 그 사용법을 간단하게 포스팅해보려고 한다. 📑 javascript -> jQuery 변경 기본 자바스크립트를 이용한 코드보다 코드 양이 절반으로 줄은 걸 확인할 수 있다. $는 querySelecctor와 동일하게 사용할 수 있다. 안녕 안녕2 안녕2 물론 css도 변경이 가능하다. css 속성값을 변경하려면 아래와 같다. $('.hello').css('color','red') ..
-
[JavaScript] alert 박스, onclick, function, EventListener 기초프로그래밍 언어/JavaScript 2022. 11. 11. 00:07
📑 자바스크립트로 html 변경 VSCode에서 Live Server 다운 후 코드 입력한 파일 우클릭 하고 아래 사진처럼 클릭 시 브라우저에 입력한 코드 결과 바로 보면서 작업할 수 있다. 자바스크립트를 이용하여 html의 문자를 변경하려고 한다. 어떻게 해야할까? 안녕하세요 위와 같이 html 태그에 id 값을 주고 스크립트 태그 안에서 태그 요소를 가져오고 html 문구를 바꿔주면 된다. 안녕하세요 안녕하세요 위의 예제를 살펴보면 getElementById로 요소의 id값을 가져오는 것은 동일하며, 각각 그 다음 dot(.)뒤에 원하는 작업을 적어주면 된다. 📑 기본적인 UI 만들기 웹 페이지에선 탭, 모달창, 서브메뉴 등 수백개의 동적 UI를 만들 수 있다. UI를 만드는 법은 아래와 같다. 📌 ..
-
[javascript 기초] const & let & var 차이점, Arrays, Object프로그래밍 언어/JavaScript 2022. 9. 14. 21:51
교육을 들으면서 js에 대해 알아봤지만 웹 프로젝트를 진행하면서 활용하려고 하니 생각이 안나더라,, AJAX나 JSON, RESTFUL 웹서비스를 위해 javascript는 다시 한 번 집고 넘어가야겠다 싶어 노마드 코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 정리해볼까 한다. JavaScript, 자바스크립트란? 자바스크립트는 객체(object) 기반의 스크립트 언어이다. HTML로 웹의 내용을 작성하고, CSS로 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하며 서버 측 프로그래밍에서도 사용할 수 있다. 1. 객체 기반의 스크립트 언어이다. 2. 동적이며, 타입을 명시할 필요가 없는 인터프리..
-
[Ajax란? ] 제이쿼리와 $.ajax() , $.get(), $.post() 메서드프로그래밍 언어/JavaScript 2022. 9. 1. 12:20
Ajax란? Ajax란 Asynchronous JavaScript and XML의 약자이다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 즉) Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지 일부만 표시할 수 있다. 예를들어 게시판의 댓글 부분!! Spring web 게시판 공부하다 Ajax에 대해 자세히 알아볼까 한다. 이때 서버는 다음과 같은 형태의 데이터를 주고받을 수 있다. JSON / XML / HTML / 텍스트 파일 등등 Ajax 구성 요소 - 웹 페이지의 표현을 위한 HTML과 CSS - 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해..
-
[jQuery란?] 정의&사용법 , $(document).ready(), 선택자 종류, toggle프로그래밍 언어/JavaScript 2022. 8. 24. 14:52
제이쿼리란? 자바스크립트 코드를 좀 더 직관적으로 이해할 수 있도록 짧고 단순한 코드 형태로 변형하여 제공하는 것. 자바스크립트 : document.getElementById(“p”).innerHTML = “웹 프로그래밍“; 제이쿼리 : $(“#p”).html(“웹 프로그래밍”); 1. 자바스크립트의 문서 객체 모델 DOM과 이벤트 객체는 호환성이 떨어지는 단점이 존재했다. 예를들어 인접 요소 선택자 중 다음 요소 선택자는 브라우저별로 결과가 달랐다. 이를 해결하기 위해 등장한 제이쿼리는 호환성 문제를 해결했다. 2. 편리한 애니메이션 효과 기능 구현. jQuery 라이브러리 HTML에 연동하기 1. 다운로드 방식 : jquery 라이브러리 파일을 다운받아 HTML에서 해당 파일을 불러와 연동하는 방식 ..