[JAVAScript/자바스크립트]typeof,함수,this,이벤트,문자열

typeof연산자

변수의 유형을 찾을 수 있음

typeof  = > undefined, 숫자, 문자, object

function

함수는 특정작업을 수행하도록 무언가 코드를 만든 후  무언가를 호출할때 실행

function 함수명(변수){return 반환값;}

함수이름에는 문자,숫자, 밑줄 및 달러기호 포함가능

함수호출

• 이벤트 발생 시(사용자가 버튼을 클릭했을 때)
• JavaScript 코드에서 호출(호출)될 때
• 자동(자체 호출)

함수반환

• return에 도달하면 함수실행이 중지 되며 반환값을 반환함

함수이기때문에 이 코드는 재사용 가능

지역변수

자바스크립트 함수 내에 선언된 지역변수는 그 함수 내에서만 액세스 가능

그러기때문에 같은 이름의 변수를 다른 함수에서 사용할 수 있음

지역 변수는 함수가 시작될때 생성되고 함수가 완료되면 삭제됨

object(객체)

객체도 변수다

개체에는 많은 값이 포함될 수 있다

값은 이름:값 쌍으로 작성된다

보통 const를 사용하여 객체를 선언하는것이 일반적이다

객체생성

const malja = {name:"malja",job:"developer",blogAge:1};

객체속성 액세스

• objectName.propertyName
• objectName["propertyName"]

this

개체

객체 메소드에 this 객체를 가리킴

단독으로, this를 나타냄

함수에서 this는 전역개체를 나타냄

call(),apply(), bind()메서드는 이를 모든 개체에 참조할 수 있음

this는 변수가 아니라 키워드고, 이 값은 변경 불가능

이벤트

ex

• HTML 웹 페이지가 로드를 완료했습니다.
• HTML 입력 필드가 변경되었습니다.
• HTML 버튼을 클릭했습니다

<button onclick="document.getElementById('demo').innerHTML = Date()">오늘날짜?</button>

<button onclick="this.innerHTML = Date()">오늘날짜?</button>

이벤트 목록

이벤트설명

onchange	HTML 요소가 변경되었습니다.
onclick	사용자가 HTML 요소를 클릭합니다.
onmouseover	사용자가 HTML 요소 위로 마우스를 이동합니다.
onmouseout	사용자가 HTML 요소에서 마우스를 멀리 이동합니다.
onkeydown	사용자가 키보드 키를 누릅니다.
onload	브라우저가 페이지 로드를 완료했습니다.

이벤트핸들러

이벤트처리를 사용해서 확인할 수 있는 것들

• 페이지가 로드될 때마다 수행해야 하는 작업
• 페이지를 닫았을 때 해야 할 일
• 사용자가 버튼을 클릭할 때 수행해야 하는 작업
• 사용자가 데이터를 입력할 때 확인해야 하는 내용

자바스크립트가 이벤트와 함께 작동하도록 하기 위해 다양한 방법 사용가능

• HTML 이벤트 속성은 JavaScript 코드를 직접 실행할 수 있습니다.
• HTML 이벤트 속성은 JavaScript 함수를 호출할 수 있습니다.
• HTML 요소에 고유한 이벤트 핸들러 기능을 할당할 수 있습니다.
• 이벤트가 전송되거나 처리되는 것을 방지할 수 있습니다

문자열

텍스트 저장 및 조작

작은 따옴표나 큰 따옴표 사용가능

문자열의 길이를 알려면 length속성을 사용가능

let a = "df"

let length = a.length;

혹시 문자열 중에 큰따옴표나 작은따옴표를 사용해야할 경우

\'  --> '

\" --> "

\\ --? \

 

\b	Backspace
\f	Form Feed
\n	New Line
\r	Carriage Return
\t	Horizontal Tabulator
\v	Vertical Tabulator

문자열을 객체로만들기

let name = "malja";

let named =  new String("malja");

let named == new String("malja");

문자열부분추출

• slice(start, end)
• substring(start, end)
• substr(start, length)

slice()

문자열의 일부를 추출하고 추출된 부분을 새문자열로 반환

시작위치와 끝(포함x)의 두가지 변수사용

0부터 시작

매개변수가 음수면 끝에서부터 계산

substring()

슬라이스와 유사

시작및 끝값이 0보다 작으면 하위문자열이 0으로 처리된다는 것임

substr()

슬라이스와 유사

두번째 매개변수가 추출된 부품의 길이를 지정

replace()

지정된 값을 문자열의 다름값으로 바꿈

호출된 텍스트 자체를 변경하는게 아니라 새문자열을 반환하는것임

toUpperCase() 대문자변환

toLowerCase()소문자변환

concat() 두개이상의 문자열을 결합

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

trim() 양쪽 공백제거

trimStart() 시작부분만 공백제거

trimEnd() 끝부분만 공백제거

padStart()문자열을 다른문자열로 채움(몇글자,채울글자)

문자열문자추출

charAt(포지션)

charCodeAt(포지션)

속성액세스[]

charAt()

문자열ㄹ의 지정된 위치에 있는 문자를 반환

<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(1);
</script>

charCodeAt()

문자열의 지정된 인덱스에 잇는 문자의 유니코드 반환

 

split()

문자열을 배열로 변환

변수.split("구분기호")

 

문자열검색

indexOf()

변수명.indexOf(검색할문자열);

검색할 문자열의 첫번째 위치를 반환

위치는 0부터 계산

 

lastIndexOf()

마지막으로 나타내는 인텍스를 반환

 

indexOf, lastIndexOf모두 텍스트가 없으면 -1을 반환두개 모두 두번째 매개변수에 위치를 입력하면 그 부분을 시작으로 문자열을 검색함

 

search()

문자열에서 지정된 값을 검색하고 일치하는 위치 반환

 

match() 문자열일치

문자열에서 정규식과 일치하는 항목을 검색하고 일치항목을 배열객체로 반환

string.match(/문자열/g or gi)

g는 지역검색 gi 는 전역검색

 

includes()

문자열에 지정된 값이 포함되어 있으면 메서드가 true를 반환

string.includes(searchvalue, start)

 

startWith()

문자열이 지정된 값으로 시작하면 참ㅊ을 반환 그렇지 않으면 거짓을 반환

대소문자 구분해야됨

string.startsWith(searchvalue, start)

 

endWith()

문자열이 지정된 값으로 끝나면 참을 반환 그렇지 않으면 거짓을 반환

string.endsWith(searchvalue, length)

이것도 대소문자를 구분해야됨