javascirpt 기초(1/2)

아주 기초적인 JS, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자

<img onclick="changeImage()">

function changeImage() { 

var image = document.getElementById('');

if(image.src.match('filled')){

   image.src = "~empty.png";

   image.style.opacity = 1.0;

}else{

   image.src = "~filled.png";

}

}

document.getElementById("").innerHTML = text;

<script src="script.js"></script>

window.alert() 

document.write() 로 html로 출력하는 방법

innerHTML

console.log() 로 콘솔에 출력

상수 Literals 

변수 Variables

연산자

=== 값도 같고 자료형도 같다

!== 값이 같지 않고 자료형도 같지 않다.

? 삼위연산자

typeof 변수의 자료형 알려줌

instanceof 객체가 인스턴스 객체 타입일 경우 true

자료형

String, Number, Boolean, Array, Object   undefined

Array도 Object의 특수한 케이스

var test= "" 값은 "" 타입은 String

var test= null 값은 null 타입은 Object

var test= undefined 값과 타입 모두 undefined

객체 Object

속성 Properties

메서드 Methods

변수의 유효범위 scope

local variables

global variables -> window 객체에 속하게 됨.

window.globalVariables

이벤트 로딩, 변경, 클릭 등

<button onclick="method()">

<button onclick="this.innerHTML=Date()">

<select id="onchangeSelect" onchange="onchangeFunction()">

<option value="어느 동물(을)">선택

<option value="닥스훈트">강아지

<option value="페르시안 캣(을)">고양이

</select>

<p id="onchangeResult"></p>

<script>

function onchangeFunction() {

var selectValue = document.getElementById("onchangeSelect").value;

document.getElementById("onchangeResult").innerHTML = selectValue + "를 좋아하세요?";

}

</script>

onchange onclick onmouseover onmouseout onkeydown onload

String " ' ' " 또는 ' " " '로 사용

txt.length 길이

Backslash escape chracter \n

\' \" \\ \t \b \n \r 복귀문자carriage return? \f 서식문자

String내에서 보이는 것만 줄바꿈 하고자 할때 \\을 넣으면 된다. 화면에서는 줄바꿈이 안됨

문자열 메서드

charAt() 특정 인덱스 (위치) 의 문자를 찾아 줍니다.

charCodeAt() 특정 인덱스에 있는 문자의 유니코드 (Unicode) 를 알려 줍니다.

concat() 두개 이상의 문자 (strings) 를 조합하여, 조합된 문자의 복사본 (copy) 을 돌려 줍니다.

fromCharCode() 유니코드 값 (Unicode values) 을 문자 (characters) 로 변환합니다.

indexOf() 문자열 (string) 에서 특정 값이 맨 처음 발견된 위치를 알려 줍니다.

lastIndexOf() 문자열 (string) 에서 특정 값이 맨 마지막 발견된 위치를 알려 줍니다.

localeCompare() 현재 위치 (the current locale) 에서 두 문자열 (strings) 을 비교합니다.

match() 정규 표현 (regular expression, 찾는 단어) 에 대해 일치하는 부분을 문자열 (string) 에

서 찾고, 일치한 단어를 반환 합니다.

replace() 문자열 (string) 에서 값을 찾아서, 새로운 값으로 대체한 새로운 문자열 (string) 를 반환합니다.

search() 문자열 (string) 에서 값을 찾아서, 일치하는 위치를 반환합니다.

slice() 문자열 (string) 의 일부를 추출 (extracts) 하여 새로운 문자로 반환합니다.

split() 문자열 (string) 를 부분 문자열 (substrings) 의 배열로 분리합니다.

substr() 문자 () 의 일부를 시작 위치에서 부터 얼마간의 단어 (characters) 까자를 추출 (extracts) 합니다.

substring() 문자열 (string) 의 일부를 정해진 두 위치 사이만 추출 (extracts) 합니다.

toLocaleLowerCase() 문자열 (string) 를 소문자 (lowercase letters) 로 변환합니다. 이 때 언어 및 지역 설정 

(locale) 을 참조 합니다.

toLocaleUpperCase() 문자열 (string) 를 대문자 (uppercase letters) 로 변환합니다. 이 때 언어 및 

지역 설정 (locale) 을 참조 합니다.

toLowerCase() 문자열 (string) 를 소문자 (lowercase letters) 로 변환합니다.

toString() 문자 객체 값 (the value of a String object) 을 반환합니다.

toUpperCase() 문자열 (string) 를 대문자 (uppercase letters) 로 변환합니다.

trim() 문자 () 의 양쪽 끝의 공백 (whitespace) 을 제거 합니다.

valueOf() 문자 객체 원형 값 (the primitive value of a String object) 을 반환합니다.

Number

자바스크립트의 숫자는 항상 double

배 정밀도 부동 소숫점 double precision floating point numbers로 저장됨 64bit

소수점 이하 15자리까지 정밀하게 표현 가능 

NaN isNan

toString() 숫자를 문자열로 반환합니다.

