Slow but steady wins the race

Hidden Field란?

화면의 폼에는 보이지 않지만(사용자는 볼 수 없음), 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소

(예제) 

히든 필드를 사용해 사용자가 사이트에서 로그인하는 정보를 서버로 넘겨줌

<input type = "hidden" value = "사이트를 통한 직접 로그인">
<label> 아이디: <input type = "text" id= "user_id"></label>
<label> 비밀번호: <input type = "password" id= "user_pw"></label>
<input type = "submit" value = "로그인">

실행하면 아래와 같이, hidden filed의 내용은 보이지 않는다.

하지만,, 위의 예제로는 도대체 hidden field를 왜 사용하는지 이해가 되지 않아서 찾아봤는데,,

위의 예제는 hidden field의 내용은 실제로 사용자의 눈에 보이지 않는다는걸 알려주기 위해 나온듯 하고

Hidden field에 대해 좀 더 정확히?자세히 말하면

사용자가 입력할 필요가 없는 정보/ 사용자가 몰라도 되는 정보,,이지만 폼 전송과 같이 전송해주어야 하는 정보를 담기 위한 것

어떤 블로그에서는 사용자가 변경해서는 안되는 데이터를 함께 보낼때 사용한다고 정의하였다

예를들면,, 회원가입 시 사용자의 아이피를 받는 경우 히든필드에 넣는 경우도 있고

또,,

어떤 정보를 수정하고자 할때, 데이터베이스 테이블에서 가지고 있는 Primary Key값을 hidden field에 같이 전송하면, 이 primary key값을 통해 DB에서 해당 레코드를 식별하여 업데이트를 쉽게 할 수 있다.

참고

https://velog.io/@gndan4/HTML-input-typehidden-%EC%96%B8%EC%A0%9C-%EC%93%B0%EC%9D%B4%EB%8A%94-%EA%B1%B8%EA%B9%8C

http://www.homejjang.com/05/HiddenField.php

http://tcpschool.com/html-input-types/hidden

https://codedragon.tistory.com/5438

Object vs Array

//Array
var members = ['kbs','k0214','1999k'];
console.log(members[1]);    //How to get information

//Object
var roles = {
    'programmer' : 'kbs',
    'designer' : 'k0214',
    'manager' : '1999k'
}
console.log(roles.designer);    How to get information

Array : 각각의 정보를 순서에 따라 정리 (각각의 정보는 고유한 식별자가 존재)

Object : 순서가 없는 정보 저장 (식별자가 숫자가 아닌 이름으로 존재)

object 정의하는 방법 

var 객체이름 = { key : value }

Object 에서 key에 대한 value 값을 가져오는 방법

객체이름.key

객체이름[key]

loop for Object and Array

//Array
var members = ['kbs','k0214','1999k'];
var i = 0;
while(i<members.length){
    console.log('array loop',members[i]);
    i=i+1;
}

//Object
var roles = {
    'programmer' : 'kbs',
    'designer' : 'k0214',
    'manager' : '1999k'
}
for(var name in roles){
    console.log('object => ', name,'value => ', roles[name]);
}

name : object의 식별자 key 가 들어오도록 약속되어있음

Object Oriented Programming (OOP)

Programming을 한다는 것은 크게 두가지로 분류 

1. data

2. data를 처리하는 것 

data를 사용하기 좋게 정리하는 도구 : Array, Object 

처리하는 코드가 많아지면 서로 연관되는 것들 grouping하여 구분 : function

javascript에서의 function : 처리해야될 일에 대한 정보를 담고 있는 statement + 변수에 넣을 수 있는 value 

var f = function(){
	console.log(1+1);	//statement
}
console.log(f);	//value

배열의 원소로서 function 존재 가능

var f = function(){
	console.log(1+1);	//statement
}
console.log(f);	//value
var a =[f];
a[0]();

배열과 객체는 모두 서로 연관된 data를 담는 그릇인데, javacript에서는 처리 방법을 grouping하는 함수 조차도 data이기 때문에 배열과 객체에 담을 수 있음 

var f = function(){
	console.log(1+1);
}

var o = {
    func:f
}
o.func();

※ function을 배열보다는 객체에 담는 경우가 많음

function을 객체에 담을 때

var o = {
    v1 : 'v1',
    v2 : 'v2',
    f1 : function f1(){
    console.log(o.v1);
    },
    f2 : function f2(){
    console.log(o.v2);
    }
}

o.f1();
o.f2();

위 코드의 경우, 객체의 이름을 바꾸어보면 함수 안의 내용까지도 바꿔야함을 알 수 있음 

