반응형

**css

1.border-raduis

=>경계선에 원형 곡선을 적용할 수 있도록 해주는 속성

 

2.box-shadow

=>그림자를 생성

=>그림자 방향(insert, outset) x-offset y-offset blur정도 색상

 

3.실습

=>디렉토리 구조

WebContent

-resources

         -js

         -css

         -images

 

-views

 

=>views디렉토리에 boxshadow.html을 생성하고 작성

검사로 소스가 틀렸는지 확인한다.

404: 잘못된 url

=>경로 설정 잘못

 

메뉴 만들고 효과를 주는 것

 

box-shadow: inset 0px 0px 20px 15px rgba(18,52,88,0.3);

           box-shadow:0px 0px 20px 15px rgba(18,52,88,0.3);

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>박스의 경계선과 그림자 효과</title>

<link rel ="stylesheet" href="./../resources/css.css">

</head>

<body>

           <h1 class ="korea"><p>대한민국</p></h1>

</body>

</html>

 

=>css 디렉토리에 css.css 파일을 만들고 작성

.korea {

           /*속성: ;*/

           color:#000000 ;

           width:200px ;

           line-height: 30px;

           padding:30px ; /*경계선과 콘텐츠와의 여백*/

/*         margin다른 객체와의 여백*/

           border: 1px solid rgb(18, 52, 88) ;

           /*여러 속성의 값을 한 번에 적용할 때 공백으로 구분*/

           /* , 는 동일한 속성의 값을 여러 개 적용할 때 구분*/

           background:#eeeeee;

           /*여러 개의 값을 지정할 수 있는 속성의 경우에 뒤에서 부터 값 생략 가능합니다.*/

           /*cssjavascript는 옵션에 전부 기본값이 설정되어 있습니다.*/

           border-radius: 15px;

           box-shadow: inset 0px 0px 20px 15px rgba(18,52,88,0.3);

           /*0px 0px 20px 15px 출발점이고 어디 까지 줄지 */

}

 

.korea p { vertical-align: middle;} /*line-height 만 주면 중간에 잘 간다.*/

 

 

 

4.float

=>콘텐츠를 배치하는 방법

=>이 속성을 이용하면 콘텐츠를 화면위에 올려놓은 것 처럼 배치

=>블록 요소 옆에 다른 콘텐츠를 배치할 때 사용

=>left, right, none으로 설정

 

 

5.float해제

clear: both; 를 사용

 

6실습

1).html에 추가

           <div class="menu">Unix</div>

           <div class="menu">Max OS X</div>

           <div class="menu">Linux</div>

           <div class="menu">Windows</div>

          

           <!-- 다음 줄로 내려고자 하면 기존 float를 해제 해야 합니다. -->

         <div class="title"><h2>운영체제</h2></div>

2)css에 추가

/*menu클래스를 가진 객체들을 왼똑에서부터 배치하고 오른쪽에 다른 콘텐츠를 배치할 수 있도록 설정*/

.menu{

           float:left;

           margin: 10px;

}

 

/*title 클래스를 가진 객체는 이전에 적용된 float를 해제하고 원래대로 배치*/

.title{

           clear: both;

}

 

7.display 속성

=>콘텐츠가 화면에 보여질 때 어떤 형태로 보여질 것인지 설정

=>block, inline,inline-block 등이 있음

=>block(블록 요소로 변환) ,inline(인라인 요소로 변환), inline-block(블록으로 만드는데 내부에서 줄 바꿈을 하지 못하도록 변환) 등이 있음

=>테이블 요소로도 변환이 가능

 

8.overflow

=>크기에 비해 많은 양의 콘텐츠를 가진 경우 출력방법을 설정

=>visible(크기를 눌려서 출력), hidden(숨김) , scroll(스크를 바를 생성)

=>화면에 안에 별도의 영역을 구성해서 콘텐츠를 출력하고 내부에 스크롤을 배치하는 경우나 많은 데이터를 출력할 때 테이블을 사용하는 경우에 해딩을 고정시키는 용도로도 사용 가능

