상세 컨텐츠

본문 제목

2023.01.17

Javascript

by 연을 2023. 1. 17. 16:59

본문

728x90

<Javascript>

  • 웹브라우저에서만 실행되는 프로그래밍 언어, Java를 많이 참조
  • HTML안에서 <script>태그 안에 코딩
  • <script>태그의 위치는 HTML안에 아무데나/어디든지(</body>와</html>사이를 추천)
  • 변수의 타입선언이 없다. 동적타입변환을 지원한다.
  • 변수선언 방법
    1. let : 스코프(scope)가 있다.
    2. var : 스코프(scope)가 없다.
    3. 그냥 사용하면 자동선언

ex)   i=10;    i=3.14; => 동적 타입변환(Dynamic type conversion)

        i=10; 과 var i=10;은 같다.

 

<코드>

<!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>
</head>
<body>
    
</body>
<script language="javascript">
i="Hello World"
document.write(i)

</script>
</html>

<결과물>

document.write() : 줄바꿈이 없다.

<코드>

<!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>
</head>
<body>
    
</body>
<script language="javascript">
let i="Hello World"
i=10;
document.write(i)  // ==System.out.print() \n
document.write("Good Morning Vietname")
</script>
</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>
</head>
<body>
    
</body>
<script language="javascript">
let i="Hello World"
i=10;
document.write(i)  // ==System.out.print() \n
document.write('<br>') //==System.out.print("\n") == System.out.println("")
document.write('Good Morning Vietname<br>')
document.write('<input type=text><button>누르기</button>')
</script>
</html>

 

<결과물>

<배열(Array) : bracket만 사용>

ar=[]; // 빈배열         int[] ar = {};

ar=[1,2,3,4];           //int[] ar={1,2,3,4};

  1. []만 사용
  2. 길이가 가변(추가/제거 가능) ArrayList와 더 유사
  3. 인덱스 사용은 자바와 같다.(0부터 시작, 암시적으로 정의)
  4. 같은 타입의 데이터가 아니여도 저장한다.

ex)   ar= [1,2,"Hello",3.14,'world',-15];

  Javascript Java
배열 Array ArrayList Array
길이 x.length x.size() x.length
  i=x[n]
x[n]=i
x.push(i)
x.spice(i,j)		 i=x.get(n);
x.set(n,i);
x.add(i);
x.remove(n);		 i=x[n];
x[n]=i;
x.add(i);

<코드>

<!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>
</head>
<body>
    
</body>
<script language="javascript">

let ar=[1,2,'Hello',3.14,'world',-15];
document.write("<br>");
document.write(ar[2]);
document.write("<br>");
document.write(ar[3]);
document.write("<br>");
ar.push(100); //배열 맨 뒤에 집어 넣는다.
document.write(ar);
document.write("<br>");
x=ar.pop() //배열 맨 뒤의 요소를 제거한다. 100이 x에 저장되고, ar에서는 지워진다.
document.write(x);
document.write('<br>');
document.write(ar);

ar1 = [[1,2,3],['a','b','c','d'],[100,200]]; //Java와 다르게 갯수는 상관없다.
document.write('<br>');
document.write(ar1[1][2]);
document.write('<br>');
document.write(ar1[2][1]);

</script>
</html>

<결과물>

위의 결과물

 

<사용자의 입력을 받아들이는 방법>

alert() - 확인 : 경고
ex) alert('확인해주세요.');
boolean = confirm() - (Yes/No)  (True/False)
ex) confirm('참/거짓 중에 고르시오.');
String = prompt() - 문자열입력
ex) prompt('이름을 입력하시오.');

log = 기록용 / 작업흔적

 

<javascript 소스 분리>

  1. .js파일을 만들고(명명) 자바스크립트를 잘라서 붙이고&저장
  2. .js파일에서 <script>와 </script> 태그를 제거
  3. html페이지에 <script src='js파일명'></script> 추가

<2개 이상 가능한 태그>

  • <style> : 순서가 있긴 하지만 그리 중요하지 않다.
  • <script> : 순서가 중요

<script scr='a.js'></script> => 1번째

