1. JavaScript [Basic JavaScript]

JavaScript

---

자바 스크립트는 client-side script language로 코드가 browser에서 run된다.
client-side script 언어의 장점은 다음과 같다.

• usability: 서버로 다시 보낼 필요없이 빠르게 page를 modify 가능하다.
• efficiency: 서버를 기다리지 않아도 되면서 빠르게 페이지를 변경가능하다
• event-driven: 브라우저 사용자 action에 따라 반응한다.

JavaScript는 lightweight 언어이면서 web page를 interactive하게 만들고 web standard로 정해진 언어이다. web standard이지만 모든 browser에서 똑같이 작동하지는 않는다.

Java VS JavaScript 

JavaScript는 interpret되고 덜 제한된 syntax 와 rule 을 가지며 function가 key construct이다.

PHP VS JavaScript

같은점

• interpret 된다.
• 덜 제한된 syntax 와 rule
• case-sensitive
• text processing하는데 regular expression 사용가능

다른점

• JS가 더 orient-object하다.
• JS는 interactive하다.
• JS는 client-side이고 PHP는 server-side이다.

Load JS

---

Linking to a JS file

위의 코드를 HTML head태그안에 넣어주거나 body태크 맨 밑에 넣어주어야 한다.

Embedded HTML
위와 같이  js파일을 linking하지 않고 html body태크안의 script태크 안에 javascript언어 코딩 가능하다

alert

Variable and Type

---

var 로 변수를 정의하는게 가장 일반적이지만 다른 방법으로는 let, const가 있다,
let - if,while구문 과같은 block 안에서만 유효하다. (var 와 같이 변수 선언과 동시에 초기화)

const -읽기 용도로 사용하기위해 선언

그리고 타입 정의가 구체화 되지 않는다.

real number와 integer는 구분되지 않고(but not double vs int) 2*"3" 와 같이 int*string일 경우 자동으로 결과값이 int형(6)으로 바뀐다.

String Type

다음과 같이 쓰며 string 변수는 '' or "" 으로 감싸서 값을 설정하고  int+string일경우 string으로 바뀐다.

String Method는 다음과 같다.

다음은 string 타입에 대한 예제이다.

Boolean Type

• fasle: 0, 0.0 ,NaN , undefined , null , ""
• true: anything else

undefined은 정의되지도 않고 존재하지도 않는다.

null은 존재하지만 값이 없는것이다. 


Similar java

---

for,while,if(else) 모두 자바와 문법이 같고 비교연산자 또한 같다.
하지만 javascript에서 ===라는 비교연산자가 있는데 이것은 type과 값을 모두 비교한다.
그렇다면 ==연산자는 타입은 달라도 값만 같다면 true반환한다.

Array

---

다음과 같이 배열을 정의할수 있다.
Array Method

다음은 메소드 실제 사용 예제이다.

Event Driven Programming

---

• 이벤트 발생에 따라 프로그램의 실행 흐름이 달라진다.
• 자바 스크립트 프로그램은 유저의 반응을 계속 기다린다.

이벤트를 발생시킬려면 이벤트를 발생시켜주는 Event-Handler가 있을 것이다.

Event Handler

위와같이 click me 버튼을 누르게 되면 function button함수를 실행시켜 안의 alert("hello")코드를 run한다.

4. PHP [Regular Expression]

Validation

---

Valdation이란 form의 value가 믿을만 한지 확인하는 것이다. 

예를 들어 프로그래머는 사용자가 핸드폰번호 입력 form 에다가 숫자를 입력하길 원하지 문자나 특수기호를 입력을 원하지 않는다. form에 입력할수 있는 string을 제어시키기 위해 Validation 작업을 하게 된다. 

form에 입력값을 제어 한다는 것은 또한 보안과 직결되는 문제인데 만약 악의적인 마음을 가진 사용자가 악성코드를 form을 통해 서버로 전송할 수도 있기 때문이다. form과 관련되서 더 많은 보안과 관련된 문제가 있지만 보안을 배우는게 이 chapter에 주요 목적이 아니므로 넘어가본다.

Validation은 server,client쪽 모두에서 가능하다.

• client-side : form이 보내지기 전에 확인한다.
• lead to a better user experience but not secure!

-> client-side validation

• server-side: form이 보내진 후에 확인한다. (in PHP)
• slow but security is ensured

-> server-side validation

그래서 두가지 모두 장단점이 있으므로 잘 섞어 쓰는 것이 중요하다. 이번 chater에서는 PHP안, 즉 server-side에서 form validation하는 방법을 배워본다.

Regular Expression

---

