Computer Science/웹 프로그래밍 18

JS에서 Random 값 받기(Math.random())

근데 random 메서드가 Math 내장 객체에 있다.그래서 Math.random()으로 쓴다.Math.random()리턴 값: 0~1사이의 실수ex. 0.9099821, 0.00212313.....그래서 정수로 받고 싶으면var rand1to10 = Math.floor(Math.random() * 10 + 1)처럼 곱하기 해주고, 1 더해준 다음 floor() 메서드로 감싼다. (가우스 함수 같이 정수만 떼서 줌)위 예시는 1부터 10까진데 1부터 100까지는var rand1to100 = Math.floor(Math.random() * 100 + 1)이런 식으로. Few Examples)0~255var ex = Math.floor(Math.random() * 256) // return 0~255100~..

JS에서 시간 받기(Getting Date in Javascript)

Date ObjectJS 내장 객체중 하나로, 날짜 및 시간 작업을 하는데 유용하다.Date를 숫자로 쓰면(as a Number) -> 1970년 1월 1일 00시00분00초부터 지난 시간을 ms단위로 준다.Date를 문자열로 쓰면(as a String) -> 요일 월 일 년도 hh:mm:ssDate 객체 생성(선언)하기기본형: var now = new Date()밀리초형: var now_ms = new Date(milliseconds)다양하게: var now_str = new Date(dataString)세세하게: var now_ex = new Date(year, month, date..)기본형 빼고 코드로 보면var now_ms = new Date(10000); // 1970/01/01 이후 시각 밀..

JS에서의 객체(Object in Javascript)

객체란"어떠한 사물"의 "속성(Property)"과 "동작(Method)"을 표현한 것.ex. 자동차property : 메이커, 차종, 색상method : 출발하기, 정지하기, 시동 키기Object in Javascript종류내장 객체(built-in object) 코어 객체: Date, String, Math... HTML DOM 객체: 이전 게시글(HTML의 DOM 구조:https://mitdog.tistory.com/26) 참조 브라우저 관련 객체(BOM): 브라우저 종류, 스크린 정보, ...사용자 정의 객체(custom object)생성 방법2가지가 있다.하나의 유일한 객체로 쓸거다 객체 상수로 직접 생성var person = { firstName: "John", lastNam..

HTML의 DOM 구조

DOM(Document Object Model)HTML, XML의 프로그래밍 interface(웹프로그래밍 수업 중) 브라우저가 소스 코드를 읽고, 랜더링을 할텐데그 사이 과정 읽고->쓰는 사이에 어떻게 읽어 놓느냐?바로 DOM 형식으로 읽어 놓는다.이 읽어 놓은 DOM 형식은 HTML과 JS가 데이터를 주고 받을 때어떻게 주고 받을지 약속한 '글 양식'이라고나 할까?DOM은 트리 자료구조로 그려진다.하나 하나가 DOM 객체이고,예시를 들어서 까 보면DOMProperty(속성) : ValuetageName : "IMG"src : "octopus.jpg"alt : "an octopus"id : "icon01"이걸 JS에서 쓴다면var icon = document.getElementById("icon1");..

Javascript 문법

JS 코드를 HTML에서 어떻게 사용?외부 JS 파일 HTML에 넣기 참조. (이전 게시글 https://mitdog.tistory.com/22 )document.write()이건 짚고 넘어가겠다.그냥 document.write하면 어디에 write를 하느냐,그냥 body에다가 한다.그런데 주의할 점, onclick으로 함수 호출 형식과그냥 document.write가 섞이면?click처음엔Hello JSnew beginning이 웹 페이지에 보이지만,버튼을 누르면 func 안의 내용만 남는다.rewrite page처럼 말이다.주석(Annotation)///* */둘 다 된다.변수(Variable)var x;let x;const x;3가지 방식이 있다.요즘은 let을 권장하는 추세이다.이유는 3가지다.V..

HTML 페이지의 구조

스크립트 기본 구조헤더 이라는 헤더로 시작한다. HTML 5로 쓰인 웹 페이지라는 것을 의미한다....헤드(Head)보통 헤더에는 페이지의 정보가 들어간다. 개발자의 영역.Style 태그(=CSS)가 주로 헤드 안에 들어간다.바디(Body) Hello Web Programming World!보통 바디에는 사용자에게 보여지는 페이지의 모습이 나타난다. 유저가 보는 영역.페이지 레이아웃(Page Layout)CSS의 박스 속성(width, height, margin, padding)과 HTML 문법의 div 태그와 연계된다.Block 간의 관계동위 관계 블럭(Block;such as div, p) 간 배치는 페이지의 한 너비를 다 먹는다.하지만 부모-자손 관계처럼 계층 구조일 경우, 부모 영역 안에서 ..

HTML 문법과 태그들

기본 형태요소(Element)시작 태그 ... 종료 태그 의 형태를 취한다. 그리고 그것이 하나의 요소이다.규칙이 존재한다:태그는 대소문자 구분이 없다.다른 태그끼리 겹칠 수 없다. (예시) .. .. .. 다른 태그를 포함 할 수는 있다. .. .. .. 태그에 구체적인 속성을 입력해 줄 수도 있다.형식 : HTML 주석(Annotation)특수 문자", &, , 공백 과 같이 문법에 사용되는 문자들은 특수한 방법으로만 텍스트로 사용이 가능하다.그 중에서도 공백을 알아두자 :   (non-breaking space)태그h 태그...옵시디언에서의 '#'과 같은 느낌이다. 숫자가 클수록 글자 크기가 작아진다.p 태그문단을 나눠준다.!주의! : 처음의 는 현재 커서 다음 줄부터 시작하게 하고..