목록코딩/2023 JavaScript DOM (50)

라라리라

2023.11.02 / Step 8 [DOM_canvasMouse] - 코딩 82 일차

clickDrawArc.html DOCTYPE html> Document 화면을 클릭해보세요. clickDrawArc.js function drawArc(){ ctx.beginPath(); ctx.arc(x, y, radius, 0, angle); ctx.fillStyle = "blue"; ctx.fill(); ctx.closePath(); } //------------------------------------------------- let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); console.log("캔버스 왼쪽 여백 = " + ctx.canvas.offsetLeft); console.log("캔..
코딩/2023 JavaScript DOM 2023. 11. 2. 17:47
2023.10.30~2023.11.01 / Step 8 [DOM_canvas] - 코딩 79~81 일차

grid.html DOCTYPE html> Document grid.js /* 오목판(그리드) 만들기(10 * 10) */ function drawGrid(){ ctx.beginPath(); let originX = 100; // 시작위치 let originY = 100; // 시작위치 let lineGap = 50; // 그리드 간격 let lineCount = 10; // 선 개수 조절 // 세로 그리기 for(let i = 0; i 100 / 150/ 200/ 250...... let startY = originY; //100; let endX = startX; //100 + 50 * i; let endY = lineGap * (lineCount - 1) + originY; // 50 * 9 + 1..
코딩/2023 JavaScript DOM 2023. 11. 1. 18:57
2023.10.27 / Step 8 [DOM_canvas] - 코딩 78 일차

canvas테스트.html DOCTYPE html> Document canvas테스트.js //============================= let canvas = document.querySelector(`#mycanvas`); let ctx = canvas.getContext("2d"); mycanvas.html DOCTYPE html> Document mycanvas.js //------------------------------------------------- let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); line.html DOCTYPE html> Document line.js fun..
코딩/2023 JavaScript DOM 2023. 10. 27. 23:31
2023.10.26 / Step 7 [DOM_market] - 코딩 77 일차

_cartInfo.html DOCTYPE html> Document #cartTable { margin: 0 auto; width: 1050px; } .check_box input[type='checkbox'] + label{ display: inline-block; cursor: pointer; } .check_box input[type='checkbox'] + label::before{ display: inline-block; content: ""; width: 24px; height: 24px; background: url(./img/check-off.png) no-repeat; background-size: 24px; vertical-align: top; margin: -4px 5px 0 0; }..
코딩/2023 JavaScript DOM 2023. 10. 26. 17:56
2023.10.25 / Step 7 [DOM_Diary] - 코딩 76 일차

index.html DOCTYPE html> Document main.js import { ControllerMain } from "./controllerMain.js"; import { JsonDiary } from "./jsonDiary.js"; JsonDiary.getInstance().start(); ControllerMain.getInstance().start(); jsonDiary.js export class JsonDiary { static intstance = new JsonDiary(); static getInstance() { return this.intstance; } start() { this.diaryList = null; this.setSampleData(); } setSampl..
코딩/2023 JavaScript DOM 2023. 10. 25. 23:29
2023.10.24 / Step 7 [DOM_Board_reply] - 코딩 75 일차

index.html DOCTYPE html> Document controllerMain.js import { PageHeader } from "./pageHeader.js"; import { PageIndex } from "./pageIndex.js"; import { PageMemberJoin } from "./pageMemberJoin.js"; import { PageMemberList } from "./pageMemberList.js"; import { PageMemberLogin } from "./pageMemberLogin.js"; import { PageBoardList } from "./pageBoardList.js"; import { PageBoardInfo } from "./pageBoa..
코딩/2023 JavaScript DOM 2023. 10. 24. 23:31
2023.10.23 / Step 7 [DOM_Board] - 코딩 74 일차

index.html DOCTYPE html> Document main.js import { ControllerMain } from "./controllerMain.js"; import { JsonMemember } from "./jsonMember.js"; // 여기가 시작지점이다. // Controller 클래스는 싱글톤 ControllerMain.getInstance().start(); JsonMemember.getInstance().start(); jsonMember.js // Json클래스는 싱글톤 패턴 export class JsonMemember { static instance = new JsonMemember(); static getInstance() { return JsonMemember...
코딩/2023 JavaScript DOM 2023. 10. 23. 17:56
2023.10.20 / Step 7 [DOM_member] - 코딩 73 일차

index.html DOCTYPE html> Document sampleHeader.html DOCTYPE html> Document #header-header { margin: 0 auto; border: 1px solid black; } 회원가입 로그인 let buttonMemberJoinPageClick = (event) => { } let buttonMemberLoginPageClick = (event) => { } //-------------------------------------------------------------- let $buttonMemberJoinPage = document.querySelector("#button-memberJoinPage"); let $buttonMembe..
코딩/2023 JavaScript DOM 2023. 10. 20. 19:33
이전 Prev 1 2 3 4 5 ··· 7 Next 다음