생활코딩의 강좌를 들으며 하는 공부 기록

생활코딩 감사합니다.

https://opentutorials.org/course/1

 

WebApp 학습계획

  1. HTML
  2. CSS
  3. JavaScript와 PHP 이론
  4. DataBase

html 코드가 해석될 때 script tag가 나오면 javascript 코드를 해석한다.

php 코드를 만나면 웹서버와 데이터베이스가 연결되어 html 파일을 완성한다.

 

JavaScript와 PHP

  • 둘 다 동적인 언어이다.
  • JavaScript는 스크립트가 들어있는 웹 문서를 읽는 브라우저에서 실행된다.
  • PHP는 서버사이드 언어이므로 서버에서 실행되고 브라우저에는 그 결과만을 보여준다. 
  • 따라서 브라우저에서는 PHP의 소스 보기를 해도 PHP 소스는 볼 수 없고, 마치 HTML문서처럼 보인다.

PHP는 <?PHP?> 태그로 감싸지고 JS는 <script></script> 태그로 감싸진다.

PHP echo는 PHP 인터프리터에 의해 해석된다. 

<!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>

 

문자와 숫자를 표기하는 방법

  • 숫자를 표기할 때에는 따옴표가 없어야 한다.
  • 문자를 표기할 때에는 따옴표가 있어야 한다.
  • "10"+"10"
    • PHP : 20 -> "10"."10"을 쓰면 1010이 나온다.
    • JS : 1010

변수를 작성하는 방법

  • PHP : $name = "suintodev";
  • JS : name = "suintodev";
  • 변할 수 있는 부분과 없는 부분을 구분해 변수를 사용한다.

JS로 로그인 기능 구현

prompt를 이용해 비밀번호를 사용한다.

<!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로 로그인 기능 구현

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <?php
    $password = $_GET["password"];
    if($password == "1111"){
        echo "주인님 환영합니다";
    } else {
        echo "뉘신지?";
    }
   ?>
</body>
</html>

 

배열과 반복문 예제

  • PHP : $list = array("1","2","3");
  • JS : list = new Array("1","2","3");
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <h1>JavaScript</h1>
  <ul>
  <script>
    list = new Array("최진혁", "최유빈", "한이람", "한이은", "이고잉");
    i = 0;
    while(i < list.length){
      document.write("<li>"+list[i]+"</li>");
      i = i + 1;
    }
  </script>
  </ul>
 
  <h1>php</h1>
  <ul>
  <?php
    $list = array("최진혁", "최유빈", "한이람", "한이은");
    $i = 0;
    while($i < count($list)){
      echo "<li>".$list[$i]."</li>";
      $i = $i + 1;
    }
  ?>
  </ul>
</body>
</html>

 

함수 예제

  •  PHP : function (){contents)
  • JS : function a(){contents}
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <h1>JavaScript</h1>
  <script>
    function a(input){
      return input+1;
    }
    document.write(a(6));
  </script>
 
  <h1>php</h1>
  <?php
    function a($input){
      return $input+1;
    }
    echo a(6);
  ?>
</body>
</html>

 

'Web Application > Frontend' 카테고리의 다른 글

[ WebApp] 웹앱 만들기 기본편 - CSS  (0) 2020.07.22
[ WebApp] 웹앱 만들기 기본편 - HTML  (0) 2020.07.22

생활코딩의 강좌를 들으며 하는 공부 기록

https://opentutorials.org/course/1

 

WebApp 학습계획

  1. HTML
  2. CSS
  3. JavaScript와 PHP 이론
  4. DataBase

기본 내용

  • Bitnami WAMP stack을 사용해 MYSQL Database, Apach Web Server를 제어하고 에러 로그를 확인할 수 있다.
  • 웹브라우저가 웹서버에게 페이지를 요청하면 HTML 파일을 보내주고, 이 내용이 웹브라우저에 보이는 방식으로 구동된다.
  • HTML은 HyperText Markup Language의 약자이고 hypertext는 문서와 문서가 linking 된 모양이라 할 수 있다. 웹은 이 링크로 구성된다. 

html의 골격

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	안녕하세요. <strong>suintodev</strong>입니다.
</body>
</html>

 

링크를 거는 법

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	안녕하세요. <a href="https://suintodev.tistory.com/" target="_blank">suintodev</a>입니다.
</body>
</html>

 

ordered list와 unordered list로 요소를 작성하는 법

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <title>내가 먹고 싶은 것</title>
</head>
<body>
	<ul>
	<li>연어덮밥</li>
	<li>연어롤</li>
	<li>연어초밥</li>
	</ul>
	<ol>
	<li>이베리코</li>
	<li>삼계탕</li>
	<li>먹고싶다</li>
	</ol>
	
</body>
</html>

 

의미론적인 웹 구조로 ordered list작성

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <title>내가 먹고 싶은 것</title>
</head>
<body>
	<header>
		<h1>중학교 3-1</h1>
	</header>
	<nav>
		<ol>
			<li>인수분해</li>
			<li>이차방정식</li>
			<li>이차함수</li>
		</ol>
	</nav>
	<article>
		<h2>인수분해란?</h2>
		<ol>
			<li>식의 공통부분, 즉 인수를 뽑아내는 것</li>
			<li>삼계탕</li>
			<li>먹고싶다</li>
		</ol>
	</article>
	
</body>
</html>

 

하나의 완결된 웹페이지를 만드는 방법

  1. 대문 페이지인 index.html를 <nav></nav>를 이용해 작성
  2. 아직은 만들지 않았지만 연결되는 페이지를 http://localhost/new_page.html 링크를 포함해 작성해준다.
  3. 각 html 페이지에 <article></article>을 이용해 내용을 작성한다.
  4. <h1></h1>에 <a href=""></a>를 이용해 index.html로 연결해준다.

 

 

 

+ Recent posts