toExponential() 반올림 (rounded) 및 지수 표기 (exponential notation) 하여, 문자열 형태로 반환합니

다.

toFixed() 반올림 (rounded) 및 소수점을 갖는 숫자 (a specified number of decimals) 로 표기하여, 문자열 

형태로 반환합니다.

toPrecision() 지정한 길이로 숫자를 표기하여, 문자열 형태로 반환합니다.

valueOf() 숫자를 숫자 형태로 반환합니다.

Number() 입력받은 인수 (argument) 를 숫자로 반환합니다.

parseInt() 입력받은 인수 (argument) 의 정수 부 (integer) 를 반환합니다.

parseFloat() 입력받은 인수 (argument) 의 부동소수점 숫자를 반환합니다.

toPrecision() 메서드는 지정한 길이로 숫자를 표기하여, 문자열 형태로 반환합니다.

Math 객체

Math.min() max()

.random() 0<=값<1 사이의 랜덤값

.round() 가까운 정수로 반올림

.ceil() 올림

.floor() 내림

Math.sqrt(9)

Math Constants, Math Object Methods

날짜와 시간

Date() 현재 날짜

new Date(milliseconds) 초기값 할당

new Date(dateString) 

new Date(year, month, day, hours, minutes, seconds, milliseconds)  날짜  여기서 month는 0~11 까지 사

용 즉 3월은 2

toUTCString() UTC 문자열

toDateString() 날짜와 요일까지 표현

new Date("2016-03-01T03:00:00");  YYYY-MM-DDTHH:MM:SS  가운데 T는 국제표준시 의미

아래는 가능한 표기법

new Date("Mar 1 2016");

new Date("03/01/2016");

new Date("Tue Mar 01 2016 00:00:00 GMT+0000");

날짜 메서드

getDate() 일자 (1 일 에서 31 일) 을 숫자로 가져옵니다.

getDay() 요일 (0 에서 6 까지) 을 숫자로 가져옵니다.

getFullYear() 4자리 년도 (yyyy) 를 가져옵니다.

getHours() 시간 (hour, 0 시에서 23 시) 을 가져옵니다.

getMilliseconds() 밀리 초 (milliseconds, 0 에서 999 밀리초) 를 가져옵니다.

getMinutes() 분 (minutes, 0 분에서 59 분) 을 가져옵니다.

getMonth() 월 (month, 0 에서 11 까지) 을 가져옵니다.

getSeconds() 초 (seconds, 0 에서 59 까지) 를 가져옵니다.

getTime() 1970년 1월 1일부터 경과된 시간을 밀리초 단위 (milliseconds since January 1, 1970) 로 가져옵

니다.

var d = new Date();

d.getDate();

setDate() 일자 (1 일 에서 31 일) 을 숫자로 설정합니다.

setFullYear() 년도 를 설정합니다.

setHours() 시간 (hour, 0 시에서 23 시) 을 설정합니다.

setMilliseconds() 밀리 초 (milliseconds, 0 에서 999 밀리초) 를 설정합니다.

setMinutes() 분 (minutes, 0 분에서 59 분) 을 설정합니다.

setMonth() 월 (month, 0 에서 11 까지) 을 설정합니다.

setSeconds() 초 (seconds, 0 에서 59 까지) 를 설정합니다.

setTime() 1970년 1월 1일부터 경과된 시간을 밀리초 단위 (milliseconds since January 1, 1970) 로 설정합

니다.

Date.parse("March 21, 2012"); 밀리초로 반환

getUTCDate() 국제표준시 가져오기

getUTCDay()

getUTCFullYear() 

배열 Arrays

var room = ["desk","bed","bookshelf"];

room[0] 배열은 요소elements에 접근하기 위해 번호numbers를 사용하는 반면 객체는 멤버members에 접

근하기 위해 이름names을 사용

.length; 요소 숫자

.sort(); 알파벳 순서로 정렬

.push() 추가

.isArray() 이것은 오래된 브라우저에서 작동하지 않아서 아래와 같은 instanceof 연산자를 사용할 수 있음

var myInstanceof2 = ["a", "b", "c", "d"];

document.getElementById("myInstanceof1").innerHTML = myInstanceof2 instanceof Array

아래 함수는 배열요소 를 for문으로 꺼내와서 표현함

function myRoomFunction() {

var i;

var text = "<ul>";

var myRoom6 = ["desk", "bed", "bookshelf", "chair"];

for (i = 0; i < myRoom6.length; i++) {

text += "<li>" + myRoom6[i] + "</li>";

}

text += "</ul>";

document.getElementById("myRoom5").innerHTML = text;

}

배열 메서드

var array = ["1","2","3"];

array.toString() 배열 요소를 ,로 구분된 문자열로 반환

.join() 배열 요소를 하나의 문자열로 조합

.pop() 마지막 요소 제거, 그 값 반환

.push() 맨 끝에 새로운 요소 추가, 새로운 배열의 길이 반환

.shift() 첫 번째 요소 제거하고 모든 다른 요소를 하나씩 당김

.unshift() 새로운 요소를 배열 시작점에 추가