전체 화면 에 또 화면 있고 안에도 scroll bar가 있고 밖에도  scroll bar가 있다.

탭으로 만든 이유는 모바일때문이다. 인터넷 끊어질 가능성이 있기 떄문이다.

hidden으로 했다가 후에 visible로 하는 것이다.

데이터가 발생한곳에서 해야 한다.스마트폰의 센스 데이터 받아서 위치정보 등 이슈가 된다.

 

9.엑셀의 틀 고정 처럼 스크롤을 해도 항목의 이름은 화면에 계속 출력되도록 하기

1)html에 작성

           <table>

                       <tr>

                                  <th>이름</th>

                                  <th>언어</th>

                       </tr>

           </table>

          

           <div class="contents">

                       <table>

                                  <tr>

                                              <td>데니스리치히</td>

                                              <td>C언어</td>

                                  </tr>

                                  <tr>

                                              <td>제임스 고슬링</td>

                                              <td>Java</td>

                                  </tr>

                                  <tr>

                                              <td>귀도 반 로섬</td>

                                              <td>Python</td>

                                  </tr>

                                  <tr>

                                              <td>브랜던 아이크</td>

                                              <td>Javascript</td>

                                  </tr><tr>

                                              <td>비야네 사우스스트룹</td>

                                              <td>C++</td>

                                  </tr>

                                  <tr>

                                              <td>아르네스 하임스베르</td>

                                              <td>C#</td>

                                  </tr>

                       </table>

         </div>

2)css에 작성

table{

           border: 1px solid black;

           width: 400px;

}

 

th, td{

           width: 200px;

}

 

.contents{

           width:420px;

           height:100px;

           overflow: auto;

}

 

10.position

=>콘텐츠의 배치 방법

1)static : 콘텐츠를 순서대로 배치

2)relative: 이전 요소와의 관계를 가지고 배치, lefttop속성을 이용해서 원하는 만큼 떨어뜨려서 배치 가능

3)absolute: left, top,right, bottom 속성을 이용해서 배치

4)fixed :스크롤을 해도 특정위치에 고정되는 방식

 

 

11.visibility

=>visible, hidden속성을 설정해서 보여지고 보여지지 않도록 해주는 설정

 

12.z-index

=>겹쳐서 출력되는 경우 출력되는 순서 설정을 위한 속성

 

 

13.transform

=>변환 -크기 , 위치 ,회전 ,비틀기 등의 변환을 수행

=>표준으로 적용ㄷ되지 않아서 verndor-prefix를 이용해야 합니다.

=>크롤과 사파리는 webkit, firefoxmoz, IEms

-webkit-transform: scale(2.0);

         -webkit-transform:skew(10deg,10deg);

-webkit-transform: scale(2.0);

         -webkit-transform: rotate(45deg);

                                           여기를 조작하는 것을 transform이라고 한다.

이것을 추상으로 한다.                                     x          y          z

 

연산의 기준점:origin(회전의 기준점 응용프로그램은 )

scale(2.0)->출력만 2배로 확대해서 한다.

 

원본

                    연산해서 출력한다.

 

게임시

(10,0)  <----------------(0,0)

(10,0)애서 죽었을 경우 (0,0)으로 가야 한다. 0,0에서 있고 10,0에다 출력한다.

10,0만 버리면 원본이 된다.

확대 축소도 같다. 원본은 그대로 이고 출력만 변한다

 

 

 

 

복사본이 필요 없으면 버리면 된다. 데이터베이스 원리 메모리 부담이 줄어들 수 있다.

 

기본형과 참조형

python scalar vector

 

system에서는 변경 가능 , 변경 불가능 이 큰 문제이다.

변경이 가능하다면 여분의 공간이 필요하다.

변경 불가능이라면 여분의 공간이 필요없다.

List[10,30]

List.add(1,20);

컴퓨터에서는 중간에 끼여널려면 큰 공간을 할당받아서 이것 저것 작업해야 한다.

