잘하자 IT

객체 배열을 사용하여 다량의 데이터 관리       const person = {name: "기다운", age: 30, gender: "남"};            const person1 = {name: "김정현", age: 20, gender: "여"};            const person2 = {name: "허완", age: 4, gender: "남"};            const person3 = {name: "최서은", age: 23, gender: "여"};            const person4 = {name: "강사님", age: 20, gender: "여"};            const pArr = [person, person1, person2, person3, per..

function test8(){const now = new Date();const area8 = document.getElementById("area8");area8.innerHTML = "현재 날짜 및 시간 (getTime())" + now.getTime() + ""; }    // 2024년 6월 11일 날짜로 생성             const begin = new Date(2024, 6-1, 11); // Date(연도, 월-1, 일);             area8.innerHTML += "현재 날짜 및 시간 (getTime())" + begin.getTime() + "";          // 2024년 11월 25일 날짜로 생성             const end = new Date(..

학습 출처 : JavaScript 객체 기본 - Web 개발 학습하기 | MDN (mozilla.org) 객체  객체 선언 및 사용 자바스크립트에서는 map을 객체라고 표현을 한다 객체는 {}를 사용해서 생성하고, {} 중괄호 안에 객체에 필요한 속성들을 정의한다  객체를 파일로 저장할 때 확장자를 .json으로 설정한다 json 형식이라고 표현하기도 한다     변수 = {        속성명 : 속성값,         속성명 : 속성값,         속성명 : 속성값,         ...     }; 객체란 여러 가지의 속성을 가지고 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이다 key / value / Pair를 저장할 수 있다  객체 특징 : 객체는 많은 값이 포함될 수 있는 변수이다..

함수 (function)선언적 함수 : function 함수명([매개변수, 매개변수, ...]){함수 호출 시 실행할 코드 [return 반환할 결과 값]}     button onclick="test1()">누르지마시오button>    div id="area1" class="area">div>    script>        function test1(){            // id 속성의 값이 "area1"인 요소 영역에 "test1() 함수 실행을 출력"            // 클릭할 때마다 같은 내용이 추가되도록!                        /*let area1 =*/              document.getElementById("area1").innerHTML += "..

배열 : 자바스크립트(js)에서는 변수 선언 시 별도의 자료형 지정 어떤 자료형이든 배열에 담을 수 있다 따라서 크기(길이)의 제약도 없다(자바 컬렉션과 유사함)     button onclick="test1();">테스트 (1)button>    div id="area1" class="area">div>    script>            function test1(){                // 배열 객체 선언 및 초기화                 let arr = ["기다운","한남동",20,true,[10,20,30],{}];                // => 배열 객체에는 자료형 상관 없이 어떠한 값도 저장 가능!                 console.log(arr);    ..

변수 선언 시 var, let const라는 키워드를 이용하여 선언이 가능하다  변수 선언 방법 :  var : 중복 선언과 재할당이 가능 let : 중복 선언이 안되고 재할당이 가능하다 const : 재할당이 안되고 중복 선언이 안된다 var : 자유롭게 변수 선언, 할당 사용할 수 있는 장점이 있으나 중복된 변수가 남발될 수 있다  문제를 보완하고자 let, const 타입이 추가됨  자료형 :  변수 선언 시 자료형을 별도로 지정하지 않고한줄씩 실행되는 인터프리터 언어 특성상 변수에 대입되는 값에 따라서알아서 자료형이 결정됨  자료형 : 숫자 : number 문자열 : String 논리값 : Booleannull : 의미 없는 것 Object : 객체/배열/함수 typeof 자료형 타입을 체크하는 ..

window 객체는 자바스크립트의 최상위 객체 크게 BOM과 DOM으로 나누어 짐  BOM (Browser Object Model) : location(주소창 관련),screen(창 관련),  navigator(브라우저 관련), history(페이지 기록 관련) DOM (Document Object Model) : document open[window 생략 가능] open("http://www.주소.com"[매개변수1], "매개변수2");  매개변수 1 : 새 창에서 열고자하는 url 주소 매개변수 2 : 창 이름(target). 해당 창 이름으로 같은 창이 열려있으면 새로 열리지않고 열려 있는 창을 표시한다.  매개변수 3: 새 창의 너비, 높이, 주소창여부, 툴바여부 등 설정(특징)width 너비, ..

div, form, input {             box-sizing: border-box;         } box-sizing : border-box; 역할 box-sizing : border-box;를 사용하면 지정한 크기 안에 패딩과 보더가 포함이 된다 레이아웃을 조정할 때 유용하다   box-sizing : border-box;를 사용 안할 시 box-sizing : 의 기본값은 box-sizing:content-box;이다     #header {             width: 600px;            height: 150px;            position: relative;         } #header는 div 태그의 id = header 요소이다 가로 600px ..

DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>메뉴바 만들기title>    style>        ul, li {            list-style-type: none;            margin: 0;            padding: 0;        }        a {            text-decoration: none;            color: #000;    /* black */        }        div {             /* border: ..

HTML : 요소에 접근하기 (해당 요소 객체를 가져오는 것)   h3>1) 아이디 속성을 이용하여 요소 가져오기h3>    button onclick="accesId()">아이디로 접근button>    div id="area1" class="area">1번 영역div>   script>        function accesId(){             let area1 = document.getElementById("area1");            area1.innerHTML +=  "아이디로 접근 성공!";            area1.style.background = "tomato";            area1.style.color = "yellow";            area1...