.splice(0, 1, "제네시스", "그랜저"); 0번째에서 1개를 지우고 이후 2개를 추가함

.sort() 알파벳 순서

.reverse() 알파벳 역순

sortCompare5.sort(function(a, b){return a-b});  비교함수를 넣어 숫자도 정렬

highestLowest5.sort(function(a, b){return b-a});

document.getElementById("highestLowest1").innerHTML = highestLowest5[0];  최댓값

highestLowest5.sort(function(a, b){return a-b});

document.getElementById("highestLowest3").innerHTML = highestLowest5[0];  최솟값

.concat() 두개 이상의 배열을 연결하여 새로운 배열 생성

hyundaiConcat.concat(kiaConcat, oneMoreConcat);

.slice(2,4)  3번째 값에서 4번째 값까지 잘라냄

Boolean

var a = 0;

var b = -0;

var c = ""; //빈문자 "" => false:

var d; //값이 할당되지 않음 undefined => false:

var e = null; //널 값 null => false:

var f = false; //거짓 false 는 물론 false:

var g = 100 / "a"; //숫자아님 NaN => false:

var h = Boolean(-1); //음수값도 true

var i = Boolean('false'); //'false' 라는 문자열도 true

비교 논리 연산자

== 값이 같은지 

=== 값과 자료형이 같은지

!=

!==

&& || !

if else for while break continue

자바 스크립트 자료형

string 문자열

number 숫자

boolean 불리언

object 객체

function 함수

객체의 형태

Object 객체

Date 날짜

Array 배열

정규식 regular expression

/pattern/modifiers;  예시 myText.search(/general lee sun-shin/i);

i는 대소문자 상관없이 찾도록

변경자(Modifier) 설명

i 대소문자 가려서 검색

g 첫번째 일치에서 중단하지않고, 전체 일치 찾기

m 다중라인 일치 찾기

정규식패턴 설명

/[순장충]/ 괄호 사이의 문자 중에 하나가 일치하는 곳을 찾습니다.

/[5932]/ 괄호 안의 숫자 중 하나가 일치하는 곳을 찾습니다.

/(최|박|이)/ 괄호안의 | 로 구분된 문자 중 하나가 일치하는 곳을 찾습니다.

메타 문자 설명

/\d/ 숫자를 찾습니다.

/\s/ 공백 문자 (whitespace character) 를 찾습니다.

/\b/ 말이 끝나는 곳이나 시작되는 곳을 찾습니다.

/\u0031/ 16진수 로 표현된 유니코드 문자 (Unicode character) 를 찾습니다. 여기서 \u0031 는 숫자 1을 

의미합니다.

정량자 설명

/가+/ 최소한 한번 이상의 "가" 가 있는 위치를 찾습니다.

try catch throw finally

try {

    try 코드 블록;

}

catch(err) {

    에러를 처리하기 위한 코드 블록;

} 

finally {

    try ... catch 의 결과에 관계없이 실행되어야 할 코드 블록;

}

디버깅

breakpoints

호이스팅 Hoisting / Strict-mode

변수를 선언하기 전에 사용 가능 알아서 선언값들을 상단으로 이동시켜줌

use strict 라고 코딩하면 strict mode에서 작동

코딩 규칙

변수나 함수에 대해 이름 부여 (Naming) 와 선언 (declaration) 에 대한 규칙

화이트스페이스 (white space), 들여쓰기 (indentation), 그리고 주석처리 (comments) 의 사용에 대한 규칙

프로그래밍 관행 (practices) 과 원칙 (principles) 

변수이름 camelCase 권고

연산자 +-/*= 앞뒤 공백

코드블럭 들여쓰기 스페이스4개

1 라인 80문자 내 사용

외부 스크립트 연결시 속성 없이 단순 구문 사용 <script src="myExternalScript.js">

전역변수 최소화

선언은 스크립트와 함수의 맨 위에 입력

숫자, 문자열, 불리언은 원시값 그대로 사용 객체 선언X

var aName = "이순신";  // 문자열 변수에 원시값을 그대로 할당하는 것이 좋습니다.

var anotherName = new String("원균");  // 문자열을 객체로서 선언하게 되면 부정적인 효과가 발생할 수 

있습니다.

var myString = "";

var myNumber = 0;

var myBoolean = false;

var myObject = {};

var myArray = [];

var myFunction = function(){};

var myRegularExpression = /()/;

값 비교시 자료형까지 비교

0 == "";       // true

0 === "";      // false

루프문에서 myArray.length를 매번 실행하도록 하지 말고 밖으로 빼는 것이 좋음

<script>

myArrayLength = myArray.length;

for (i = 0; i < myArrayLength; i++) {}

</script>

DOM 태그에 한번만 접근한 다음 지역 변수로 할당하여 사용하는 것이 좋음

<p id="myDomResult"></p>

<script>

var myDom;

myDom = document.getElementById("myDomResult");

myDom.innerHTML = "태그를 한번 찾아서 가져온 후, 지역변수로 그 태그를 사용하고 있습니다.";

</script>

json "":""