함수 설명

1) "charAt()" 함수를 사용하는 것은 긴 줄에 서 있는 사람들 중 한 사람을 지목하는 것과 비슷합니다.

    각 사람은 특정 위치(번호)에 있고, 당신은 그 번호를 알려주면 해당 사람을 찾을 수 있습니다.

    이때 문자열은 사람들의 줄이고, 각 문자는 특정 위치에 있는 사람입니다.

 

기본 사용법

1) 구문

● 문자열.charAt(위치)

2) 예제

● 만약 당신이 "Hello"라는 단어를 가지고 있고, 이 단어에서 두 번째 문자(‘e’)를 찾고 싶다면,

   charAt(1)을 사용합니다(인덱스는 0부터 시작합니다).

 

매개 변수

1) index (위치)

● 이 숫자는 찾고 싶은 문자의 위치를 나타냅니다.

● 첫 번째 문자는 0, 두 번째 문자는 1의 위치에 있습니다.

2) 예제

● "Hello"에서 'e'는 1의 위치에 있습니다. → "Hello".charAt(1)

 

반환 값

1) 문자 반환

● 지정된 위치에 있는 문자를 반환합니다.

2) 범위를 벗어난 경우

● 만약 지정된 위치가 문자열의 길이를 넘어가면(즉, 문자가 없는 위치를 가리키면) 빈 문자열을 반환합니다.

 

사용 예제

let myString = "Happy";
console.log(myString.charAt(0)); // 'H' (첫 번째 문자)
console.log(myString.charAt(2)); // 'p' (세 번째 문자)
console.log(myString.charAt(5)); // '' (문자열 길이를 넘어서는 위치, 여기서는 아무것도 없음)
 

주의할 점

1) 인덱스는 정수여야 함

● 소수점이나 음수를 인덱스로 사용하면 예상치 못한 결과가 나올 수 있습니다. 항상 0 이상의 정수를 사용하세요.

2) 문자열 길이를 고려

● 문자열의 길이보다 큰 인덱스를 사용하면 빈 문자열을 얻게 됩니다. 문자열의 길이를 초과하지 않도록 주의하세요.

 

실제 사용 사례

1) 이름의 첫 글자 추출

● 사용자의 이름에서 첫 번째 글자를 추출하여 이니셜로 사용할 때

2) 데이터 형식 검증

● 주민등록번호, 전화번호 등 특정 형식을 가진 데이터에서 특정 위치의 문자를 검사할 때 유용합니다.

 

대체 방법

1) 대괄호 접근법

● `string[index]`를 사용하면 같은 결과를 얻을 수 있습니다. 이 방법은 인덱스가 범위를 벗어나면 `undefined`를 반환합니다.

2) 비교

● `charAt()`은 빈 문자열을 반환하는 반면, 대괄호 접근법은 `undefined`를 반환한다는 차이점이 있습니다.

 

질문과 실습

1) 학습자들은 "Hello", "World", "JavaScript"와 같은 다양한 문자열에 대해 `charAt()`를 사용해보고,

    다른 인덱스 값을 실험해 보시기 바랍니다.

2) 실습을 통해 `charAt()`가 어떤 상황에서 유용할 수 있는지 생각해보고, 자신만의 예제를 만들어 보시기 바랍니다.

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] substring(indexStart, indexEnd) : 문자열의 특정 부분 추출  (0) 2024.01.23
[자바 스크립트] split(separator) : 문자열을 지정된 구분자로 나누기  (1) 2024.01.23
[자바 스크립트] 선택된 라디오 버튼의 값 가져오기  (0) 2023.12.14
[자바 스크립트] 클래스  (0) 2020.10.15
[자바 스크립트] arguments 객체  (0) 2020.10.15

함수 설명

1) substring() 함수는 문자열에서 지정된 시작 인덱스부터 끝 인덱스 바로 전까지의 부분을 추출합니다.

2) 이는 마치 긴 문자열을 책으로 생각하고, 특정 페이지 범위만 잘라 읽는 것과 비슷합니다.

3) 문자열은 책이고, 시작과 끝 인덱스는 읽고 싶은 페이지 범위를 나타냅니다.

 

기본 사용법

1) 구문

● 문자열.substring(indexStart, indexEnd)

2) 예제

● "Hello, world!"에서 "Hello" 부분을 추출하려면,

"Hello, world!".substring(0, 5)를 사용합니다.

 

매개 변수

1) indexStart (시작 인덱스)

● 추출할 부분의 시작 위치를 나타내는 숫자입니다.