Regular Expression(regex) 이란 text의 패턴을 서술하는 것을 말한다.
Validation을 하는데 Regular Expression을 쓰는 이유는 Validation을 강력하게 할수 있다는 장점을 가진다. 하지만 사람이 읽기 어렵다는 단점이 있다.

Basic Regular Expression 
/abc/

• regex는 시작과 끝이 / 으로 되어있다.
• 위의 regex의 경우 abc로 시작하는 모든 문자열과 매칭시킨다.
• YES: : "abc" , "abccc" ,"1234abc"
• NO: "abd" , "abb" , "xlc" , "12355" , "ab c"

WildCards : .

WildCards란 . 을 말하는데 .이란 어떤 character, string이 와도 된다는 뜻이다. (except \n)

/.d.t/ 

• YES: "idot" , "ddtt" , "dhhddppkkkkt"

/../i 에서 i는 대소문자를 구문하지 않겠다는 의미이다.
/mart/i

• YES: "smart" , "MARty", "nMaRt"

Special characters:  |, () , ^ , \

| means OR

• /abc|de|f/ matches only "abc" , "de" ,"f"

() means Grouping

• /(kim|park) gija/ matches only "kim gija" , "park gija"

^ matches the beginning of a line $ the end

• /^must this$/ matches only "must this"

\ starts an escape sequence
\ , / , ^ , + , () 이런 문자 들이 escape되므로 정규식에 쓰지 못하므로 정규식안에 문자로 쓰기 위해서 앞에다가 \를 붙혀준다

• / 2\^3/ matches "2^3"

Quantifiers : * , + , ?

* means 0 or more occurences

• /abc*/ matches "ab" , "abc" , "abcc" , "abcccc"
• /a.*a/ matches "aa", "abba", "a!!kka" 

+ means 1 or more occurences

• /a(bc)+/ matches "abc" , "abcbc" , "abcbcbc"

? means 0 or 1 occurences

• /a(bc)?/ matches "a" or "abc"

More Quantifiers: {min, max}

{min, max} means between min and max occurences

• /a (bc) {1,3} / matches "abc" , "abcbc" , "abcbcbc
• /ab{2, }/ matches "abb", "abbb", "abbbbbbbbbb"

Character set: []

[] group characters into a character set

• /[abc] art/ matches "aart" , "bart" , "cart"
• /(a|b|c|)art/ 와 같다.

Character Range: [start-end]

character set [] 안에 '-'  문자를 통해 range를 정할수 있다.

• /[a-z]/는 모든 소문자 알파벳 단어,문장 등을 쓸수있다.
• /[a-zA-Z0-9]/ 문자나 숫자 모두 가능

character set [] 안에 ^는 안의 단어들을 거부하겠다는 의미

• /[^abcd]/ 는 a,b,c,d가 들어가있지 않는 문자에만 matching됨

Escape sequences

• \d 는 모든 숫자
• \w 는 모든 숫자,문자 (same as /[a-zA-Z0-9]/)
• \s 는 모든 whitespace character( like \t ,  , \n)

Regular expression in php 

preg_match 는 첫번째 인자인 정규식에 대해 2번째 인자 string이 matching되면  true 아니면 false를 반환한다. 

preg_replace는 preg_match와 같지만 정규식에 matching되는 string이 2번째 인자의 string으로 바뀐다는 것이 다르다.

preg_split(regex, string)은 정규 식에 맞는 string을 짤라 준다.

3. PHP [Processing Form Data]

How to get Form input??

---

HTML에서 Form형태의 여러종류 input값들을 브라우저를 통해 받아 서버에 submit 했었다. 어떤 방식, 어느 곳으로 보내는 지에 대한 내용은 2. HTML [Form] 에서 배웠다.
그렇다면 이제 어떻게 그 해당 URL에 보낸 input값들을 어떻게 받고 처리할수 있는지에 대해 배워보자.

Processing Form

---

다음과 같은 superglobal 배열을 사용해서 input값을 받아 들일수 있다.

• $_GET 방식 은 URL을 통해서 오는 query string(input element의 name/value값)을 받는 방식
• www.example.com/test.php?name=value&&name2=value2
• $_POST방식은 URL이 아닌 HTTP request body에 query string을 넣어 보낸 값들을 받는다.
• $_REQUEST 방식은 _GET or $_POST 방식에 상관없이 query string을 다 받을 수 있다.

$_REQUEST

 

다음은 value값뿐만아니라 name값도 php로 가져올수 있는 예제이다.

$_SERVER

$_SERVER를 통해 해당 요청이 GET 요청인지 POST요청인지 확인가능하고 그에따라 코딩할 수 있다.

associative array
$_FILES에 사용되는 array형태를 먼져 알아보자.