작업해야 할 것이 많다.

implacabler기능이 있다.

R에서는 <- 하고 = 이것이 필요하다.

원복속성을 바꾸면 부담이 되서 transform으로 한다.

그래서 수학을 알아야 한다. 행렬 계산 등

행렬연산

 

 

출력은 비동기이다. 순서대로 하는 것이 아니라 모아서 처리한다.

애니메이션 : 비동기 그래서 콜백 함수가 항상 있다. 화면 출력은 시간이 오래 걸린다.

         화면 출력: 오랜시간이 걸리는 작업

         오랜시간이 걸리는 것은 입출력 문제

         FIFO=>먼저 입력한것 먼저 출력한다.

         오랜 시간 뒤에 짧은 시간 처리하는 것이 있으면 짧은 시간 이 걸리는 분은 starvation이 걸릴 수 있다.

콘솔 출력

1-10 출력시 10번만 쓰여진다. 이것은 모아서 처리하기 때문이다.

 

동기 : 순서데로

비동기 : 순서와 상관없이

 

transform은 운본 크기가 변한 것이 아니라 출력만 변한 것이 기 떄문이다.

 

14.animation

1)transition animnation

transition-property: 애니메이션을 적용할 속성을 설정(all 을 기재하면 모든 속성);

transition-duration:애니메이션 적용시간

transition-timing-function: 애니메이션 적용방법(linear(균등하게) ,ease-in(가속 점점 빨라진다.) , ease-out( 점점늦어진다. 천천히) , ease-in-out(가운데 빠르는 것) )

transition-timing-delay: 대기시간

 

2)Keyframe Animation

=>중간 중간에 변화를 추가할 수 있는 애니메이션 기법

=>애니메이션 생성

@-webkit-keyframes 애니메이션이름{

           from{시작값 설정}

           to{종료값 설정}

}

from대신에 백분율로 애니메이션 변화시점 지정 가능

 

=>애니메이션 적용

-webkit-animation-name: 애니메이션이름

타이밍 함수( timing-function)나 시간(duration), 반복횟수(iteration-count: infinite이면 무한대) ,play-state, direction(alternate-왕복, normal-한쪽으로만 적용)을 설정

 

jquery 메뉴 plugin

jquery table plugin

jquery 무료 차트 plugin

jqplot http://www.jqplot.com/

 

**반응형 웹 디자인

=>디바이스나 브라우저의 크기에 상관없이 동일한 콘텐츠를 사용할 수 있도록 디자인

스마트 폰 애플리케이션을 제작할 때도 이 개념은 중요

=>웹에서는 cssmedia query와 상대적인 크기 개념으로 구현을 합니다.

모바일에서 확대 축소 안 되는 것user-scalable : user-scalable

가장 일반적인 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximumscale=1.0, user-scalable=no"/>

 

**javacript

1.개요

=>script는 웹 페이지의 처리능력을 향상시키기 위해서 등장

동적으로 DOM객체의 변환을 하는 것이 목적

=>초창기에는 APPLE script, vb scripte등이 존재하지만 지금은 javascript를 표준으로 간주

javajavascript근본적으로는 관계가 없습니다.

=>최근에는 타입의 안정성(정적인 자료형 도입 ,클래스의 개념)을 추가한 typescript도 있습니다.

=>기본적으로는 브라우저 안에서만 동작하는 클라이언트 사이드 언어

=>웹 프로그래밍을 할 때는 자바스크립트가 필수 요소라서 최근에는 라이브러리나 프레임워크를 이용해서 자바스크립트 문법으로 서버 사이드 개발이 가능한 node.js 도 등장했고 브라우저 엔진 위에서 동작하는 응용 프로그램을 만드는 용도로도 사용이 되면 스마트 폰 앱 애플리케이션 제작에도 활용됩니다.

=>자바스크립트 문법만으로 웹 서버와 클라이언트를 같이 제작하기도 합니다.

M(Mongo DB), E(Express.js) A(Angular.js) N(Node.js)이라고 합니다.

