Code Playground

< h1 > Code Playground </ h1 >

-Math 내장 객체- -> 수학과 관련된 기능을 제공한다. ...javascript int abs(int param); ... -param의 절대값을 리턴한다. ...javascript int max(int a, int b); ... -a와 b 중에서 큰 값을 리턴한다. ...javascript int min(int a, int b); ... -a와 b 중에서 작은 값을 리턴한다. ...javascript int round(Number num) ... -num을 소수점 첫째 자리에서 반올림한 결과를 리턴한다. ...javascript int floor(Number num); ... -소수점 이하 값을 버린다. (parseInt를 대신 쓸 수 있음) ...javascript int ceil(Number ..

-객체- 하나의 변수 안에 또 다른 변수들과 함수들을 기능의 성격에 따라 하나의 그룹으로 묶어서 포함시켜 놓은 형태. 객체는 웹 페이지에 보여지는 모든 것이 될 수 있다.HTML 태그가 JS에서는 객체로 인식될 수 있다.즉, HTML 태그 안에는 변수와 함수가 내장되어 있다는 의미가 된다. 객체 안에 포함된 변수를 프로퍼티 혹은 멤버변수라고 한다. 객체 안에 포함된 함수를 메서드(method)라고 한다.메서드 안에서 같은 객체 내의 프로퍼티나 다른 메서드에 접근하기 위해서는 this 키워드를 사용한다. ...js //비어있는 임의의 변수 = 객체 var foo = {}; //프로퍼티 정의 foo.num1 = 100; foo.num2 = 200; //메서드 정의 foo.sum = function() { r..

-내장함수- 자주 사용되어지는 공통 기능들에 대하여 미리 구현되어진 함수. 웹 브라우저에 미리 내정되어 있으므로 개발자는 함수의 정의 없이 함수를 호출하고 적절한 리턴값을 받아 활용할 수 있다. eval(문자열)주어진 문자열을 수식으로 변환하여 리턴한다.eval("1+1"); -> 1+1계산Number(문자열)주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.주어진 문자열이 100.1일 경우 실수 100.1을 리턴parseInt(문자열)주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.주어진 문자열이 100.1일 경우 정수 100을 리턴isNaN(문자열)주어진 문자열이 숫자형식이 아니면 true, 숫자형식이면 false를 리턴!isNaN: 숫자형식이면 tru..

-프로그램의 흐름제어(2) -반복문- [1] for 문 : 반복적인 작업 처리! for(초기식; 조건식; 증감식) {...반복 수행할 명령...} 1. 초기식을 수행2. 조건식을 판별- 참인 경우 {}안을 수행- 거짓인 경우 {}을 빠져나감.3. 참인 경우 {}을 수행하고 증감식으로 이동4. 증감식을 수행 후 다시 조건식으로 이동.-2번부터 반복 ex) 1에서 100까지의 합 구하기var sum=0; for (var i=1;i 함수 호출 - 파라미터(매개변수)는 함수가 실행되기 위해 주어지는 조건값.파라미터를 명시할 경우 필요한 만큼 콤마로 구분하여 변수를 선언. - 리턴(return)은 함수가 호출된 위치에 결과값을 돌려주기 위한 키워드.값(변수)을 명시하지 않을 경우 undefined가 리턴됨.함수의..

[1] Javascript 작성 방법: HTML 소스 코드에 포함되는 형태로 작성된다. [2] HTML 소스코드에 포함시키기:다음의 코드를 HTML 소스코드 안에 명시. 일반적으로 에 위치한다. ... [3] 외부 파일에 대한 참조를 포함시키기:``` [4] 콘솔: 웹 브라우저에서 화면에 표시되는 것과 관계없이 어떠한 내용을 출력하기 위한 공간. [5] 변수데이터를 저장하기 위한 키워드. 변수를 사용하기 위해서는 선언과 할당의 과정이 필요하다. ```javascriptvar 변수이름; // 변수의 선언변수이름 = 값; // 선언된 변수에 값 할당``` [6] 선언과 할당을 결합한 형태...javascriptvar 변수이름 = 값;... 변수의 이름은 영어+숫자+언더바의 조합으로 구성한다.띄어쓰기가 필요한..

Day8 -background- [1] background background-color -> 배경색상 지정background-image : url("파일경로"); -> 배경이미지background-repeat : repeat/ repeat-x / repeat-y /no-repeat; ->배경이미지 반복 설정background-attatchment : scroll / fixed; -> 스크롤에 따른 배경 이미지 처리background-position :left/ right/ top/ bottom /center /px값; -> 배경 이미지 위치 background: 위의 다섯가지 속성을 공백으로 구분하여 일괄 명시. 불필요한 요소는 생략 가능. [배경관련 속성 활용] - 이미지에 텍스트가 포함된 경우1) ..

Day7 -Position- 1. Position속성: 위치를 자유자제로 이동하기 위한 방법static 기본값relative 상대위치(원래 위치 기준으로 이동)absolute 절대위치(부모 위치 기준)fixed (=absolute, 스크롤 여부와 상관없이 화면 고정) position:fixed로 적용하면 다른 요소가 그 위치로 밀려 올라올 수 있음.-> 그 만큼 padding을 부여해야 함. position: relative;top: 30px;left: 30px; 2. z-index : 요소들의 겹치는 순서 결정 -값이 클수록 위에 떠있음 ---> z-index를 아무리 써도 플래시는 못 덮음 3. 절대좌표 방식으로 할 때 부모에게 position속성이 부여되면 부모를 기준으로 좌표를 설정한다. --->..

Day6 -Display/Float- Display 속성 1. display: block; --->width와 height 적용O / 자동 줄바꿈block-level 요소의 기본값어떤 요소를 문단처럼 구성할 수 있음 2. display: inline; --->width, height 적용X / 줄바꿈Xinline-level 요소의 기본값어떤 요소를 문장처럼 구성할 수 있음 3. display:inline-block; --->width,height적용O / 문장으로 형성(줄바꿈X)크기 지정이 가능한 문장요소inline-block으로 적용 시 가로로 배치되는데 박스 사이에 공백이 생긴다.공백 제거(코드 상의 줄바꿈을 주석으로 처리박스1박스2 4. display:none; --->화면 표시 X(숨김) -JS와..

Day5 -CSS 박스 모델- 박스=Block Level 요소 (...) [1] 박스의 크기를 결정하는 요소 1. 내용 영역의 넓이 --->width, height: px단위, %특별히 설정되지 않은 경우 넓이는 부모 가득, 높이는 내용만큼.고정값을 갖기 때문에 한 번 값이 부여되면 늘어나거나 줄어들지 않는다. 2. 테두리 --->border: width(px) style(solid dashed dotted none) color;-border-top/border-right/border-left/border-bottom 3. 내용 영역~테두리 사이의 여백 --->padding값을 하나만 지정하는 경우: 상, 하, 좌, 우 동일 지정값을 두 개 지정하는 경우: 상, 하 / 좌, 우값을 네 개 지정하는 경우:..

Day3~4 -CSS/글자 속성- [1] HTML 태그 분류 Block Level: fieldset / blockquote / form / ul , ol , li / h1~h6 / p / div / table관련 tag / address / noframes / center/ dir / hr / menu / dl / pre Inline Level: a / img / span / br / input / strong / label / textarea / i / select / u / iframe / strike / abbr / button / sub / q / font / q [2] 적용 방법 1. head태그 2. 외부 파일 링크 [3] Selector 1. tag 이름h1 { color: #222; } 2..