VS code 설치
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
* extension 설치
** 설치 팩 **
한글 팩
Open In Default Browser
** 웹 페이지의 구조를 만들기 → HTML
** 디자인 측면 → CSS
** 프로그램 → JavaScript ⇒ 영상처리 소프트웨어 (미니 프로젝트 Ver 1)
## HTMl &JavaScript 를 코딩하기 위한 IDE (통합 개발 환경) ##
WebStorm → 유료
Visual Studio Code + 크롬(=엣지) → MS 무료
## HTML >> HTML 4.0 >> HTML5 (동영상 , 게임, 파일 ...)
## HTML의 문제점 : 다양한 기능을 위해서 플러그인이 필요함 (Flash, ActiveX)
--> <!DOCTYPE html> html 5까지 확장
* HTML5의 기능
- 웹 폼 (Web Form)
- 오디오 , 비디오 (Audio/Video)
- 캔버스(Canvas)
- SVG(Scalable Vector Graphics)
- 웹 스토리지 (Web Storage)
- 웹 SQL 데이터베이스 (Web SQL database)
- 인덱스 데이터베이스 (Indexed Database API)
- 파일 입출력 (File I/O)
- 위치정보 API (Geolocation API)
- 웹 워커 (Web Worker)
- 웹 소켓 (Web Socket)
- 오프라인 웹 애플리케이션 (Offline Web Application)
- 컴퓨터 : H/W +S/W
- H/W : CPU, RAM, DISK
- S/W : OS, P/L(C, C++), App
- 가상 머신 : Windows Server 2016/2022
- 웹 프로그래밍 : HTML >> HTML5 -----> 캔버스(Canvas) + JavaScript
- 기본적인 태그 공부
- 본격적인 프로그래밍 (JavaScript) --> 기본 프로그래밍으로써 JavaScript
- 프로그래밍 언어 :
컴파일러 : C/C++ , java, C#.... 소스 >> Object 코드(최적화) >> 한방에 실행
인터프리터 (=스크립트) : Python, JavaSCript(웹)... 소스 >> 바로 실행 [특수한 목적, 단점: 느림, 한 줄씩 실행]
* 스크립트 언어의 단점 : 타입 선언을 해주지 않는다.
var (변수) 선언은 권장하지만, 변수 선언이 다 이므로, 버그가 생길 확률이 높다.
#변수
* 변수 이름 규칙 : 딱 보고 무슨 변수인지 알아야 함
//변수 선언부 : 소문자로 시작 , 의미를 파악하기 쉽게 , 너무 길면 x
var intNum1, num2, num3;
var str1, str2;
var m_myValue = 100;
function func1(){
var myValue = 200;
document.writeln("함수안:"+myValue);
}
document.writeln("함수밖:"+m_myValue);
func1();* 전역 변수와 지역변수의 이름은 구분지어야 함!!!
// 코드는 안 헷갈리게 하는게 중요 !!!
// document.write 안에 ++ 입력하지 말것 !
++m_myValue;
document.writeln("함수밖:"+m_myValue);
m_myValue++;
document.writeln("함수밖:"+m_myValue);
func1();1-1. 1부터 100까지 홀수의 합계
// 1부터 100까지 홀수의 합계
var i;
var numHap =0;
for(i=1;i<=100;i++){
numHap += i;
}
document.writeln("1-1번:"+numHap);1-2. 1부터 1000까지의 88의 배수의 합계
//1부터 1000까지의 88의 배수의 합계
var numHap2 = 0;
for(i=1;i<=1000;i++){
if(i%88 == 0){
numHap2 += i;
//document.writeln(i);
}
}
document.writeln("1-2번:"+numHap2);1-3. 12345부터 67890까지 872의 배수의 합계
//12345부터 67890 까지 872의 배수의 합계
var numHap3 = 0;
for(i=12345; i<=67890; i++){
if (i%872==0) {
numHap3 += i;
// document.writeln(i);
}
}
document.writeln("1-3번:"+numHap3)심화 ) 1-1. 2부터 100까지의 소수를 출력하고 합계
소수? 1과 자기 자신을 제외하고는 나누어 떨어지지 않는 수 ,
2,3,5,7,11,13,17,19,23,29.............
//심화 2부터 1000까지의 소수를 출력하고 합계
//실무 : i,j,k --> 배열의 첨자로만 사용.
var numHap4 =2;
for(var num= 3; num <= 1000; num++){
var sosuYN = true;
for(var div=2; div<num; div++){
if(num%div == 0){
sosuYN = false;
}
}
if (sosuYN == true) {
// document.writeln(num)
numHap4 += num;
}
}
document.writeln("심화:"+numHap4);- 더 나은 코딩 [튜닝 , 자료구조 공부해야 함: 효율성을 갖추기 위해]
//심화 2부터 1000까지의 소수를 출력하고 합계
//실무 : i,j,k --> 배열의 첨자로만 사용.
var numHap4 =2;
for(var num= 3; num <= 1000; num+=2){
var sosuYN = true;
for(var div=2; div<num/2+1; div++){
if(num%div == 0){
sosuYN = false;
break;
}
}
if (sosuYN == true) {
// document.writeln(num)
numHap4 += num;
}
}
document.writeln("심화:"+numHap4);* 버그를 줄이는 코드 (타입 선언)
res = String(23) + String(35) + "abc";
document.writeln(res);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//함수 선언부
function addNumber(n1,n2){
var reValue;
reValue = n1 + n2; // 복잡한 로직
return reValue;
}
</script>
<script>
//전역 변수 선언부
var m_num1=100,m_num2=200;
</script>
<script>
//메인 코드부
result = addNumber(m_num1,m_num2);
document.writeln("<h2>"+result+"</h2>");
</script>
</head>
<body>
</body>
</html>* 배열
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var ary1 = [10,20,30,40,50,60] //0,1,2,3,4
var hap = 0;
for (var i=0;i<ary1.length; i++){
hap += ary1[i];
}
document.writeln("<h2>"+hap+"</h2>");
var ary2 = new Array(); //빈 배열을 생성
ary2[0] = 10;
ary2[1] = 20;
ary2[2] = 30;
for(var i =0; i<ary2.length; i++){
hap += ary2[i];
}
document.writeln("<h2>"+hap+"</h2>");
</script>
</head>
<body>
</body>
</html>* 파일 처리
퀴즈 2.
2-1. if 문 연습 --> 점수를 입력 받아서 , A~F까지 학점 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//2-1. if 문 연습 --> 점수를 입력 받아서 , A~F까지 학점 출력
var scoreNum = prompt("점수 입력하기:",0);
var score;
if(scoreNum > 90){
score = "A";
}else if(scoreNum > 80){
score = "B";
}else if(scoreNum > 70){
score = "C";
}else if(scoreNum > 60){
score = "D";
}else if(scoreNum > 50){
score = "E";
}else{
score = "F";
}
document.writeln("학점은 "+score+"입니다.");
</script>
</head>
<body>
</body>
</html>2-2. 위 if 문을 switch ~case 문으로 변경하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//위 if 문을 switch ~case 문으로 변경하기
var scoreNum = prompt("점수 입력하기:",0);
document.writeln(parseInt(scoreNum/10));
var score;
switch (parseInt(scoreNum/10)){
case 10 : case 9:
score = "A";
break;
case 8:
score = "B";
break;
case 7:
score = "C";
break;
case 6:
score = "D";
break;
case 5:
score = "E";
break;
default :
score = "F";
break;
}
document.writeln("학점은 "+score+"입니다.");
</script>
</head>
<body>
</body>
</html>
2-3. 위 1-3을 배열에 저장한 후에, 합계를 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//위 1-3을 배열에 저장한 후에, 합계를 출력하기
//12345부터 67890 까지 872의 배수의 합계
var arNum = new Array();
var numHap3 = 0;
var k=0;
for(var i=12345; i<=67890; i++){
if (i%872==0) {
arNum[k] = i;
// document.writeln(arNum[k]);
k++;
}
}
// document.writeln(arNum.length);
for( var j = 0; j < arNum.length; j++){
// document.writeln(arNum[j]);
numHap3 += arNum[j];
}
document.writeln(numHap3);
</script>
</head>
<body>
</body>
</html>2-4. 구구단 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//구구단 출력하기
var i , j ;
for(i=2; i<10;i++){
for(j=1;j<10;j++){
document.writeln(i+"+"+j+"="+i*j+"<br>");
}
}
</script>
</head>
<body>
</body>
</html>2-5. 두 숫자를 입력받고 , 더하기 /빼기 / 곱하기 /나누기/나머지/제곱 결과를 출력(함수처리 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//두 숫자를 입력받고 , 더하기 /빼기 / 곱하기 /나누기/나머지/제곱 결과를 출력(함수처리 )
var num1= prompt();
var num2 = prompt();
parseInt(num1);
parseInt(num2);
var result;
function addNum(n1,n2){
result = parseInt(n1)+parseInt(n2);
return document.writeln("합은"+result);
}
function subNum(n1,n2){
result = n1-n2;
return document.writeln("뺄셈은"+result);
}
function multNum(n1,n2){
result = n1*n2;
return document.writeln("곱셈은"+result);
}
function divNum(n1,n2){
result = n1/n2;
return document.writeln("나눗셈은"+result);
}
function sqrtNum(n1,n2){
sqrN1 = sqrt(n1);
sqrN2 = sqrt(n2);
return document.writeln("제곱은 : "+sqrN1+","+sqrN2);
}
addNum(num1,num2);
subNum(num1,num2);
multNum(num1,num2);
divNum(num1,num2);
sqrtNum(num1,num2);
</script>
</head>
<body>
</body>
</html>##미션 (3일차) ##
2차원 배열 처리 (= 영상 처리 PreStudy) : 8x8 배열을 사용하기
1. 영상을 어둡게 처리
2. 영상을 반전하기 (0->255,1->254 ... 254->1, 255->0)
3. 영상을 상하 및 좌우 미러링하기
4. 영상을 흑백으로 처리하기. 127기준 (흑백은 0과 255만 존재하는 이미지)
5. 영상을 흑백으로 처리하기 . 평균값 기준
-- 이후 <심화> --
6. 영상을 흑백으로 처리하기 . 중앙값 기준
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var image; //2차원 배열 (이미지 --> 2차원 배열)
var ROW = 8, COL=8; //행,열을 지정후 작업 --> 이미지의 사이즈를 알아낸 후 작업
image = new Array(ROW);
for(var i=0; i<ROW; i++){
image[i] = new Array(COL);
}
//이미지 --> 배열로 읽어들이기 (Loding)
for(var i=0; i<ROW;i++){
for(var k=0; k<COL; k++){
image[i][k] = Math.floor(Math.random() * 256);
// image[i][k] = Math.floor(i+k);
}
}
//이미지를 출력하기
for(var i=0; i<ROW;i++){
for(var k=0; k<COL; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("<br>");
//영상처리 1 : 사진을 50밝게 처리하자 .
for(var i=0; i<ROW;i++){
for(var k=0; k<COL; k++){
if (image[i][k] + 50 > 255)
image[i][k] += 255;
else
image[i][k] += 50;
}
}
//이미지를 출력하기
for(var i=0; i<ROW;i++){
for(var k=0; k<COL; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("1번 문제 <hr>");
//1. 영상을 어둡게 처리
for(var i=0; i<ROW;i++){
for(var k=0; k<COL; k++){
if (image[i][k]-50 > 255) {
image[i][k] += 255;
}
else if(image[i][k]-50 < 0){
image[i][k] += 0;
}
else{
image[i][k] -= 50
}
}
}
//이미지를 출력하기
for(var i=0; i<ROW; i++){
for(var k=0;k<COL; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("1번 <hr>");
//2. 영상을 반전하기 (0->255,1->254 ... 254->1, 255->0)
for(var i=0; i<ROW;i++){
for(var k=0; k<COL; k++){
image[i][k]= Math.abs(255-image[i][k]);
}
}
//이미지를 출력하기
for(var i=0; i<ROW; i++){
for(var k=0;k<COL; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("2번 <hr>");
//3. 영상을 상하 및 좌우 미러링하기
image.reverse();
for(var i=0; i<ROW; i++){
image[i].reverse();
for(var k=0;k<COL; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("3번 <hr>");
//4.영상을 흑백으로 처리하기. 127기준 (흑백은 0과 255만 존재하는 이미지)
for(var i=0; i<ROW;i++){
for(var k=0; k<COL; k++){
if(image[i][k] <= 127){
image[i][k] = 0;
}
else{
image[i][k] = 255;
}
}
}
//이미지를 출력하기
for(var i=0; i<ROW; i++){
for(var k=0;k<COL; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("4번 <hr>");
//5. 영상을 흑백으로 처리하기 . 평균값 기준
var sum = 0;
var avg = 0;
for(var i=0; i<ROW; i++){
for(var k=0; k<COL; k++){
sum += image[i][k];
}
}
avg = Math.floor(sum/(ROW*COL));
for(var i=0; i<ROW;i++){
for(var k=0; k<COL; k++){
if(image[i][k] <= avg){
image[i][k] = 0;
}
else{
image[i][k] = 255;
}
}
}
//이미지를 출력하기
for(var i=0; i<ROW; i++){
for(var k=0;k<COL; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("5번 <hr>");
//6. 영상을 흑백으로 처리하기 . 중앙값 기준
for(var i=0 ; i<ROW;i++){
for(var k=0; k<COL; k++){
console.log(image[i].sort());
image[i].sort(function(a,b){
if(a > b){
return 1;
}
if(a === b){
return 0;
}
if(a < b){
return -1;
}
});
// document.write(image[i][k]+", ");
}
}
console.log(image[4][4]);
var median = image[4][4];
for(var i=0; i<ROW;i++){
for(var k=0; k<COL; k++){
if(image[i][k] <= median){
image[i][k] = 0;
}
else{
image[i][k] = 255;
}
}
}
//이미지를 출력하기
for(var i=0; i<ROW; i++){
for(var k=0;k<COL; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("<br>6번 <hr>");
</script>
</head>
<body>
</body>
</html>
10. 영상을 2배 축소하기
11. 영상을 2배 확대하기
//10. 영상을 2배 축소하기
COL = COL/2;
ROW = ROW/2;
//이미지를 출력하기
for(var i=0; i<ROW; i++){
for(var k=0;k<COL; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("<br>10번 <hr>");
//11. 영상을 2배 축소하기
COLN = COL*2;
ROWN= ROW*2;
console.log(COLN+"+"+ROWN);
image = new Array(ROWN);
for(var i=0; i<ROWN; i++){
image[i] = new Array(COLN);
}
//이미지 --> 배열로 읽어들이기 (Loding)
for(var i=0; i<ROWN;i++){
for(var k=0; k<COLN; k++){
image[i][k] = Math.floor(Math.random() * 256);
// image[i][k] = Math.floor(i+k);
console.log(image[i][k]);
}
}
//이미지를 출력하기
for(var i=0; i<ROWN; i++){
for(var k=0;k<COLN; k++){
document.write(String(image[i][k]).padStart(3,'0')+" ");
}
document.write("<br>");
}
document.write("<br>11번 <hr>");7, 영상을 90도 회전시키기
8. 영상을 감마 변환하기
9. 영상을 파라볼라 변환하기
'서버사이드 스크립트' 카테고리의 다른 글
| javascript 디지털 영상처리 프로그래밍 미니 프로젝트(Ver 1.0) (0) | 2021.11.09 |
|---|---|
| 영상 처리 미션 (4일차) (0) | 2021.10.28 |
| 프론트엔드 프로그래밍 4일차 (0) | 2021.10.28 |
| virtual machine 2022 설치 해보기 (0) | 2021.10.25 |
| 20211025 서버 사이드 수업 (0) | 2021.10.25 |
Comment