CoDream

로드 후 실행코드document.addEventListener("DOMContentLoaded" function() {...})와 $(document).ready(function() {...})  모두 DOM이 완전히 로드된 후에 실행되는 코드를 지정하는 방법1. document.addEventListener("DOMContentLoaded", function() {...})표준 JavaScript 방법으로, DOMContentLoaded 이벤트는 초기 HTML 문서가 완전히 불러와지고 분석되었을 때 발생합니다. 이미지나 스타일시트 같은 외부 리소스는 반드시 다 로드되지 않았어도 됩니다.브라우저 호환성 측면에서 대부분의 최신 브라우저에서 지원됩니다.document.addEventListener("DOMC..

const obj ={ url : "/app/member/id-dup", type : "get", success : function (){console.log("통신성공😄"); }, error : function (){console.log("통신실패😥");}};$.ajax(obj);  url : "/app/member/id-dup", type : "get", 위와 같은 방식의 요청을 받을 곳이 없어서 에러남. @WebServlet("/member/id-dup")public class MemberIdDupCheckController extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletRe..

https://jquery.com/download/ Download jQuery | jQueryDownload jQuery link Latest version To locally download these files, right-click the link and select "Save as..." from the menu. Download the compressed, production version: Download jQuery 3.7.1 The slim build is a smaller version, that excludes the ajaxjquery.com

색상 팔렛트 만들기 --div로 색상 팔렛트 만들기 --div크기, 커서(포인터) 지정 .color-option{ width: 50px; height: 50px; cursor: pointer;}--팔렛트를 배열로 변환 후 click-event가 생기면 색상 변경. const colorOptions = Array.from( document.getElementsByClassName("color-option"));function onColorClick(event){ ctx.strokeStyle=event.target.dataset.color; ctx.fillStyle=event.target.dataset.color;} colorOptions.f..

input타입 range, color 추가   js에서 event 에따라 굵기와 색상 변경할 수 있도록 함. const lineWidth = document.getElementById("line-width")const color = document.getElementById("color");function onLisneWidthChange(event){ ctx.lineWidth=event.target.value;}function onColorChange(event){ ctx.strokeStyle=event.target.value; ctx.fillStyle=event.target.value;}lineWidth.addEventListener("change",onLisneWidthChange);co..

moveTo();    const canvas = document.querySelector("canvas");const ctx = canvas.getContext("2d");canvas.width=800;canvas.height=800;ctx.lineWidth=2;ctx.moveTo(0,0);function onClick(event){ctx.lineTo(event.offsetX, event.offsetY);ctx.stroke();}canvas.addEventListener("click", onClick); ctx.moveTo(0,0);  > 그림시작하는 곳을 canvas 기준 좌표(0, 0) 부터 시작하게됨.   moveTo가 없다면?? 처음 클릭했을 때 선이 그어지지 않음. 처음 클릭한 곳에서 시작이 ..

JSON 데이터를 표현하고 전송하기 위한 경량의 데이터 교환 형식입니다. 이는 사람이 읽고 쓰기 쉽고, 기계가 파싱하고 생성하기도 쉽습니다. JavaScript의 객체 표기법에서 영감을 받아 만들어졌지만, 언어에 종속되지 않으며 많은 프로그래밍 언어에서 지원됩니다. 경량의 데이터 교환 형식으로서, 사람이 읽고 쓰기 쉽고, 기계가 파싱하고 생성하기도 쉬운 형식을 갖추고 있습니다. JavaScript의 객체 표기법에서 영감을 받아 만들어졌지만, 언어에 종속되지 않으며 많은 프로그래밍 언어에서 지원됩니다. JSON은 키-값 쌍의 집합으로 구성되어 있으며, 이러한 쌍들은 중괄호 **{}**로 둘러싸여 있습니다. 키와 값은 콜론 **:**으로 구분되고, 각 쌍은 쉼표 **,**로 구분됩니다. 값으로는 문자열, 숫..

정규표현식 문자열에서 패턴을 검색하거나 매칭하는 데 사용되는 형식적인 언어입니다. 이는 문자열에서 특정 패턴이나 조건을 찾거나 변형하는 데 유용합니다. 정규 표현식은 일련의 문자와 메타 문자로 이루어져 있습니다. 예를 들어, /\d+/는 하나 이상의 숫자를 나타내는 패턴입니다. 여기서 \d는 숫자를 나타내는 메타 문자이고, +는 앞의 패턴이 하나 이상 나타날 수 있음을 나타냅니다. 정규 표현식은 다음과 같은 여러 용도로 사용될 수 있습니다: 문자열 검색과 매칭: 주어진 문자열에서 특정 패턴을 검색하거나 매칭할 수 있습니다. 문자열 치환: 주어진 문자열에서 특정 패턴을 다른 문자열로 치환할 수 있습니다. 문자열 분할: 주어진 문자열을 특정 패턴을 기준으로 분할할 수 있습니다. 유효성 검사: 입력된 데이터가..

객체 객체 생성 객체는 중괄호 **{}**를 사용하여 생성하며, 키-값 쌍의 속성을 포함합니다. var person = { name: "John", age: 30, isStudent: false }; 메서드 객체에는 속성으로 함수를 포함할 수 있습니다. 이러한 함수를 메서드라고 합니다. var person = { name: "John", greet: function() { console.log("Hello, my name is " + this.name); } }; person.greet(); // "Hello, my name is John" 속성 순회 for...in 루프를 사용하여 객체의 모든 속성을 순회할 수 있습니다. for (var key in person) { console.log(key + "..

isFinite() 주어진 값이 유한한(finite) 숫자인지를 판별합니다. Infinity나 -Infinity, NaN이 아닌 숫자 값이면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 이 함수는 Infinity 값이나 NaN 값을 방어하기 위해 사용됩니다. isNaN() 주어진 값이 NaN(Not-a-Number)인지를 판별합니다. 주어진 값이 숫자가 아니거나 숫자로 변환할 수 없는 경우에 true를 반환하고, 숫자인 경우에는 false를 반환합니다. 이 함수는 숫자가 아닌 값을 방어하기 위해 사용됩니다. eval() 문자열로 표현된 JavaScript 코드를 실행합니다. 주어진 문자열을 JavaScript 코드로 해석하여 실행하므로, 사용에 주의가 필요합니다. 보안 문제와 코드의 가독..