따라서 함수가 객체 안에서 사용될 때, 함수가 자신이 속해있는 객체를 참조할 수 있는 특수한 약속이 필요함

-> this 이용

var o = {
    v1 : 'v1',
    v2 : 'v2',
    f1 : function f1(){
    console.log(this.v1);
    },
    f2 : function f2(){
    console.log(this.v2);
    }
}

o.f1();
o.f2();

사용자가 서버 쪽으로 data를 전송하기 위한 방식으로 HTML의 form 태그 사용

<form> 태그

웹 페이지에서의 입력 양식으로, 화면에 보이지 않는 추상적인 태그

(ex. 로그인 창, 회원가입, 등)

속성 action 은 사용자가 입력한 정보를 어디로 보낼 것인지 링크를 설정해준다. 

<input> 태그

사용자가 양식을 입력하기 위한 태그 

속성  type(종류), name(데이터 이름), value(기본 값)

type를 text로 설정하면 문자를 입력할 수 있는 폼이 생성됨

type를 password로 설정하면 사용자가 입력하는 문자가 별표 처리 된다. 

type를 submit으로 설정하면 제출하는 버튼이 생성된다. 

<form action="http://localhost:3000/process_create" method="post">  
    <p><input type="text" name="title"></p>
    <p>
      <textarea name="description"></textarea>
    </p>
    <p>
      <input type="submit">
    </p>
  </form>

Function

- 일련의 프로그램에 대해 이름을 붙인 것 

- 가독성을 높일 수 있음

- 유지 보수의 편의성이 급격히 높아짐 ex) 함수를 호출하는 곳이 1억개라면, 1억개가 동시에 바뀜

function f123(){
    console.log(1);
    console.log(2);
    console.log(3);
}
f123();
console.log('A');
f123();

Input

console.log(Math.round(1.6));    //2
console.log(Math.round(1.4));    //1

Math : javascript가 내장하고 있는 객체 (객체: 함수들을 관리하는 directory)

round : 반올림을 해주는 함수

round 함수를 살펴보면 입력값이 존재함 (1.6과 1.4)

function sum(first,second){		// parameter
    console.log(first+second);
}
sum(2,4);	//argument

입력값을 sum이 받기 위해서는 sum이 호출한 부분과 sum을 정의되어있는 부분 사이에 서로 매개되어있는 매개 변수 필요함

함수는 입력값을 받을 수 있고 그에 따라 다르게 동작할 수 있음

각각의 입력값 하나 하나를 argument(인자) 라고 함

argument를 받아서 함수안으로 전달해 주는 매개체를 parameter(매개변수) 라고 함

Output

위에서 작성한 sum함수와 JavaScript에 내장되어 있는 함수 Math.round 를 비교해 보면 sum 함수는 호출 할 때마다 해당 값이 출력이 됨

보기에는 sum 함수가 더 편하고 좋아보이지만 융통성이 떨어짐

출력되진 않고 값을 return하는 함수의 경우, console.log를 이용하여 화면에 출력할 수 있고, filewrite를 이용하여 파일에 출력할 수도 있음 또한 이메일로도 출력할 수 있음

return: (1) 어떤 값을 출력 (2) 함수 종료

function sum(first,second){
    return first+second;
}
console.log(sum(2,4));

Array data type (배열)

배열에서는 자릿수가 0부터 counting 된다. 

배열의 개수를 셀 때는 0부터가 아닌 1 부터 counting한다. (배열이름.length)이용

배열의 끝에 데이터를 추가하고 싶으면  " javascript array add data" 검색 - (배열의이름.push )사용

//배열 생성
var arr = ['A','B','C','D'];

//배열 읽기
console.log(arr[1]);    //B
console.log(arr[3]);    //D

//배열요소 바꾸기
arr[2]=3;

//배열의 개수
console.log(arr.length);

//배열의 끝에 데이터 추가
arr.push('E');

Array & Loop

var number = [1,400,12,34,5];
var i =0;
while(i<5){
    console.log(number[i]);
    i=i+1;
}

배열에 숫자를 추가할 경우, 반복문에서 추가한 숫자가 출력되지 않음

5라고 지정했기 때문

5대신 number.length를 사용하면 문제 해결

var number = [1,400,12,34,5];
var i =0;
while(i<number.length){
    console.log(number[i]);
    i=i+1;
}

배열의 요소들의 값을 더하여 출력하면 ( 배열의 요소의 개수가 변할 경우 대비하여 작성)

var number = [1,400,12,34,5];
var i =0;
var total = 0;
while(i<number.length){
    total=total+number;
    i=i+1;
}
console.long(`total:${total}`);

