[Javascript] 입문편

소개

Javascript는 태어날때 사실 JavaScript라는 이름을 가지지 않았습니다.

여러 브라우저에서 공통적으로 사용되는 JavaScript는 최초 1995년 Netscape의 엔지니어(Brendan Eich)에 의해 만들어졌습니다. 그리고 그 이름은 모카 또는 LiveScript로 불리워 지기로 되어있었습니다. 하지만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 두 언어 사이의 공통점이 거의 없음에도 불구하고, 마케팅의 사유로 JavaScript라는 이름을 가지게 되었습니다. 그래서 이 사건은 처음 개발을 입문하는 사람이나 IT 지식이 없는 사람들에게 혼란의 근원이 되어버립니다.

대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, node.js 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, Apache CouchDB, 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 GNOME 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다.

Jquery 혹은 javascript만으로 사용할 수 있는 괜찮은 스크롤바 관련 플러그인이 있다.

perfect-scrollbar

https://noraesae.github.io/perfect-scrollbar/

위 그림처럼 얇은 스크롤바를 생성할 수있 있다.

사용법도 상당히 간단하다. 위에 링크된 주소에 소스 및 예제가 비교적 잘 나와 있다. 

사용방법은 다음과 같다

해더부분의 소스 Import

html 코드 예시

적용될 html object CSS

Script 사용 예시 - 이 예시는 Jquery 버전이며 javascript 버전은 github에 API를 참조

div 안의 내용이 동적으로 사이즈가 변경될 경우 update 기능을 이용하여 갱신 시 자동으로 스크롤바 기능이 on/off 된다. 

스크롤바의 생성 제거를 반복해서 사용해도 되지만 실제 사용 시 스크롤바 생성시 약간의 스크립트 실행시간이 존재하는것 같아 update를 사용하는것을 권장한다.

마지막으로 작업에 사용했던 실제 사용 버전 파일

perfect-scrollbar-0.6.12.zip

특수문자 + 영문 + 숫자조합 패스워드 설정하기

// 비밀번호 특수문자 체크
var regExpSpcial:RegExp = /[^\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi
var regExpAlpha:RegExp = /[^a-zA-Z]/gi
var regExpNumber:RegExp = /[^0-9]/gi
if(regExpSpcial.test(pwd)){
    if(pwd.replace(regExpSpcial,"").length<1){
        alert("비밀번호는 특수문자가 최소 1자리가 필요합니다!");
        return ;
    }
}
if(regExpAlpha.test(pwd)){
    if(pwd.replace(regExpAlpha,"").length<1){
        alert("비밀번호는 영문자가 최소 1자리가 필요합니다!");
        return ;
    }
}
if(regExpNumber.test(pwd)){
    if(pwd.replace(regExpNumber,"").length<3){
        alert("비밀번호는 숫자가 최소 3자리가 필요합니다!");
        return ;                          
    }
}

쓸만한 Layer 팝업창

<div id="reservationList_popImg_Layer" onclick="javascript:$(this).hide()" style="display:block; position:absolute; top:100px; z-index:1000; left:30px; background:#fff; padding:10px; border:1px solid #999;">

<a onclick="javascript:$('#reservationList_popImg_Layer').hide();" style="position: absolute; cursor:pointer; right: -6px; top: -3px; width: 21px; margin: -5px 0 0 0; padding: 1px; height: 20px; color: #fff; border-radius: 14px; background:#98a5b5 url('/images/t6i_1.png') center center no-repeat; background-position: 3px 2px;"></a>

<img id="reservationList_popImg" src="/images/20151215_cn_pop_main.jpg" border="0" style="border:1px solid #e1e1e1">

</div>

화면 중앙 좌표를 구하는 법이다.

당연히 띄워지는 객체의  position은 absolute 이어야 할 것이다.

만약 left 와 top 값이 0보다 작은경우라면 화면 밖으로 벗어나지 않도록 0으로 초기화 해준다.

그냥 플러그인을 쓰면되는데.. 그지같은... 퍼블리셔때문에 blockUI 기능을 만들어 써야하는데 매번 찾기 귀찮아서 적는다..

아오..

• $.type(obj) 사용법
• 
  

• 1 2 3 4 5 6 7 8 9 10 11 12

  jQuery.type(undefined) === "undefined" jQuery.type() === "undefined" jQuery.type(window.notDefined) === "undefined" jQuery.type(null) === "null"   jQuery.type(true) === "boolean" jQuery.type(3) === "number" jQuery.type("test") === "string" jQuery.type(function(){}) === "function" jQuery.type([]) === "array" jQuery.type(new Date()) === "date" jQuery.type(/test/) === "regexp"

  cs

jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();

$("#select_box > option:selected").val()

$("select[name=name]").val();

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

선택된 위치

var index = $("#test option").index($("#test option:selected"));

// Add options to the end of a select

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

// Add options to the start of a select

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

// Replace all the options with new options

$("#selectBox")

.html("<option value='1'>oranges</option><option value='2'>Oranges</option>");

// Replace items at a certain index

$("#selectBox option:eq(1)")

.replaceWith("<option value='2'>apples</option>");

$("#selectBox option:eq(2)")

.replaceWith("<option value='3'>bananas</option>");

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").prop("selected", "selected");

// text 값으로 select 하기

$("#selectBox").val("Some oranges").prop("selected", "selected");

// value 값으로 select 하기

$("#selectBox").val("2");

$("#selectBox > option[@value=지정값]").prop("selected", "true");

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

// 첫번째 item 삭제

$("#selectBox option:first").remove();

// 마지막 item 삭제

$("#selectBox option:last").remove();

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

// 0번째 item 다음에 삽입

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

// 3번째 item 전에 삽입

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

// select box 값이 변경될때 선택된 현재값

$("#selectBox").change(function() {

           alert($(this).val());

           alert($(this).children("option:selected").text());

});

정규표현식 기초

. : 다수의 한문자

? : 0개 이상의 한문자

* : 0개 이상의 문자 또는 문자열

+ : 1개 이상의 문자 또는 문자열

(chars) : (, ) 안의 문자또는 문자열을 그룹으로 묶습니다. 이 문자그룹은 Substitution(return URL)에서 $N 의 변수로 활용할수 있습니니다.

^ : 문자열의 첫문(열)을 지정합니다.

$ : 문자열의 끝 문자(열)을 지정합니다.

\(역슬래쉬) : 정규표현식에서 특별한 의미로 사용되는 문자의 특수기능을 제거합니다.(예:(, ), [, ] . 등)

{n} : 정확히 n번 반복

{n,} : n번 이상 반복

{n,m} : n 이상 m 이하 반복

[chars] : 문자들의 범위 또는 표현할 수 있는 문자들을 설정합니다.
예) [a-z] : a 부터 z 까지의 소문자, [tT] : 소문자 t 또는 대문자 T