A대신에 reactvue를 사용하기도 합니다.

mnc++

=>최근에는 텐서플로우와 같은 ai분야의 라이브러리도 등장

 

2.사용방법

1) 외부 파일에 만들어두고 사용

<script scr="자바스크립트 파일 경로"> </script>

 

 

2)html 파일 내부에서 만들어서 사용

<script>

내용

</script>

 

3)태그 안에 만들어서 사용

<태그 이벤트 ="script:내용"></태그>

 

 

3.작성시 주의 사항

=>대소문자 구별

=>;은 한줄에서 2개 이상의 명령을 작성할 때 명령을 구분하기 위해서 사용

=>명령어마다 ;을 할 필용는 없지만 한 줄에 2개의 명령어를 사용할 때는 필수

=>문자열을 만들 때 작은 따옴표나 큰 따옴표를 동일한 역할을 수행

작은 따옴표나 큰 따옴표 안에 다른 따옴표를 할 때는 반드시 나중에 만들어진것을 먼저 닫아야 합니다.

=>자바스크립트나 파이썬은 줄 단위로 변역하면 실행되기 떄문에 뒤부분에 에러가 있더라도 에러가 없는 부분까지는 수행이 되고 예외가 발생할 수 도 있습니다.

 

print()

print()

 

print() print()=>이렇게 쓸 경우 에러가 난다. 그래서 ;세미코론을 추가한다.

; 여기까지는 하나의 명령어이니깐 한번에 실행해주세요

 

4.제어문자

=>\ 다음에 하나의 영문자를 추가해서 만든 특별한 문자 상수

\n: 줄 바꿈

\t:

\',\",\\ : ',",\를 의미

 

5.주석

//내용: 한줄 주석

/* 내용 */ : 여러 줄 주석

 

 

6.Literal

=>사용자가 직접 작성한 데이터

숫자 리터럴: 10진수 형태로 작성

문자열 리터럴: '문자열' 또는 "문자열"

논리형 리터럴: true,false

참조형 리터럴: null(만들어졌지만 가리키는 데이터가 없음 . 변수는 만들어졌는데 값이 null인것이고 ) ,undefined(만들어지지 않는 데이터)

 

var a ;//a undefined

var b= null;//bnull이다.

 

int a ; undefined사용못한다.undefined는 이름 자체가 없다.

String str = null; str.은 할 수없다. 데이터가 없다. 이름이 있는데 저장하고 있는게 없다.

 

7. 변수 선언

var 변수명 = ;

=>처음에 값을 대입하지 않으면 변수는 생성되지 않습니다.

=>초기값을 대입하지 않은 경우에는 나중에 값을 대입해야만 생성되는 것으로 간주

=>var를 붙이지 않고 만드는 것이 가능한데 이 경우는 실제로는 변수가 만들어지는 것으로 보지 않습니다.

var를 붙이지 않으면 전역변수의 개념처럼 동작합니다.

변수명 = 값 이런식으로 하기도 합니다.

 

8. 데이터 출력

1) 브라우저 창에 출력

document.write(메시지 또는 변수 나 상수 또는 연산식 그리고 함수 수행 )

document.writeln(메시지 또는 변수 나 상수 또는 연산식 그리고 함수 수행 )

=>writeln은 줄 바꿈이 아니고 한번에 수행해 달라는 요청

ln이 없으면 모아서 출력하는 것이고 ln이 있으면 모으지 말고 바로 출력하는 것입니다.

메시지가 길 때 한번에 작성하는 것이 어려우면 write 를 이용해서 나누어서 작성한 후 한번에 출력 해달라고 합니다.

 

2)대화상자에 출력

alert(출력할 내용)

=>최근 브라우저에서는 별도의 윈도우 출력하는 것을 권장하지 않아서(팝업 금지) 옵션을 변경하지 않으면 출력되지 않을 수 있습니다.

 

 

3)브라우저 디버거에 출력

console.log(출력할 내용)

