반응형
웹퍼블리셔 - 프론트엔드(디자인)
- 자바스크립트 => 발전이 굉장히 빠르다.
프로그램 언어 구조
1. 자료
1) 자료형
2) 변수(상수)
3) 연산자
계산
- 값과 변수
- 값과 값
- 변수와 변수
사칙연산자
+ -> 더하기 연산자
* -> 곱하기 연산자
- -> 빼기 연산자
/ -> 나누기 연산자
2. 흐름제어
js.09 연산자 +, -, *, /
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// 연산자 +, - *, /, %
console.log(1 + 1);
var num1 = 10;
console.log(num1 + 1);
var num2 = 20;
console.log(num1 + num2);
</script>
</body>
</html>
js.10 연산자 %를 이용한 짝, 홀수; 배수
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// / - 몫
// % - 나머지 (정수)
/*
1. %는 짝수와 홀수 구분시 사용
2. 배수...
*/
console.log(1 % 2); //홀수
console.log(2 % 2); //짝수
console.log(3 % 2); //홀수
console.log(4 % 2); //짝수
</script>
</body>
</html>
js.11 문자열 연결 연산자, 우선순위 지정법
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log(1 + 1);
// 문자열 연결 연산자
console.log('1' + 1);
console.log(1 + 1 + 1);
console.log(1 + '1' + 1);
//
console.log(1 + 1 + '1');
// () 우선순위
console.log((1 + 1) + '1');
</script>
</body>
</html>
js.12 Boolean(진리값) = true/false 논리연산자
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// 불 / 불린 / 진리값 = true/false
// 비교
console.log(1 >= 3);
console.log(1 <= 3);
// = : 할당 / 대입
console.log(1 == 3);
console.log(1 != 3);
// 논리연산자 : 두 개 이상의 비교연산을 합할때 사용
// X
int x = 15;
console.log(10 < x < 30);
// 10 < x && x < 30 = 동시에 참이 되도록 묶음
// 논리합(||) - 한쪽이 참이면 무조건 참 : 또는
// 논리곱(&&) - 양쪽이 모두 참이면 참 : 그리고
</script>
</body>
</html>논리 연산자
! -> 논리 부정 연산자
&& -> 논리곱 연산자
|| -> 논리합 연산자
논리곱 연산자는 아래와 같다.
좌변 우변 결과
true true true
true false false
false true false
false false false
논리합 연산자는 아래와 같다.
좌변 우변 결과
true true true
true false true
false true true
false false false
js.13 복합 대입 연산자
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var num1 = 10;
//num1 = num1 + 10;
num1 += 10;
console.log(num1);
var html = '';
html += '<ul>';
html += ' <li>사과</li>';
html += ' <li>수박</li>';
html += ' <li>딸기</li>';
html += '</ul>';
//console.log(html);
document.write(html);
</script>
</body>
</html>복합 대입 연산자
+= -> 기존 변수의 값에 값을 더한다.
-+ -> 기존 변수의 값에 값을 뺀다.
*= -> 기존 변수의 값에 값을 곱한다.
/= -> 기존 변수의 값에 값을 나눈다.
%= -> 기존 변수의 값에 나머지를 구한다.
js.14 증감 연산자
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var num = 1;
//num = num + 1;
//num += 1;
//num++;
++num;
//num--;
console.log(num);
var num1 = 1;
var num2 = 1;
var num3 = num1++; //전위
var num4 = ++num2; //후위
console.log(num3);
console.log(num1);
console.log(num4);
</script>
</body>
</html>증감 연산자
변수++ -> 기존의 변수 값에 1을 더한다(후위)
++변수 -> 기존의 변수 값에 1을 더한다(전위)
변수-- -> 기존의 변수 값에 1을 뺀다(후위)
--변수 -> 기존의 변수 값에 1을 뺀다(전위)
js.15 Undefined 자료형
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var test1 = '1';
console.log(typeof(test1));
var test2; //선언만 해주고 값을 안줌
console.log(typeof(test2));
</script>
</body>
</html>
js.16 숫자와 문자열 자료형 변환
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// 형 변환
console.log(1 + 1);
console.log(1 + String(1));
console.log(1 + '1');
console.log(1 + Number('1'));
</script>
</body>
</html>
js.17 제어문
흐름에 대한 컨트롤, 상상
- 도식화(설계도)
1. flowchart(흐름도)
2. DFD(Dafe Flow Diagram) 자료 흐름도
프로그램
항상 위에서 아래로 흘러간다. (변화)
조건에 의한 분기 : 조건문
참 / 거짓 다른 처리
조건에 의한 반복 : 반복문(loop)
참인 동안 반복
* 비교/논리연산자 : 불린
if (조건) {
참 일때 수행할 문장;
}
num 변수의 값이 10 이상일 때 '많다'라고 출력하는 프로그램 생성.
if(num > 10) {
console.log('많다');
}
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
var num = 10;
console.log('num : ' + num);
console.log('끝');
</script>
</body>
</html>
js.18 if, if else.문
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var num = 9;
if(num > 10) {
console.log('많다');
}
else {
console.log('적다');
}
</script>
</body>
</html>
js.19 짝수 홀수 구분짓는 프로그램
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var num = 9;
// 짝수 인지 홀수 인지
// 기준점 : 홀수
if(num % 2 == 1) {
console.log('홀수');
}
else {
console.log('짝수');
}
</script>
</body>
</html>
js.20 if else문 중첩
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
// 중첩
var hours = 10;
if(hours <= 12) {
//console.log('아침');
if(hours <= 9) {
console.log('아침');
}
else {
console.log('아점');
}
}
else {
//console.log('저녁');
if(hours <= 18) {
console.log('점저');
}
else {
console.log('저녁');
}
}
console.log('끝');
</script>
</body>
</html>
js.21 선택적 if를 이용한 학점프로그램
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
// 선택적 if
var hakjum = 90;
if(hakjum >=90) {
console.log("A");
}
else {
if(hakjum >= 80) {
console.log("B");
}
else {
if(hakjum >= 70) {
console.log("C");
}
else {
if(hakjum >=60) {
console.log("D");
}
else {
console.log("F");
}
}
}
}
console.log('끝');
</script>
</body>
</html>
js.22 if else if 조건문
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
// 선택적 if else if
var hakjum = 90;
if(hakjum >=90) {
console.log("A");
}
else if(hakjum >= 80) {
console.log("B");
}
else if(hakjum >= 70) {
console.log("C");
}
else if(hakjum >=60) {
console.log("D");
}
else {
console.log("F");
}
console.log('끝');
</script>
</body>
</html>
js.23 Switch 조건문
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
var num = 20;
switch(num) {
case 10 :
console.log("10");
break;
case 20 :
console.log("20");
break;
case 30 :
console.log("30");
break;
default:
console.log("기타");
break;
}
console.log('끝');
</script>
</body>
</html>
js.24 Switch문을 이용한 짝수 / 홀수 / 기타
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
var num = 20;
//switch - num 짝수 / 홀수 / 기타
//var i = num % 2;
switch(num % 2) {
case 0:
console.log("짝수");
break;
case 1:
console.log("홀수");
break;
default:
console.log("기타");
break;
}
console.log('끝');
</script>
</body>
</html>
js.25 삼항 연산자
(조건) ? 참 일때 문장 : 거짓 일때 문장;
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
// (조건) ? 참 일때 문장 : 거짓 일때 문장;
var num = 3;
(num % 2 == 0) ? console.log('짝수') : console.log('홀수');
var result = (num % 2 == 0) ? ('짝수') : ('홀수');
console.log(result);
console.log('끝');
</script>
</body>
</html>
반복문
조건 -> 반복수행(횟수)
초기값 / 조건식 / 증감식 => 반복횟수
js.26 반복문 for 문
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
// 10
//초기값 / 조건식 / 증감식 => 반복횟수
/*for(var i=0 ; i <20 ; i = i + 2) {
console.log(i);
}
*/
//1부터 10까지 홀수 출력
//for, if 둘다 써야함
for(var i=1 ; i<=10; i++) {
if(i%2 == 1) {
console.log("값 : " + i);
}
}
console.log('끝');
</script>
</body>
</html>
js.27 1부터 50까지 3의 배수 출력
내가 한거
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
// 1부터 50까지 3의 배수 출력
for(i=3; i<=50; i=i+3) {
console.log(i);
}
console.log('끝');
</script>
</body>
</html>
강사님이 한거
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
// 1부터 50까지 3의 배수 출력
/*
for(i=3; i<=50; i=i+3) {
console.log(i);
}
*/
for(i=1 ; i<=50 ; i++) {
if(i % 3 == 0) {
console.log("값 :" + i);
}
}
console.log('끝');
</script>
</body>
</html>
js.28 1부터 10까지의 합
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
// 1부터 10까지의 합
// 1부터 100까지 짝수의 합
// 1 + 2 + 3 + .. + 10
var sum = 0;
for(var i=1; i<=100; i++) {
if(i % 2 == 0) {
sum = sum + i;
}
}
console.log('합계 :' + sum);
console.log('끝');
</script>
</body>
</html>
js.29 반복문의 중첩
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
console.log('시작');
for(var i=1; i<=5; i++) {
for(var j=1 ; j<=5; j++) {
// 25번 수행됨.
console.log('i : ' + i + '/ j : ' + j);
}
}
console.log('끝');
</script>
</body>
</html>
js.30 html로 출력
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<table width="400" border="1" cellspacing="0">
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>
<script type="text/javascript">
document.write("<table width='400' border='1' cellspacing='0'>");
document.write("<tr>");
for(var i=1; i<=5; i++) {
document.write("<td>" + i + "</td>");
}
document.write("</tr>");
document.write("</table>");
</script>
</body>
</html>
js.31 for문을 중첩하여 행과 열이 있는 식을 만드는 법
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table width='400' border='1' cellspacing='0'>");
// 행과 열이 있는 식에 많이 쓰인다.
for(var i=1; i<=5; i++) {
document.write("<tr>");
for(var j=1; j<=5; j++) {
document.write("<td>" + i + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
js.32 테이블안에 구구단이 들어가게 만들어라
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table width='700' border='1' cellspacing='0'>");
// 구구단
for(var i=1; i<=9; i++) {
document.write("<tr>");
for(var j=1; j<=9; j++) {
document.write("<td align='left'>" + i + ' x ' + j + ' = ' + (i*j) + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
js.33 *이 순차적으로 1개씩 10줄까지 늘어나는 것
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
for(var row = 1; row<=10; row++) {
var result = "";
for(var col = 1; col<=row; col++) {
result += "*";
}
console.log(result);
}
</script>
</body>
</html>
js.34 js33번의 반대
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
for(var row = 1; row<=10; row++) {
var result = "";
for(var col = 10; col>=row; col--) {
result += "*";
}
console.log(result);
}
</script>
</body>
</html>
js.35 js.34를 html에서 구현하기
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table width='700' border='1' cellspacing='0'>");
// 구구단
for(var row=1; row<=10; row++) {
document.write("<tr>");
for(var col=1; col<=10; col++) {
if(col<= 11-row) {
document.write("<td align='center'>*</td>");
}
else {
document.write("<td align='center'></td>");
}
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
js.36 구구단 advanced
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
console.log('시작');
document.write("<table width='900' border='1' cellspacing='0'>");
for(var dan = 0 ; dan<=9 ; dan++) {
document.write("<tr>");
for(var col = 0 ; col<=9 ; col++) {
if(dan == 0 && col == 0) {
document.write("<td></td>");
} else if(dan == 0) {
document.write("<td align='center'>X" + col + "</td>");
} else if(col == 0) {
document.write("<td align='center'>" + dan + "단</td>");
} else {
document.write("<td align='center'>" + dan + "X" + col + "=" + (dan * col) + "</td>");
}
}
document.write("</tr>");
}
document.write("</table>");
console.log('끝');
</script>
</body>
</html>
반응형
'Web & Mobile > Javascript' 카테고리의 다른 글
| Lecture 10 - Javascript(6) (0) | 2019.04.14 |
|---|---|
| Lecture 9 - Javascript(5) (0) | 2019.04.14 |
| Lecture 8 - Javascript(4) (2) | 2019.04.13 |
| Lecture 7 - Javascript(3) (0) | 2019.04.13 |
| Lecture 5 - Javascript(1) (0) | 2019.04.13 |
댓글