생활코딩의 강좌를 들으며 하는 공부 기록
생활코딩 감사합니다.
https://opentutorials.org/course/1
WebApp 학습계획
- HTML
- CSS
- JavaScript와 PHP 이론
- 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 |