조코드

 String.valueOf()  .toString()

두 메소드 모두 Object의 값을 String으로 변환하지만 변경하고자 하는Object가 null인 경우 다르다.

toString()과 같은 경우 Null PointerException(NPE)을 발생시키지만 valueOf는 "null"이라는 문자열로 처리한다

이런 차이점 때문에 valueOf의 null체크 방법은 "null".equals(string) 형태로 체크를 해야한다.

null로 인해 발생된 에러는 시간이 지나고, 타인의 소스인경우 디버깅하기 어렵고 어떤의미를 내포하고 있는지 판단하기 어렵다. 때문에 NPE를 방지하기 위해 toString보다는 valueOf를 사용하는 것을 추천한다.

---------------------------------------------------------------------------------------------------------------------------------

- String.valueOf()

    - 파라미터가 null 이면 문자열 null을 만들어서 담는다.

- "".toString()

    -대상 값이 null 이면 NullPointerException 발생.

    - Object 에 담긴 값이 String 이 아니라도 출력.

    - 만약 형변환 하려는 객체가 Stirng 객체라면

              String객체에 toString()메소드를 사용해서 다시 String객체를 가져오는 격이되어 낭비가 된다. 어차피 가져오                는 객체가 String객체이면 (String)을 사용하자.

- (String)

   - 가져오는 객체가 String객체임을 컴파일러에 명시하는 것 

1. 줄 맞춤 단축키는  ctrl + Shift + F

   그런데 조금만 길면 코드가 더 가독성없이 망가진다. 

    Preperence의 java/ formatter과 javascript/formatter의 edit 

보통 120정도면 좋았다.   Comments의 3번째 항목인 Enable line comment formatting도 체크해제

Html같은 경우는 preference의 HTML Files에서 Editor의 Line width 항목을 120으로 맞춰주자 

xml도 XML Files Editor Line width 120 으로 

2. 스펠링 체크 꺼주기

<div style="float: right;">

<div style="float: left;">

themewagon.com/themes/free-bootstrap-4-html5-ecommerce-website-template-freshshop/

ThemeWagon은 개발자가 필요로 할 수있는 모든 종류의 템플릿 또는 테마를 포괄하는 다양한 카테고리 중심의 무료 및 프리미엄 반응 형 부트 스트랩 HTML 템플릿과 WordPress 테마를 제공한다.

1. 문제상황  - import받은 project에서 jar파일이 빠져서 올 때가 있다. jar 파일을 등록해주자 

2. www.java2s.com/Code/Jar/CatalogJar.htm

이곳에서 에러난 import부분을 search 하면 필요한 jar파일을 다운받을 수 있다.

3. 이클립스의 propertise의 Java Build Path의 Libraries의 Add External JARs에서  다운받은 JarFile을 등록/apply해주자 

<button id="btn_back<%= u_id %>" class="btn btn-white w120">이전</button>
버튼을 눌렀을 때 팝업창이 나가지고 url창에 정보가 나오는 문제가 있었다 . 

이유는 form안에 버튼을 나두어서 submit이 된 거였다.

보통 form안에 버튼을 잘 두지 않지만 

안에 두고 submit을 하지 않으려면 
<button type="button" id="btn_back<%= u_id %>" class="btn btn-white w120">이전</button>
타입을 지정해주어야 한다 . 

<button>요소
URI를 연결하지 않고 단순하게 사용자 인터페이스만을 ‘조작‘하기 위한 버튼으로서 <button type="button"> 엘리먼트로 마크업 합니다.  type을 명시하지 않으면 어떤 브라우저는 Form Submit 기능을 실행하기 때문에 반드시 type 속성을 button으로 지정해 주어야 합니다.

<input>요소
사용자의 입력을 서버로 ‘전송‘하기 위한 버튼으로서 <input type="submit">, <button type="submit"> 엘리먼트로 마크업 합니다.

함수(function) = 독립적인 블록이다.

function 함수이름식별자(매개변수1인수, 매개변수2인수,...) {

    함수가 호출되었을 때 실행하고자 하는 실행문;

}

변수는 유효범위에 따라 

1지역변수

2전역변수

지역변수의 범위일 지라도 var키워드를 쓰지않으면 해당변수는 전역변수로 자동 으로 변함
전역변수와 지역변수가 같은 이름이라도 둘은 다른 값을 가짐

var num = 10; // 전역 변수 num을 선언함.
function globalNum() {
    var num = 20; // 같은 이름의 지역 변수 num을 선언함.
    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 20
}
globalNum(); // 함수 globalNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 10

함수 호이스팅(hoisting)

자바스크립트 함수안에 있는 모든 변수의 선언은 맨 처음으로 이동된 것 처럼 동작한다.

var globalNum = 10;     // globalNum을 전역 변수로 선언함.
function printNum() {
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>"); // ①
    var globalNum = 20; // globalNum을 지역 변수로 선언함. // ②
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}
printNum();

1번의 globalNum이 전역변수를 가리키는 10이 나올것 같지만 undefine이 나온다 

함수호이스팅으로 인해 var globalNum; 이 (변수의 선언 부분) 맨 처음 부분으로 이동된다. 

var globalNum = 10;
function printNum() {
    var globalNum; // 함수 호이스팅에 의해 변수의 선언 부분이 함수의 맨 처음 부분으로 이동됨.
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>");
    globalNum = 20;
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}
printNum();

바스크립트에서는 함수 호이스팅이 자동으로 수행되지만, 항상 함수 블록의 첫 부분에 변수를 선언하는 것이 좋습니다.

arguments 객체 

arguments객체를 이용하면 함수로 전달된 인수의 총 개수를 학인하거나 각각의 인수에도 접근 가능

arguments 객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장한다.

첫번째 인수는 arguments[0]에 저장되며 다음인수는 [1] 에 저장된다.

또한 인수의 총 갯수는 arguments 객체의 length 프로퍼티에 저장된다

function addNum() {
    var sum = 0;                                // 합을 저장할 변수 sum을 선언함.
    for(var i = 0; i < arguments.length; i++) { // 전달받은 인수의 총 수만큼 반복함.
        sum += arguments[i];                    // 전달받은 각각의 인수를 sum에 더함.
    }
    return sum;
}
addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0
addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

css 스타일 적용의 우선순위

1. 인라인 스타일

2. 내부 / 외부 스타일 시트

3. 웹 브라우저 기본 스타일

인라인 스타일(Inline style)
인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.
예제
<p style="color:green; text-decoration:underline">

내부 스타일 시트(Internal style sheet)
내부 스타일 시트를 이용한 방법은 HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정합니다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다.
예제
<style>
    body { background-color: lightyellow; }
    p { color: red; text-decoration: underline; }
</style>

외부 스타일 시트(External style sheet)
외부 스타일 시트를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다.
스타일을 적용할 모든 웹 페이지의 <head>태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함하면 됩니다.
예제

<link rel="stylesheet" href="/examples/media/expand_style.css">

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.

예제
p { color: red; font-size: 14px; }

아이디(id) 선택자
아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다.
이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다.
예제
<style>
    #para { color: teal; text-decoration: line-through; }
</style>
...
<p id="para">이 부분에 스타일을 적용합니다.</p>

클래스(class) 선택자
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다.
이러한 특정 집단을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 줍니다.
예제
<style>
    .paras { color: lime; text-decoration: overline; }
</style>
...
<p class="paras">이 부분에 스타일을 적용합니다.</p>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<p class="paras">이 부분에도 같은 스타일을 적용합니다.</p>