1. Number Data type

이항연산자 - 왼쪽(좌항)에 있는 값과 오른쪽(우항)에 있는 값을 처리해서 하나의 값을 만들어내는 역할

console.log(1);
console.log(1+1);
console.log(4-1);
console.log(2*3);
console.log(10/2);

2. String Data type

String(문자열) 표현 : " " , ' '

어떤 데이터를 사용하냐에 따라 연산자의 의미가 바뀜 

"+" 이항연산자 -> 결합 연산자 

//이항 연산자 
console.log(1+1); 	// 2

//결합 연산자 
console.log('1'+'1');	// 11

String count

string.length  

console.log('abcd'.length);

3. Variable

var a = 1;
console.log(a);

변수 선언시 변수 앞에 var 를 붙이는 것이 좋음 

코드 상에서의 줄바꿈 

\

출력 상에서의 줄바꿈

\n

var name = 'k8805';
// String literals
var letter = 'Dear '+name+'\n\nabcdefg'+'\
\
abc';
console.log(letter);

4. Template literals

키보드를 보면 ~ 표시 옆에 ` 가 있는데 이를 이용

var letter = `Dear ${name}

abcdefg`;
console.log(letter);

개행문자 \n를 사용하지 않고 enter를 쳐도 error없이 출력됨

변수를 넣어서 치환하고 싶을 때

 +name+ 대신에 ` ` 안에서 ${name}을 사용함

`${1+1}` 의 경우 1+1 의 연산결과가 출력됨

※ 5번 6번 7번 세가지는 서로 밀접한 관계에 있기 때문에 같이 생각하는 것이 좋음

5. Boolean Data type

console.log(true);
console.log(false);

실행하면 각각 true와 false가 출력된다. 

true는 변수 이름으로 쓸 수 없음 

6. Comparison operator (비교연산자)

좌항과 우항을 비교해서 true나 false 둘 중에 하나의 값을 만들어내는 연산자 

console.log(1==1);  //true
console.log(1==2);  //false
console.log(1===1); //true
console.log(1>2);   //false
console.log(1<2);   //true

'=' 는 개수에 따라 의미가 다름

= 1개 (name=1) : 대입 연산자

= 2개 (name==1) : 비교 연산자 (좌항과 우항의 값이 같으면 true, 다르면 false)

= 3개 (name===1) : 비교 연산자 ( 좌항과 우항의 값이 정확하게 같은지 비교해주는 연산자)

☆ 비교연산자를 사용할 때, == 보다는 === 권장

7. Conditional Statement (조건문)

조건에 따라 실행문의 흐름 제어

if 괄호 안에는 문법적으로 true/false 즉, boolean형이 들어감

if(true){
   console.log('C1'); 
}
if(false){
    console.log('C2');
}

위 코드와 아래의 코드는 동일하다.  true가 아니면 false이기 때문에  if (true){..} else{..} 를 쓸 수 있다. 

if(true){
    console.log('C1'); 
 }
else{
     console.log('C2');
 }

8. loop (반복문)

for문, while문, do-while문

- while문 (가장 기초적이지만 불편) 

while 괄호 안에는 if 괄호 안과 마찬가지로 boolean형을 넣는다. 

while 괄호 안에 true를 넣으면 : 무한 반복문 

아래 코드와 같이 i<5를 넣으면 반복문이 실행될때 마다 i가 1씩 커지고, i가 5가 되면 false가 되므로 반복문을 종료한다. 

var i=0;
while(i<5){
    console.log(i);
    i=i+1;
}

TAG

태그의 의미가 궁금할 때, "HTML 태그이름 tag"라 검색하면 해당 내용이 나온다. 

글자 크기 (h 뒤의 숫자가 커질수록 글자 크기가 작아짐)

<h1> </h1> 

<h2> </h2>

...

<h6> </h6>

Strong(글자 강조)

<strong> </strong>

Underline

<u> </u>

New line

<br>

<br><br> : 단락 처럼 느껴지도록 함

여러번 사용할 수 있음

Paragraph

<p> </p> : 단락의 시작과 끝을 표시 (열리는 태그, 닫히는 태그 존재)

<br>처럼 여백을 조절하고 싶을 경우 - CSS이용 (ex) <p style = "margin-top:45px;"> ... </p>

image

<img width=" 00%" src = "이미지 주소" >

 width & src 부분을 attribute라 함

https://unsplash.com/의 이미지들은 저작권에 구속받지 않고 자유롭게 사용할 수 있음

포함관계

포함하고 있는 태그 : 부모태그 <parent> </parent>

포함된 태그 : 자식 태그<child></child>

<parent>

     <child></child>

</parent>

List

- Unordered List

<ul> </ul>

- Ordered List ( 항목 앞에 자동으로 번호를 붙여줌)

<ol> </ol>

- 항목 (Unordered List와 Ordered List 안에 사용)

<li> </li>

Title of webpage

<title> </title>

검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그임

※영어가 아닌 문자를 사용할 때, 문자가 깨지는 경우

<meta charset="utf-8">

Body Description

<head> </head>

Body

<body> </body>

웹페이지가 HTML로 만들어졌다는 것을 표현

<!doctype html>

Link

<link href="link 주소" >

- href (HyperText Reference): 연결할 주소 

- rel : 현재 문서와 연결한 link의 관계 설명 

- target="_blank" : 새창에서 페이지가 열림

- title : link가 어떤 내용을 담고 있는지 툴팁으로 보여줌

<a> 태그

href 속성 - 링크만들기

<!-- 텍스트 링크-->
<a href="링크할 주소" [속성="속성 값"] 텍스트 </a>

<!-- 이미지 링크-->
<a href="링크할 주소" [속성="속성 값"] <img src="이미지 파일 경로"> </a>

텍스트 링크의 밑줄과 글자 색 바꾸기

-텍스트 링크는 기본적으로 밑줄이 있는 파란색 글자로 표시됨

- 사이트 디자인에 맞게 색상을 바꾸고 밑줄을 없앨 수 있음 (CSS 사용)

<style>
	a{
    	text-decoration:none;
        color:black;
    }
</style>

target 속성 - 새 탭에서 링크 열기

예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>텍스트 링크</title>
	<style>
		a {
			text-decoration:none;   /* 링크 글자 밑줄 없애기 */
			color:green;    /* 링크 글자 색깔 바꾸기 */
		}
	</style>
</head>
<body>
    <h2>텍스트 링크 만들기</h2>
    <p><a href="https://bskwak.tistory.com/">IT 공부 홈페이지(현재화면)</a></p>
    <p><a href="https://bskwak.tistory.com/"target="_blank">IT 공부 홈페이지(새 창/새 탭)</a></p>
</body>
</html>

왼쪽과 같은 화면이 나오고 초록색 글자를 선택하면 해당 링크로 연결됨

문서 안에 다른 문서 넣기(iframe)

 - 현재 문서에 다른 문서를 포함시키거나 자바스크립트를 이용해 팝업 창을 열도록 했을 때

  현재문서 = 부모문서, <iframe>으로 삽입된 문서/팝업문서 = 자식문서

- 자식문서에서 링크할 때, target을 _parent속성으로 지정 -> 부모 문서 창에 표시 O

<!-- 부모 문서 parent.html -->
<iframe src = "child.html" width="600" height="400"></iframe>

<!-- 자식 문서 child.html -->
<p><a href= "주소" target="_top"> 텍스트</a></p>

한 페이지 안에서 점프하는 앵커(anchor) 만들기

- 페이지가 긴 웹문서에서 특정 요소를 클릭하면 그 위치로 한번에 이동시켜줌

- ex. 목차에서 단원 선택하면 이동되는 것

- 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만들고 각각 다른 이름 지정

   -> <a>태그의 href속성을 사용해 링크, 앵커이름앞에 #을 붙여 앵커임을 표시

- jQuery Mobile을 이용해 모바일 웹사이트나 웹앱을 만들 때 자주 사용

<태그 id = "앵커이름"> 텍스트 또는 이미지 </태그>
<a href = "#앵커이름"> 텍스트 또는 이미지 </a>

예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>링크 만들기</title>
</head>
<body>
	<h1>앵커 만들기</h1>
	<p>앵커란?~~</p>
	<ul id="menu">
		<li><a href="#content1">메뉴1</a></li>
		<li><a href="#content2">메뉴2</a></li>
		<li><a href="#content3">메뉴3</a></li>
	</ul>
	<h2 id="content1">내용1</h2>
    <p>1-1 </p>
    <p>1-2 </p>
    <p>1-3 </p>
	<p><a href="#menu">[메뉴로]</a></p>
	<h2 id="content2">내용2</h2>
    <p>2-1 </p>
    <p>2-2 </p>
    <p>2-3 </p>
	<p><a href="#menu">[메뉴로]</a></p>
	<h2 id="content3">내용3</h2>
    <p>3-1 </p>
    <p>3-2 </p>
    <p>3-3 </p>
    <p><a href="#menu">[메뉴로]</a></p>
</body>
</html>