=>화면에서는 보이지 않고 디버거 창을 열어서 콘솔에서 확인

크롬의 경우는 마우스 오른쪽 클릭해서 [검사]를 실행해야 확인이 가능

 

9.스크립트 작성 위치

=>스크립트는 html문서 내의 어느곳에나 작성 가능

=>순서대로 실행되므로 자신이 사용하고자 하는 객체는 호출하기 전에 만들어져 있어야 합니다.

=>예전에는 head에 만들었는데 최근에는 body안에 만들기도 합니다.

 

10.html파일을 만들고 작성

<script>

           //변수 만들기

           var msg ="자바스크립트";

          

           //브라우저에 출력

           document.write(msg);

           //대화상자에 출력

           alert("대화상자에 출력");

           //콘솔에 출력

           console.log("콘솔에 출력");

</script>

 

           //자바스크립트에서는 변수를 만들고 값을 대입하지 않으면 없는 값으로 간주

           //이런 경우는 undefined

           var x;

           document.write(x);

 

 

<script>

           //변수 만들기

           var msg ="자바스크립트";

          

           //브라우저에 출력

           document.write(msg +"<br/>");

           //대화상자에 출력

           alert("대화상자에 출력");

           //콘솔에 출력

           console.log("콘솔에 출력");

          

          

           //자바스크립트에서는 변수를 만들고 값을 대입하지 않으면 없는 값으로 간주

           //이런 경우는 undefined

           var x;

           document.write(x);

</script>

 

 

11.javascript디버깅

=>자바스크립트는 대부분의 IDE가 디버깅 기능을 제공하지 않습니다.

1)자바스크립트는 에러가 없는 부분까지 실행하는 경우가 많기 때문에 중간중간 출력하는 코드를 삽입해서 어디까지 에러없이 실행되는지 확인해 볼 수 있습니다.

 

2)브라우저의 검사 기능을 이용

크롬이나 IE는 검사 기능을 이용하면 문서의 구조, 그리고 CSS적용 , 자바스크립트 에러를 어느 정도 까지는 확인할 수 있도록 해줍니다.

단지 에러라고 출력합니다. 예외 종류를 구체적으로 알려주지는 않습니다.

 

document.wris is not a function

위 문장만 가지고는 document가 없는 것인지 wris가 없는 것인지 알 수 없습니다.

 

 

12. 배열 선언

=>자바스크립트의 배열은 List입니다.

var 배열명 = [데이터 나열];

var 배열명 = new Array(데이터 나열);

 

=>데이터 사용

배열명[정수 인덱스]

 

=>없는 인덱스를 사용하면 가져올 때는 undefined 대입할 때는 추가가 됩니다.

파이썬이나 자바스크립트는 객체가 클래스로부터 만들어지지 않고 Map의 인스턴스로 보는 것이 이해하기 편리합니다.

 

 

 

 

13.자료형 변환

1)숫자로 된 문자열에 * 정수를 하게 되면 문자열을 숫자로 변환해서 *을 수행

2)자료형(데이터) 를 이용하면 데이터를 자료형으로 변환

Number, Boolean , String

정확하게는 자료형이 아니라 생성자로 봐야 한다.

3)다른 자료형 객체를 문자열로 변환할 때는 toString()메소드의 결과를 이용해도 됩니다.

 

14)연산자

1)최우선 연산자

=>[인덱스] :배열에서 인덱스번째 데이터를 가리키기 위한  연산자

=>.:객체가 자신에게 속한 속성이나 메소드를 호출 할 때 사용하는 연산자

 

 

2)증감연산자

=>정수 변수에만 사용가능한 연산자

=>++,--

=>++는 변수의 값을 1증가시키고 --는 변수의 값을 1감소시키는 연산자

=>명령문에 사용되는 경우 ++를 변수 앞에 사용하면 변수의 값을 증가시키고 명령문에 변수의 값을 사용하고 변수 뒤에 사용하면 변수의 값을 명령문에 사용하고 변수의 값을 감소시킵니다.

 