정규표현식 단축표현들

[:alpha:] : 알파벳. [a-zA-Z] 와 같은 표현

[:alnum:] : 알파벳과 숫자. [a-zA-Z0-9] 와 같은 표현

[:digit:] : 숫자 [0-9] 와 같은 표현

[:upper:] : 대문자. [A-Z] 와 같은 표현

1. 정규 표현식이란.

   문자열의 특정한 패턴을 표시하거나 검사하기 위한 규칙을 의미하며 어떤 문자열의 집합을 표시하는 텍스트 string이나 일반적인

   텍스트 형시의 문서 등에서 문자열을 찾아내거나 검사하고 치환하는데 사용된다. 이러한 정규 표현식은 정규 표현식을 표시하는

   특수문자와 정규 표현식을 검사하기 위한 함수가 있다.

2. 패턴을 표현하는 특수 문자

3. 정규 표현식의 특수문자 사용법

  1) ^a?bc : a로 시작해서 bc로 끝나는 문자(abc로 시작하는 문자)와 bc로 시작하는 모든 문자 (예 abcd, bcd)

  2) ^.a : a앞에 아무 한 문자가 있어야 하고 그 문자로 시작하고 a가 들어간 문자 (예 aa, bacd, match, para)

  3) a?b$ : b로 끝나는 문자열 중에 a가 없거나 한 개 이상 존재하는 문자열 (예 b, ab, aab)

  4) a?b+$ : 첫 글자는 a가 있거나 없고 b가 한 개 이상이고 b로 끝나는 문자 (예 ab, b, bb, abbb, abbbb)

  5) ^ab$ : 첫 글자가 a이고 끝나는 문자가 b인 경우 (예 ab)

  6) [ab]cd : a나 b중에 한 글자와 cd가 포함된 acd, bcd를 포함한 문자 (예 acd, bcd, acdse)

  7) ^[a-zA-Z] : 영문자로 시작하는 모든 문자 (예 a, b, c, d, ee)

  8) [^ab]cd : cd 문자열 앞에 a나 b를 제외한 문자가 있는 문자열 즉, acd와 bcd를 제외한 문자열을 의미한다. (예 scd, dcd, ffcd)

  9) a{2,}b : a의 개수가 최소 2개 이상이고 다음 문자가 b인 문자 (예 aab, aaabcd, aaaab)

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

2018.10.24 추가

+, -, 소수점을 허용하는 숫자형식 체크 정규식 : ^[+-]?\\d*(\\.?\\d*)$

Java 사용예제