위와 같이 $blackbook이라는 배열이 있지만 원래 array라면 숫자가 들어가야할 [ ] 안에 문자가 들어간다. 이 말은 [] 안에 들어간 string은 key가 되고 그에 대한 값은 value가 되는 것이다.

• "marty" key의 value는 "206-685-2181" 이다.

$_FILES
$_FILES array 의 하나하나의 element들은 associative array이다. $_FILES 의 key값은 다음과같다.

• name - the local filename that the user uploaded
• type - the MIME type of data that was uploaded, such as image/jpeg
• size - file's size in bytes
• tmp_name -a filename where PHP has temporarily saved the uploaded file

예를 들어 다음과 같은 form이 있다고하자.

만약에 내가 beauty.jpg를 선택하고 제출 했다면

• $_FILES["avatar"]["name"] 은 "beauty.jpg" 
• $_FILES["avatar"]["type"] 은 "image/jpg"
• $_FILES["avatar"]["tmp_name"] 은 예를 들어 "/var/tmp/JjvdjrrksL"

2. HTML [Form]

Form

---

Form이란 사용자가 입력가능한 부분을 말하며 쉽게 예를 들면 흔히 사용하는 id와 password를 입력하는 구간도 Form에 해당한다.
그래서 우리는 Form을 통해 서버에게 데이터를 보내고 browser에서 서버에 저장된 특정 데이터(동영상,사진...)을 보고싶을때 특정 데이터를 달라고 할 수 있게 하는 parameter를 전송할 수 있게 해주는 것이 form이다.

Form Basic

---

HTML Form : <form>

다음과 같은 형태로 써서 action의 값에는 form의 name/value을 보낼 URL을 나타낸다.

위의 코드에서 name은 q가 되고 input에 들어갈 value는 name의 파라미터가 되어 전송된다.
예를 들어 입력창에 value라는 text를 적고 제출을 누르면 다음과 같은 url(GET 방식)이 나타난다.

GET or POST??

• GET 요청은 URL을 통해서 query string(input element의 name/value값)을 destination URL로 보내는 개념이다. 이 보통 방식은 서버의 페이지를 가져오는 개념이라서 서버의 값이나 상태를 바꾸는데 쓰지않습니다. 또한 GET요청은 URL을 통해서 하기때문에 글자의 제한이 있고 Encoding없이는 특수문자를 포함시킬수 없다.
  

• POST 요청은 URL이 아닌 HTTP request body에 query string을 넣어 보낸다. 수행한다는 의미로 서버의 값이나 상태를 바꾸는데 사용된다.
  

Form Control: input
이미 위에서 input의 type 두가지(text,submit) 에 대해 알아봤는데 더 많은 input의 type이 있고 input의 name은 아까 말했듯이 query parameter(value)의 이름이 된다. 그리고 value는 name의 값이 된다.

보이듯이 text type은 브라우저 유저가 text를 쓸수 있는 구간이고 submit type은 전송 버튼이라고 생각하면된다.

또한 type중에서는 password 타입도 있고 text(password) type의 size나 max-length를 지정가능하기도 하다.

text type의 input size을 10개로 줄이고 쓸수 있는 최대 길이를 8개의 string으로 제한시켰다.

Text boxes: TextArea

row 와 col Attribute는 textarea의 width와 height를 결정한다.

CheckBoxes: <input>

• checkbox type은 여러개를 동시에 체크해서 submit할 수있다. 
• check된 box들이 보내지면 url은 name의 value에 on을 붙여 보내게된다.
• if tomato is checked , www.example.com/test.php?tomato=on
• checkbox type은 checked 라는 attribute를 사용하여 해당 element를 미리 check시킬수 있다.

Radio Button: <input>

radio type은 name 값("cc")으로 grouping되어서 grouping된 input element중 하나만 골라서 submit가능하다. 

Drop-down list: <select>, <option> 

위 사진에서 보이듯이 select로 name값을 정하고 option으로 value값을 선택할수 있다. 그리고 selected attribute로 해당 option element를 initial chosen가능하다. 또는 value attribute를 사용해서 submit될 value값을 정할 수 도 있다. selected attribute를 사용하지 않으면 맨 위의 option(Jerry)가 initial chosen된다.

Grouping input: <fieldset> , <legend>

보다시피 fieldset element는 input element들을 border를 통해 묶어주고 legend는 묶여진 border의 이름(제목)을 정하는 목적으로 쓴다.

Hidden input parameters
가끔 프로그래머들은 사용자에게 보여주고싶지않은 input값이 있을 수가 있을 때 그 때 사용하는 input type이다.

클라이언트가 Name 과 SID의 value값을 적어서 submit하게 되면 Name,SID 값뿐만 아니라 hidden type의 input element의 name/value도 같이 보낸다.

Uploading Files