3)산술 연산자

=>% : 나머지 구해주는 연산자

=>*,/ :곱과 나누기 연산자

=>+,- : 더하기와 뺴기 연산자

 

 

4)결합연산자

=>문자열과 다른 종류의 데이터또는 문자열과의 결합에 사용: +

 

5)비트 논리 연산자

=>정수를 2진수로 변환해서 비트 단위로 연산 한 후 다시 10정수로 리턴해주는 연산자

& : 둘다 1인 경우만 1그 이외의 경우는 0

| : 둘다 0인 경우만 0 그 이외의 경우는 1

^: 두개가 같으면 0 다르면 1

파이썬의 numpy, pandasR에서는 그룹 데이터 Collection이 이 연산자를 이용해서 조건 필터링을 합니다.

 

~: 1의 보수

<< : 왼쪽의 데이터를 오른쪽의 숫자만큼 왼쪽으로 shift - 1번할 때마다 *2

>> : 왼쪽의 데이러를 오른쪽의 숫자만큼 오른쪽으로 shift -1번 할때마다 /2

 

컴퓨터의 숫자 표현

정수: 2진수로 표현

실수 : 부동소수점 방식으로 표현

음수 : 2의 보수 방법으로 표현한다.

 

 

-20

1의 보수 구하면

 

-를 하는 것은 뒤으로 부터 1을 찾은 다음 그다음 부터 뒤집기 하면 된다.

 

정수 -> 2진수 문자열

2진수 문자열 -> 정수

정수 문자열 -> 정수

"12476" -> 12476

Integer.pareInt()안하고 정수문자열을 정수로 바꾸는 것

 

 

실수:

 

 

python에서는 &&전체를 연산하고 & 부분으로 연산한다.

1111

1111

비교할 경우

&&는 결과가 하나 나오고

& 는 여러개 나온다.

 

~1의 보수이다. 숫자상에는 의미가 없는데

1의 보수는 0->1 1->0으로 바꾼다.

숫자로는 의미가 별로 없지만 이미지에서는 의미를 가진다. 반대되는 색을 만들 경우

이미지 에서는 0->1 1->0을 반대되는 색을 의미한다.

 

-1:

12의 보수가 전부 1이기 때문에

0000 0001

1111 1111 =>-1

-1은 모든 비트가 1로 전부 채워졌다.

 

-1은 모든 비트가 1로 채워진 수

signed

unsigned

 

00000000~ 11111111

-1이 될수 있고 가장 큰 수도 될수 있다.

indexOf() -> 값이 있으면 위치를 주고 없으면 -1을 준다. -1을 끝까지 가봤는데 없다.

infinite가 무한데라고 했는데 -1주면 무한반복처럼 동작한다.

컴퓨터에는 무한반복이 없다.

 

a++->있는 언어 있고 없는 언어도 있다.

a= a+1=>알고리즘은 이것을 사용한다.

and0하고 &하면 0을 준다.

&0->포맷 혹은 delete이다.

or 데이터를 복사할 떄는 삽입할 떄 사용한다.

 

0하고 or하면 데이터가 그대로 옯겨진다. copy,

xor 비교할 때사용한다..

 

6) 비교 연산자

>,>=,<,<= : 크기 비교

 

==: 값의 일치 여부를 확인

=== : 값과 자료형 까지 일치하는 지 확인

"123" == 123 : true로 나온다. 원래는 비교가 안되야 하는데 ->숫자 123을 문자열로 변환해서 비교해버립니다

"123" === 123 : false

 

"123" == 123 : "123" == "123"

 

!= : 값의 불일치 여부를 확인

 

 

7) 조건 존리 연산자

&& :and

||:or

=>데이터 전체를 하나로 보고 연산을 해서 결과가 boolean 1개로 리턴

 

 

8) 여러개의 데이터로 구성된 데이터 끼지 andor연산을 할 때는 &

python에서는 && 중요하고

데이터 분석에서는 & 이 중요하다.

 

9) 삼항 연산자