2) indexEnd (끝 인덱스, 선택적)

● 추출을 끝낼 위치를 나타내는 숫자입니다. 이 값은 포함되지 않습니다.

● indexEnd가 생략되면 문자열의 끝까지 추출합니다.

 

반환 값

1) 부분 문자열 반환

● 지정된 범위의 부분 문자열을 반환합니다.

 

사용 예제

let myString = "Hello, world!";
console.log(myString.substring(0, 5)); // "Hello"
console.log(myString.substring(7));    // "world!"

 

주의할 점
1) 인덱스 범위
● indexStart가 indexEnd보다 크면, 함수는 두 값을 교환합니다.
● 인덱스 값이 문자열의 길이를 초과하면, 함수는 문자열의 길이로 취급합니다.
2) 음수 인덱스
● substring() 함수는 음수 인덱스를 0으로 취급합니다.

실제 사용 사례
1) 문자열 데이터 추출

● 로그 파일이나 문서에서 특정 정보를 추출할 때 유용합니다.

2) 문자열 처리

● 사용자 입력이나 문서 내용을 특정 형식에 맞게 가공할 때 사용할 수 있습니다.

 

대체 방법
1) slice() 함수 사용

● slice() 함수도 비슷한 기능을 제공하지만, 음수 인덱스를 문자열의 끝에서부터 계산합니다.

2) substr() 함수 사용

● substr() 함수는 시작 인덱스와 길이를 기반으로 부분 문자열을 추출합니다.

 

질문과 실습

1) 실습 : 다양한 문자열에 대해 `substring()`를 사용해보고, 다른 indexStart와 indexEnd 값을 실험해 보세요.

2) 응용 : `substring()`이 어떤 상황에서 유용할 수 있는지 생각해보고, 자신만의 예제를 만들어 보세요.

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] charAt(): 문자열에서 특정 위치의 문자를 반환  (0) 2024.01.25
[자바 스크립트] split(separator) : 문자열을 지정된 구분자로 나누기  (1) 2024.01.23
[자바 스크립트] 선택된 라디오 버튼의 값 가져오기  (0) 2023.12.14
[자바 스크립트] 클래스  (0) 2020.10.15
[자바 스크립트] arguments 객체  (0) 2020.10.15

함수 설명

1) split() 함수는 문자열을 지정된 구분자(separator)를 기준으로 여러 부분으로 나눕니다.

2) 이는 마치 문자열이 긴 줄이고, 구분자가 줄을 자르는 가위와 같습니다.

문자열은 긴 줄이고, 구분자(separator)는 줄을 자르는 지점을 나타냅니다.

3) 이 함수는 문자열을 구분자로 나누어 배열로 반환합니다.

 

기본 사용법

1) 구문

● 문자열.split(separator)

2) 예제

● "apple, banana, cherry"를 각 과일로 나누려면, "apple, banana, cherry".split(", ")을 사용합니다.

 

매개 변수

1) separator (구분자)

● 문자열을 나눌 기준이 되는 문자열입니다.

● 구분자가 지정되지 않으면 전체 문자열이 하나의 요소로 배열에 포함됩니다.

2) limit (선택적)

● 반환할 배열의 최대 크기를 지정합니다.

 

반환 값

1) 배열 반환

● 구분자로 나누어진 문자열의 각 부분을 포함하는 배열을 반환합니다.

 

사용 예제

let myString = "Hello World, how are you?";
console.log(myString.split(" ")); // ["Hello", "World,", "how", "are", "you?"]
console.log(myString.split("", 3)); // ["H", "e", "l"] (첫 3글자만 반환)
 

주의할 점

1) 구분자가 문자열에 없으면

● 구분자가 문자열 내에 존재하지 않으면, 전체 문자열을 하나의 요소로 하는 배열을 반환합니다.

 

실제 사용 사례

1) 문자열 데이터 파싱

● CSV(쉼표로 구분된 값) 같은 형식의 문자열을 각각의 데이터 요소로 나눌 때 유용합니다.

2) 문자열 분석

● 사용자 입력이나 문서 내용을 단어별, 문장별로 나누어 분석할 때 사용할 수 있습니다.

 

대체 방법

1) RegExp 사용

● 복잡한 패턴으로 문자열을 나누고 싶다면 정규 표현식을 사용하는 split()을 사용할 수 있습니다.

2) 반복문과 substring() 사용

● 문자열을 반복하면서 substring()을 사용하여 특정 부분을 추출하는 방법도 있지만, split()이 더 간단하고 직관적입니다.

 