내 컴퓨터안의 file을 올리고 싶으면 file type을 쓰고 꼭 form 에 enctype="multipart/form-data"를 써주어야 한다!

Styling Form

위와 같이 Form 형태의 element도 CSS를 적용가능한데 위와 같은 방식으로 적용시킨다. 위에서 모든 input element 중에 type이 text인 element들에게 background-color는 yellow, font-weight는 bold로 적용하는 모습을 볼 수 있다.

2. PHP [Embedded && Advanced PHP]

PHP 파일(언어)에서 HTML element를 print를 통해서 출력가능하다. 허나 그렇게 할 경우 다음과 같은 사진을 보면 가독성도 좋지 않을 뿐더러 error가 생길 가능성만 높다.

가장 좋은 PHP 프로그래밍 스타일은 PHP code안에 print(echo)가 적게 하는것이다.

그렇다면 print 없이 어떻게 page안에 dynamic한 contents를 넣을수 있을까??

Embedded PHP

---

이제껏 .php 파일안에 php문법만 쓸수 있다고 생각했을것이다. 하지만 .php파일안에서 html syntax도 같이 쓸 수 있다. 그래서 보통 php프로그래밍을 할때 일반적인 text를 나타낼때는 html 문법을 사용하고 동적인 행동이나 페이지를 구성하고 싶을때는 php문법을 쓴다. 즉, html과 php을 혼용해서 쓰는 것이 일반적이고 그렇게 해야한다.
html과 php를 혼용할때 쓰는 php syntax는 다음과 같다.

PHP expressions block
Embedded PHP 에서 자주 사용하는 문법으로 다음과 같은 형태로 사용한다.

위에서 보듯이  <?= expression ?> 은  <?php print expression ?> 과 같은 의미로 사용되는 것을 볼 수 있다.

밑의 사진은 Embedded 한 php 파일을 만든 예시이다.
다음과 같은 php파일을 요청하게 되면 php interpreter가 php language로 사용된 부분만 interpret해주어서 그에 대한 output값을 html 형태로 browser에게 출력하게 되는 것이다.

foreach loop
array에 쓰이는 반복문으로 프로그래머가 쓰기 편한 문법이다.

Advanced PHP

---

Advanced PHP에서는 function의 이용, file I/O 에 대해 설명한다.

function
php 에서는 다음과 같은 형식으로 function을 정의한다.

PHP에서 function은 마찬가지로 type을 선언하지 않으며 parameter,return값이 없을 수도 있으며 return값이 없는 경우 return값이 자동적으로 NULL로 설정된다.
그리고 다음과 같이 특이하게 function선언의 파라미터에 Default값을 설정해놓을 수 있다.

function을 사용하게 되면 당연히 local variable과 global variable가 있을 텐데, PHP에서는 특이하게 global variable을 function안에서 쓸려면 쓰고 싶은 변수 앞에 global 이라는 syntax를 붙여주어야 한다.

PHP File I/O 
PHP script language에서 제공하는 File의 입출력을 다루는 메소드들이 있다.

file 함수와 file_get_contents 함수 모두 file의 text를 읽어오지만 file은 배열로 읽어오지만 file_get_contents는 하나의 string형태로 읽어온다.

file_puts_contents함수는 원하는 file에 내용을 저장하게 하는데 다음과 같이 3번째 인자에 FILE_APPEND라는 값을 주면 저장된 text.file에 있는 내용 뒤에 원하는 text를 추가시킬 수 있고 만약 3번째 인자 없이 쓰게 되면 전에 있는 contents는 모두 지우고 추가할 text를 넣게 된다.

unpacking an array: list
file 함수를 쓰게 되면 .txt파일의 내용을 array로 가져온다고 했는데 그 파일의 구조를 정확히 이해하고 있을때 빠르게 .txt파일의 값들을 사용하고 싶을때  list함수를 쓰기도 한다.

list함수와 전에 배운 explode(string을 나누는 함수)을 이용해서 txt파일에 내용을 정리(분류)할수 있다.

Reading Directories
file System안에는 여러 directory가 존재하고 그 directory안에는 여러 파일이 존재하는 데 지금까지는 모든 file(.php , .html , .css)이 한 directory에 있다고 가정하면서 설명해왔지만 실제로 file들은 여러 directory에 분산되어있다.

다음은 directory 또는 file을 검색할때 사용하는 함수들이다.

보다시피 scandir은 파일이름만 모아서 배열로 return해주지만 glob함수는 path까지 합쳐서 배열로 return해준다.

• *은 wildcard로써 poem으로시작하는 파일이면서 확장자는 .dat인 파일을 선택하게한다.
• glob에서 반환된 string에 path+file이 되는데 basename함수를 통해 path를 없애준다.