<script scr='b.js'></script> => 2번째
<link href='a1.css'>
<script scr='c.js'></script> => 3번째
<link href='b2.css'>

<코드>

<!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>
</head>
<body>
</body>
<script src="a2.js"></script>
<script langauge="javascript">
alert('xxxxxxx');
</script>
<script src="a1.js"></script>
</html>

<결과>

연산자(Operator)

  • 산술연산자 : +, -, *, /, %, ++, --, +=, -=, *=, /=, %=     +: 양쪽이 숫자면 '더하기연산자' 한쪽이라도 숫자가 아니면 
  • 비교연산자 : ==, !=, >, >=, <, <=, ===(type 체크까지)
  • 논리연산자 : &&, ||, !
<!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>
</head>
<body>
</body>
<script langauge="javascript">
i=10;
j=5;
n=i+j;
document.write(i+j+'<br>');
document.write(i+'x'+j+'='+(i*j)+'<br>');
document.write(`${i}+${j}=${i*j}`);
bow="Hello World";
document.write(`${bow} Disney<br>`);
</script>
</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>
</head>
<body>
    
</body>
<script>
//이름을 입력받는다.
//이름이 구체적으로 입력됐으면, "반갑습니다. xxxx님"
//이름이 빈 문자열이면, "반갑습니다. 고객님"
name=prompt("이름을 입력하세요");
if(name!=''){
    document.write('반갑습니다. '+name+'님');
} else {
    document.write('반갑습니다. 고객님');
}
</script>
</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>
</head>
<body>
</body>
<script langauge="javascript">
i=10;
j=5;
n=i+j;
document.write(i+j+'<br>');
//document.write(i+'x'+j+'='+(i*j)+'<br>');
document.write(`${i}+${j}=${i*j}`+'<br>');
bow="Hello World";
document.write(`${bow} Disney<br>`);
name=prompt('이름을 입력하시오');
if(name!=''){
    //document.write('이름 : '+name);
    document.write(`이름=${name}<br>`);
} else {
    document.write('이름이 입력되지 않았습니다.<br>');
}

n=parseInt('123');
document.write(`n=${n}<br>`);
str=n.toString();
document.write(`str=${str}<br>`)

n=eval('24+12');
document.write('24+12='+n+'<br>');

if(true===1){
    document.write('equals<br>');
} else {
    document.write('not equals')
}

str='1';
str=str+'2';
str=str+'3';
document.write('<br>'+str);

str='1';
str='2'+str;
str='3'+str;
document.write('<br>'+str);
</script>
</html>

<결과물>

let str = 'Good Morning Vietnam';

<반복문>

java : for(x: 조건)

javascript : for(x in 객체) : 

<코드>

<!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>
</head>
<body>
    
</body>
<script>
    sum=0;
    for(let a=1;a<=100;a++){
        sum=sum+a;
    }
    document.write(sum);
</script>
</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>
</head>
<body>
    
</body>
<script>
    for(let i=0;i<10;i++){
         document.write(i+'<br>');
     }
    document.write(i+'<br>');

    // i=0;
    // while(i<10){
    //     document.write(i+'<br>');
    //     i++;
    // }

</script>
</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>
</head>
<body>
    
</body>
<script>
    for(let i=2;i<=9;i++){
        for(let j=1;j<=9;j++){
            document.write(i+"X"+j+"="+(i*j)+'<br>');
        }
        document.write("<br>");
    }
</script>
</html>

<결과>

이렇게 9단까지 나온다.

<소수구하기>

<!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>
</head>
<body>
    
</body>
<script>
    for(let i=2;i<=1000;i++){
        c=0;
        for(let j=1;j<=i;j++){
            if(i%j==0){
                c=c+1;
            }
        }
        if(c==2){
            document.write(i+"  ");
        }
    }

</script>
</html>

<결과물>

 

728x90

'Javascript' 카테고리의 다른 글

2023.01.26  (0) 2023.01.26
2023.01.25  (0) 2023.01.25
2023.01.20  (0) 2023.01.20
2023.01.19  (0) 2023.01.19
2023.01.18  (0) 2023.01.18

관련글 더보기

티스토리툴바