(조건식) ? 명령1: 명령2;

=>조건식이 true이면 명령1 false이면 명령2

=>조건식은 boolean데이터가 나오는 식이어도 되지만 숫자의 경우는 0이면 false그 이외의 수는 양true로 간주하고 존재하는 데이터면 true존재하지 않는 데이터 (null, undefined)false로 간주합니다.

 

var a = 10;

a?100:200->a10이라는 값을 가지고 있어서 true로 간주

a= 0 ->a false로 간주

 

var ar;

arfalse

ar = [100,200];

artrue

 

10)대입 연산자

= : 오른쪽 데이터를 왼쪽의 변수에 대입

 

+= : 왼쪽의 변수에 저장된 값과 오른쪽의 데이터를 +연산을 해서 결과를 왼쪽의 변수에 대입

 

var a= 10;

a+= 7;

a = a+7과 같습니다.

 

 

11)new

=>생성자를 호출할 때 사용하는 연산자로 생성자를 이용해서 객체를 생성하고 생성한 객체의 참조를 리턴하는 연산자

 

12)this

=>생성자나 인스턴스 메소드 안에서 객체 자신을 가리키는 포인터

 

13) typeof

=>데이터의 자료형을 문자열로 리턴해주는 연산자

 

 

14)delete

=>데이터를 삭제하는 연산자

 

15)instance of

=>객체가 특정 클래스로 부터 만들어 졌는지 확인해서 boolean으로 리턴해주는 연산자

 

16)in

=>속성이 객체에 존재하는지 확인해서 boolean으로 리턴하는 연산자

 

결과 : intercept=>절편

결과 : slope=>기울기

책은 자기가 중요하는 것만 출력해준다.먼저 타입을 확인해야 한다

dir 사용할 수 있는 것이 다 나온다.

type으로 확인하고 -> dir ->help

어떻게 사용하는지 주고 가면서 해야 한다.

어떤 자료형인지 확인 해야 한다.

 

 

15.제어문

1)제어문의 종류

=>분기문 : 조건이나 값에 따라 다른 문장을 수행해도록 해준는 명령어

if: 조건에 의한 분기

switch:값에 대한 분기

 

=>반복문(Loop- iteration)

while :조건이 false가 될때 까지 수행

do ~while : 일단 한번은 하고 조건이 false가 될 때 까지 반복

for :  시작점부터 종료하는 부분 까지 하나의 괄호안에 모두 작성

for ~ each : for ~ in - 어떤 객체나 데이터의 모임을 순서대로 방문 (순회)

자바스크립트는 데이터의 모임 뿐 아니라 객체도 for-in사용 가능

 

1)if

=>조건 분기를 위한 명령어

 

if(조건1){

           조건1의 내용이 true일 때 수행할 내용;

}else if(조건2){

           조건1의 내용이 false이고 조건2true일 때 수행할 내용;

} else if(조건3){

           앞의 모든 조건이 false이고 조건3true일 때 수행할 내용;

}...

else{

           앞의 모든 조건이 false일 때 수행할 내용

}

 

=>if는 필수 이고 else if는 생략 가능하고 여러 개 사용도 가능

else는 생략 가능하고 1번만 사용 가능

 

3)switch

=>값에 의한 분기

switch(변수 또는 정수나 문자열을 리턴하는 연산식){

           case 1:

                       ()안의 결과가 값1일 때 수행할 내용;

                       break;'

           case 2:

                       ()안의 결과가 값2일 때 수행할 내용;

                       break;'

           ....

           default:

                       일치하는 값이 없을 때 수행할 내용

                       break;

}

=>break가 없으면 break를 만날 때 까지 계속 수행합니다.

 

 

 

반응형

'Study > html,css, javascript' 카테고리의 다른 글

frontEnd-6  (0) 2020.10.15
frontEnd-5  (0) 2020.10.15
frontEnd-4  (0) 2020.10.12
frontEnd-2  (0) 2020.10.12
frontEnd-1  (0) 2020.10.10

+ Recent posts