질문과 실습

1) 실습 : 다양한 문자열과 구분자에 대해 `split()`를 사용해보고, 결과를 확인해 보세요.

2) 응용 : `split()`를 사용하여 어떻게 데이터를 처리하고 분석할 수 있는지 생각해보고, 자신만의 예제를 만들어 보세요.

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] charAt(): 문자열에서 특정 위치의 문자를 반환  (0) 2024.01.25
[자바 스크립트] substring(indexStart, indexEnd) : 문자열의 특정 부분 추출  (0) 2024.01.23
[자바 스크립트] 선택된 라디오 버튼의 값 가져오기  (0) 2023.12.14
[자바 스크립트] 클래스  (0) 2020.10.15
[자바 스크립트] arguments 객체  (0) 2020.10.15

라디오 버튼 선택




 

 

<!DOCTYPE html>
<html>
<head>
    <title>라디오 버튼 예제</title>
</head>
<body>

<h2>라디오 버튼 선택</h2>

<form>
    <input type="radio" id="hong" name="selected_name" value="홍길동" checked />
    <label for="hong">홍길동</label><br>
    
    <input type="radio" id="jeon" name="selected_name" value="전우치" />
    <label for="jeon">전우치</label><br>
    
    <input type="button" onclick="getValue()" value="선택된 값 확인" />
</form>

<script>
function getValue() {
    var radios = document.getElementsByName('selected_name');
    var selectedValue = "";
    for(var i = 0; i < radios.length; i++) {
        if(radios[i].checked) {
            selectedValue = radios[i].value;
            break;
        }
    }
    alert("선택된 값: " + selectedValue);
}
</script>

</body>
</html>

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] substring(indexStart, indexEnd) : 문자열의 특정 부분 추출  (0) 2024.01.23
[자바 스크립트] split(separator) : 문자열을 지정된 구분자로 나누기  (1) 2024.01.23
[자바 스크립트] 클래스  (0) 2020.10.15
[자바 스크립트] arguments 객체  (0) 2020.10.15
[자바 스크립트] 타이머 함수  (0) 2020.10.15

1. 객체의 인스턴스 생성 방법

var iUser = new CUserInfo();

 

2. 클래스 메서드(멤버함수) 만드는 방법

 

2.1. property 방식

function CTest(){

}

CTest.prototype.test = function(){

}

 

2.2. Object 방식

function CTest(){
    this.test = function(){
    
    }
}

 

2.3. 리터럴 방식

var testClass = {
    test:function(){
    
    }
}

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] split(separator) : 문자열을 지정된 구분자로 나누기  (1) 2024.01.23
[자바 스크립트] 선택된 라디오 버튼의 값 가져오기  (0) 2023.12.14
[자바 스크립트] arguments 객체  (0) 2020.10.15
[자바 스크립트] 타이머 함수  (0) 2020.10.15
[자바 스크립트] 여러 줄 입력  (0) 2020.10.15

 

 

arguments 란?

매개변수의 모든 정보가 담겨있는 객체

 

arguments를 사용하는 경우

매개변수를 선언하지 않고 매개변수 값에 접근하고자 할 경우

 

사용 예_

<!DOCTYPE html>
<html>
<head>
<title>arguments 객체</title>
<script type="text/javascript">
function showMeTheParameter() {
    // 전달받은 매개변수 갯수 출력
    console.log("arguments.length = " + arguments.length);

    // 전달받은 매개변수 각각 출력
    for (var i=0; i<arguments.length; i++) {
        console.log("arguments[" + i + "] = " + arguments[i] + "\n");
    }
}

showMeTheParameter(1,2,3,4,5);
</script>
</head>
<body></body>
</html>

 

결과_

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] 선택된 라디오 버튼의 값 가져오기  (0) 2023.12.14
[자바 스크립트] 클래스  (0) 2020.10.15
[자바 스크립트] 타이머 함수  (0) 2020.10.15
[자바 스크립트] 여러 줄 입력  (0) 2020.10.15
[자바 스크립트] 함수(Function)  (0) 2019.06.27

 

 

1초마다 "Hello World!!!" 호출하기

setInterval(function(){
    console.log("Hello World!!!\n");
}, 1000);

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] 클래스  (0) 2020.10.15
[자바 스크립트] arguments 객체  (0) 2020.10.15
[자바 스크립트] 여러 줄 입력  (0) 2020.10.15
[자바 스크립트] 함수(Function)  (0) 2019.06.27
[자바 스크립트] 랜덤 숫자 만들기  (0) 2019.06.26

