[WEB] JavaScript vs PHP

HyeJi9908·2022년 9월 11일

[WEB] 기초

목록 보기

3/8

html + css는 웹의 정적인 부분/ JavaScript와 PHP는 동적인 부분 제어
PHP
웹페이지의 html코드들을 하나의 파일로 묶어 제어(css파일을 하나의 파일로 묶어 전체태그를 관리하는 것 처럼)

🎈 웹페이지에 코드 삽입하기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>php</h1>
    <?php
      echo 10+10;
     ?>
     <h1>JavaScript</h1>
     <script>
      document.write(10+10)
     </script>
  </body>
</html>

에서

    <?php
      echo 10+10;
     ?>

부분은 php인터프리터(php해석엔진)에서 20으로 처리한 결과.

     <script>
      document.write(10+10)
     </script>

부분은 웹 브라우저에서 자바스크립트를 20으로 해석해서 처리한 결과.

🎈 데이터타입과 연산자

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>JavaScript</h1>
    <script>
      document.write("10"+"10");
    </script>
    <h2>php</h2>
    <?php
      echo "10"."10";
     ?>
  </body>
</html>

javascript와 php모두 숫자를 ""로 감싸면 문자로 인식.
javascript에서는 "10"+"10"하면 1010으로 표현되지만
php에서는 +는 숫자 연산자이기에 20으로 표현됨.(대신 .을 써야함)

🎈 변수

변수 나타내기
javascript -> name = "egoing";
php -> $name = "egoing";

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1> JavaScript </h1>
    <script charset="utf-8">
      name = "egoing";
      document.write("hello "+name);
    </script>
    <h1>php</h1>
    <?php
      $name="egoing";
      echo "안녕? ".$name;
     ?>
  </body>
</html>

🎈 비교 연산자

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>JavaScript</h1>
    <script charset="utf-8">
      document.write(2==1);
    </script>
    <h1>php</h1>
    <?php
      var_dump(2==1);
     ?>
  </body>
</html>

php의 echo 로는 bool표현이 안됨. -> var_dump() 사용!

🎈 조건문

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1> JavaScript</h1>
    <script>
      result = (1==1);
      if(result){
        document.write("참");
      }else{
        document.write("거짓");
      }
    </script>
    <h1>php</h1>
    <?php
      $result = (2==1);
      if($result){
        echo "참";
      }else{
        echo "거짓";
      }
     ?>
  </body>
</html>

🎈 자바스크립트로 로그인 기능 구현하기(feat.프롬프트)

프롬프트

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script>
      password = prompt("비밀번호");  // 프롬프트 띄우기
      if(password == 1111){
        document.write("정상적인 접근");
      }else{
        document.write("비정상적인 접근");
      }
    </script>
  </body>
</html>

🎈 php로 로그인 기능 구현하기

login7_php.php에서 비밀번호 입력한 후 login7_1php.php로 결과 창 띄움

login7_php.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form action="login7_1php.php"> -> 이 form을 login7_1.php.php와 연결하겠다
      <p>비밀번호를 입력해주세요.</p>
      <input type="text" name="password">  -> 입력한 값의 속성과 이름을 정한다
      <input type="submit">  -> 사용자가 입력한 정보를 서버에 제출
    </form>
  </body>
</html>

login7_1php.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <?php
      $password =  $_GET["password"];
      // 사용자가 login7_php.php에서 입력한 password의 값 받아오기
      // 사용자가 입력한 주소창 정보중에 'password=' 뒤의 값 받아오기
      
      if($password =="1111"){
        echo "환영합니다";
      }else{
        echo "접근 불가";
      }
     ?>
  </body>
</html>

결과에 따라

login7php.php에서 입력한 비밀번호의 값이 login7_1php.php url의 _login7_1php.php?password=1111에서 password= 뒤의 값에 표기됨

🎈 반복문

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>JavaScript</h1>
    <ul> 					-> li을 표시하기 위해 ul로 감싸주기
    
    <script>
      i=0;
      while(i<10){
        document.write("<li>hello world</li>");
        i=i+1;
      }

    </script>
    </ul>
    
    <h2>php</h2>
    <ul>
    <?php
      $i=0;
      while($i<10){
        echo "<li>hello world</li>";
        $i = $i+1;
      }
     ?>
   </ul>
  </body>
</html>

🎈 배열

javascript : list = new Array("1","2","3");
php : list = array("1","2","3");

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>
      JavaScript
    </h1>
    <script>
      list = new Array("one","two","three");
      document.write(list[0]);
      document.write(list.length);
    </script>
    <h2>php</h2>
    <?php
      $list = array("one","two","three");
      echo $list[2];
      echo count($list);
     ?>
  </body>
</html>

🎈 배열과 반복문

배열의 길이
JavaScript -> list.length
php -> count($list)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>JavaScript</h1>
    <ul>
    <script>
      list = new Array("one","two","three");
      i=0;
      while(i<list.length){
        document.write("<li>"+list[i]+"</li>");
        i = i+1;
      }
    </script>
    </ul>

    <ul>
    <h1>php</h1>
    <?php
      $list = array("one","two","three");
      $i=0;
      while($i<count($list)){
        echo "<li>".$list[$i]."</li>";
        $i=$i+1;
      }
     ?>
    </ul>
  </body>
</html>

🎈 함수

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>JavaScript</h1>
    <script>
      function fun(){
        document.write("Hello Function");
      }
      fun();
    </script>

    <h1>php</h1>
    <?php
      function fun2(){
        echo "Hello Function";
      }
      fun2();
     ?>
  </body>
</html>