[자바스크립트] JavaScript 기초 다지기 - 1

sum

• sum function의 x+y값을 리턴합니다.

function sum(x, y) {
    return x + y;
}

console.log(sum(1,3)); //4

 

 

multiply

• multiply function의 x*y값을 리턴합니다.

function multiply(x,y) {
	return x*y;
}

console.log(multiply(2,3)); // 6

 

 

length

• getStringLength function은 length를 사용하여 총문자열의 길이를 리턴합니다.

function getStringLength(str) {
	return str.length;
}

console.log("Hello, world"); //12

 

 

toLowerCase()

• 문자열에 toLowerCase()라는 메서드(함수)를 붙이면, 영문 알파벳이 모두 소문자로 변환해 반환합니다.

funtion lowerCase(str) {
	return str.toLowerCase();
}
console.log(lowerCase("HELLO")); //hello

 

 

toUpperCase()

• 문자열에 toUpperCase()라는 메서드(함수)를 붙이면, 영문 알파벳이 모두 대문자로 변환해 반환합니다.

funtion upperCase(str) {
	return str.toUpperCase();
}
console.log(upperCase("hello")); //HELLO

 

 

index, 알고 넘어가자!
문자열의 index는 1이 아닌 0에서 시작합니다.
HELLO의 H는 0번째 자리이고, H가 1번째 자리가 됩니다.

 

First character access (문자열에서 첫 번째 글자 뽑아오기)

• 문자열의 원하는 위치를 가져오는 방법에는 두 가지가 있습니다.
  1. [ ]를 사용하는 방법
  2. charAt을 사용하는 방법

function getFirstCharacter(str) {
	return str[0];
}

console.log(getFirstCharacter("hello"); //h

or

function getFirstCharacter(str) {
	return str.charAt(0);
}

console.log(getFirstCharacter("hello"); //h

 

 

Last character access  (문자열에서 마지막 글자 뽑아오기)

• 문자열의 원하는 위치를 가져오는 방법에는 두 가지가 있습니다.
  1. slice를 사용하는 방법 (slice에 대해 더 알아보기!)
  2. length의 길이를 가져와 -1 하는 방법
     • -1을 하는 이유는 index가 0에서 시작하기 때문에 1을 빼 주어야 합니다.

function getLastCharacter(str) {
	return str.slice(-1);
}

console.log(getLastCharacter("hello"); //o

or

function getLastCharacter(str) {
	return str[str.length -1];
}

console.log(getLastCharacter("hello"); //o

 

 

Substring (지정된 위치가 글자만 가져오기)

• substring(시작 위치, 끝나는 위치)을 의미합니다.

function getSubstring(str) {
	return str.subString(2,4);
}

console.log(getSubstring("javascript")); //vas

 

 

• 밑에처럼 substring(시작점)만 입력하는 경우 문자열의 끝까지 읽어옵니다.

function skipFirstCharacter(str) {
	return str.substring(1);
}

console.log(getSubstring("javascript")); //avascript

or

 

function skipFirstCharacter(str) {
	return str.slice(1);
}

console.log(getSubstring("javascript")); //avascript

 

 

PROJECT

공부한 것으로 지정된 위치의 문자열만 뽑아오는 기능을 만들어보았습니다.

 

설명

slice(0,10)을 설정해 줌으로써 입력된 문자열의 index 0에서 10번째 자리까지의 문자열만 뽑아냅니다.

 

See the Pen Get specific position of the text by heerachoi (@heerachoi) on CodePen.

 

---

알고 넘어가자!

 

Node.textContent

노드와 그 자손의 텍스트 콘텐츠를 표현합니다.

 

구문

let text = someNode.textContent;

someNode.textContent = "string";

 

 

예제

<div id="sentence">This is text!</div>

 

textContent를 사용해 요소의 텍스트 콘텐츠를 가져오거나

let text = document.getElementById("#sentence").textContent;
// 결과: This is text!

 

텍스트 내용을 설정할 수 있습니다.

document.getElementById("#sentence").textContent = "Text changed!";
// 결과: Text changed!