방법 1. 

var str = '안녕\n하세요';
console.log(str);

 

방법 2.

var str = '안녕\n';
str += '하세요';
console.log(str);

 

방법 3.

// [es6] 역따옴표(` `) 사이에 문자열을 입력한다
let str = 
`안녕
하세요`;
console.log(str);

 

전체소스

<!DOCTYPE html>
<html>
<head>
<title>여러 줄 입력</title>
<script type="text/javascript">
var str1 = '안녕\n하세요';
console.log(str1);

var str2 = '안녕\n';
str2 += '하세요';
console.log(str2);

// [es6] 역따옴표(` `) 사이에 문자열을 입력한다
let str3 = 
`안녕
하세요`; 
console.log(str3);         
</script>
</head>
<body></body>
</html>

 

결과

 

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] arguments 객체  (0) 2020.10.15
[자바 스크립트] 타이머 함수  (0) 2020.10.15
[자바 스크립트] 함수(Function)  (0) 2019.06.27
[자바 스크립트] 랜덤 숫자 만들기  (0) 2019.06.26
[자바 스크립트] 형변환(문자->숫자, 숫자->문자)  (0) 2019.06.26

1. 매개변수에 데이터 전달하기

 

1.1. 함수의 매개변수가 두 개인데 값을 하나만 보내는 경우,

function test(param1, param2){
	console.log("param1 = " + param1 + ", param2 = " + param2);
}

test("첫 번째 파라미터 값");

param1에는 "첫 번째 파라미터 값", param2에는 undefined가 저장됩니다.

 

2. 변수에 함수 저장하기

function test(param){
	console.log(param);
}

var func = test;
func("Hello World!!!!");

 

3. 매개변수 값으로 함수 사용하기

function test1(param){
	console.log(param);
}
function test2(param){
	console.log(param);
}
function run(func, param){
	func(param);
}
run(test1, "test1");
run(test2, "test2");

function test3(){
	console.log("Hello World!!!");
}
$("#btnRun").click(test3);

 

4. 리턴값으로 함수 사용하기

function defaultFunc(){
	function search(condition){
    	console.log(condition);
    }    
    return search;
}

var run = defaultFunc();
run("조회");

 

5. 함수 리터럴 방식으로 함수 만들기

var test = function(param){
	console.log(param);
}

test("Hello World!!!");

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] 타이머 함수  (0) 2020.10.15
[자바 스크립트] 여러 줄 입력  (0) 2020.10.15
[자바 스크립트] 랜덤 숫자 만들기  (0) 2019.06.26
[자바 스크립트] 형변환(문자->숫자, 숫자->문자)  (0) 2019.06.26
[자바 스트립트] 입출력 함수  (0) 2019.06.26

1에서 10 사이의 랜덤 숫자 만들기

var num = parseInt(Math.random()*10)+1;
console.log("1에서 10사이의 랜덤 숫자 = " + num);

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] 타이머 함수  (0) 2020.10.15
[자바 스크립트] 여러 줄 입력  (0) 2020.10.15
[자바 스크립트] 함수(Function)  (0) 2019.06.27
[자바 스크립트] 형변환(문자->숫자, 숫자->문자)  (0) 2019.06.26
[자바 스트립트] 입출력 함수  (0) 2019.06.26

1. 문자를 숫자로 형변환

var moonja = "123";
var number = parseInt(moonja);

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] 타이머 함수  (0) 2020.10.15
[자바 스크립트] 여러 줄 입력  (0) 2020.10.15
[자바 스크립트] 함수(Function)  (0) 2019.06.27
[자바 스크립트] 랜덤 숫자 만들기  (0) 2019.06.26
[자바 스트립트] 입출력 함수  (0) 2019.06.26

 

 

1. 출력 함수

document.write("Hello World!!!", "<br>");

 

2. 입력 입력

var value = window.prompt("입력해주세요.");

 

 

'잡동사니 > JavaScript' 카테고리의 다른 글

[자바 스크립트] 타이머 함수  (0) 2020.10.15
[자바 스크립트] 여러 줄 입력  (0) 2020.10.15
[자바 스크립트] 함수(Function)  (0) 2019.06.27
[자바 스크립트] 랜덤 숫자 만들기  (0) 2019.06.26
[자바 스크립트] 형변환(문자->숫자, 숫자->문자)  (0) 2019.06.26

+ Recent posts

티스토리툴바