안녕하세요. 내일이면 일본여행가는 진쓰입니다.

자바스크립트 8장 내장객체 - String 객체의 속성과 메소드 포스팅 시작하겠습니다.



목차

1. string객체 특징

2. string객체 속성

3. string객체 메소드



1. string객체 특징

- 자바스크립트에서 문자열을 다루는 객체입니다.

문자열 객체 생성방법 2가지가 있습니다.


- 예)

 var str = new String(“Have a nice day!”)

 var str=“Have a nice day!”



2. string객체 속성

length : 문자열의 개수를 나타냅니다.


예)

- var str=“Nice to meet you!”

- cnt  = str.length

- document.write(cnt) == 17



<html>

<head>

<title> 8장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">


var str = new String("Have a nice day!");

var str2 = "Have a nice day!~!";

document.write(str.length+ " " + str2.length +"<br>");

</script>

</body>

</html>

 




3. string객체 메소드 들입니다.


메소드

기능

charAt(index)

index 위칭의 문자를 알아냅니다.

concat(문자열)

두 문자열을 하나의 문자열로 만듭니다.

indexOf(문자열)

왼쪽부터 문자를 검색 후 지정된 위치의 문자를 알아냅니다.

lastIndexOf()

오른쪽부터 문자를 검색 후 지정된 위치의 문자를 알아냅니다.

slice()

문자열의 일부분을 추출해냅니다.

split()

문자열을 분리 시킵니다.

substr()

문자열을 추출 해냅니다.

subString()

문문자열을 추출 해냅니다.

toLowerCase()

문자열을 소문자로 만듭니다.

toUpperCase()

문자열을 대문자로 만듭니다.



메소드

기능

charAt(index)

index 위칭의 문자를 알아냅니다.

concat(문자열)

두 문자열을 하나의 문자열로 만듭니다.

indexOf(문자열)

왼쪽부터 문자를 검색 후 지정된 위치의 문자를 알아냅니다.

lastIndexOf()

오른쪽부터 문자를 검색 후 지정된 위치의 문자를 알아냅니다.

slice()

문자열의 일부분을 추출해냅니다.

split()

문자열을 분리 시킵니다.

substr()

문자열을 추출 해냅니다.

subString()

문문자열을 추출 해냅니다.

toLowerCase()

문자열을 소문자로 만듭니다.

toUpperCase()

문자열을 대문자로 만듭니다.


.


<html>

<head>

<title> 8장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">


document.write("글자를 크게 ".big() + "글자를 작게".small() + "<p>") 

document.write("글자를 굵게 ".bold() + "글자의 타자기체".fixed() + "<p>") 

document.write("글자의 이탤릭체 ".italics() + "글자 가운데 줄(취소선)".strike() + "<p>") 

document.write("글자의 아래첨자 ".sub() + "글자의 위첨자".sup() + "<p>") 

document.write("글자크기 ".fontsize(7) + "글자색".fontcolor("red") + "<p>") 

</script>

</body>

</html> 

 



<html>

<head>

<title> 8장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">

var str1 = "korean power";

var str2 = "한국인의 힘";

var str3 = "인삼드세요~";


document.write("일 : " + str1.length + "<br>") ;

document.write("이 : " + str2.length + "<br>") ;

document.write("삼 : " + str3.length );

</script>

</body>

</html>

 




감사합니다. 여러분도 어서 휴가가세요. :)



'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 객체 생성 및 접근  (0) 2017.11.30
자바스크립트 자료형  (0) 2017.11.30
자바스크립트 Date 객체 (7장)  (0) 2017.06.13
자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 함수의개요 및 내장함수(5장)  (0) 2017.06.11

안녕하세요. 진심으로 풀스택개발자가 되고싶은 진쓰입니다.



목차입니다.

1. Date 객체 특징

2. 예제




1. Date 객체 특징


- 날짜와 시간에 대한 객체생성 할 수 있습니다.

객체 생성 형식 : today = new Date() 이용합니다.


- 현재 날짜 시간에 대한 정보 가져오는 메소드들 입니다.

    getYear(), getMonth(), getDate(), getDay(),

 getHours(), getMinutes(), getSecomds(), getTime()


- 현재 날짜 시간에 대한 정보 세팅하는 메소드들 입니다.

    setYear(), setMonth(), setDate(), setDay(), 

setHours(), setMinutes(), setSecomds(), setTime()


parse(날짜) : 1070년 1월 1일 00:00:00 이후의 경과 시간을 1000분의 1초 단위로 리턴한다.


- toLocalString() : 날짜를 문자열 형식으로 변환한다.


<html>

<head>

<title> 7장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">

var Today = new Date() 

var year = Today.getFullYear()

document.write("년도: "+year+"<br>");

 


var month = Today.getMonth() + 1

document.write("월: "+month+"<br>");

 

 

var date = Today.getDate()

 document.write("날짜: "+date+"<br>");

 

 

var hour = Today.getHours()

var minute = Today.getMinutes()

var second = Today.getSeconds()


document.write("현재 시간 : ") 

document.write(hour + "시 " + minute + "분 " + second + "초 </h4>")  

</script>

</body>

</html>

 



2. 예제

- 1초마다 배경색이 달라지는 프로그램 작성해보겠습니다. (단, if문을 이요해서 작성합니다.)

<html>

<head>

<title> 7장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">

  var now = new Date();

document.write(now.getSeconds()+"<br>");

if(now.getSeconds()%2==0){

document.bgColor = "pink"; 

}

else{

document.bgColor = "lightblue";

}

</script>

</body>

</html> 

 



고생하셨습니다. 저는 일본여행을 다녀오겠습니다 :)

'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 자료형  (0) 2017.11.30
자바스크립트 String 내장객체 (8장)  (2) 2017.06.14
자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 함수의개요 및 내장함수(5장)  (0) 2017.06.11
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09

안녕하세요. 깊게학습한것을 현업에 써먹고싶은 진쓰입니다.

자바스크립트 객체, 배열 포스팅 시작하겠습니다.

같이 묶은이유는 둘다 객체 개념으로 이해하시면 되기때문입니다.

new라는 예약어를 통해 배열과 객체는 생성하실 수 있습니다.




1. 객체 정의

- 객체를 사용하기 때문에 객체기반언어 입니다.

- 객체는 속성(property)과 methods 를 가집니다.

- function으로 정의된 생성자 함수의 객체의 정의는 new를 이용합니다.

- 생성자함수 안에는 this라는 예약어를 이용해 정의합니다.




2. 객체 사용방법

일반적인 객체지향언어에서의 사용법과 동일합니다.


- 즉 객체이름 다음에 점(.)을 찍고 속성이나 메소드를 써주면 됩니다.



* 객체 선언방법 


function grade(Name, kor, eng, mat)

{ 

  this.name = Name 

  this.kor = kor 

  this.eng = eng 

  this.mat = mat 

}


메소드선언에도 사용하는 function이라는 키워드가 사용됨을 보실 수 있습니다.

또한, 파라메터 역시 적어주는데, 개발자 임의로 정할 수 있습니다.

this 라는 예약어를 통해, 객체의 멤버변수와, 함수를 저장할수 있습니다.



<html>

<head>

<title> 6장 예제 </title>

<script language="javascript">

function print(){

document.write(this.name+"<br>");

document.write(this.kor+"<br>");

document.write(this.eng+"<br>");

}

function Score(name, kor, eng)

{

this.name = name;

this.kor = kor;

this.eng = eng;

this.print = print;

}

</script>

</head>


<body>

<script language="javascript">

jinss = new Score("진쓰", 100, 80);

park = new Score("영수", 70, 50);


jinss.print();

park.print();

</script>

</body>

</html>

 

name, kor, eng 멤버변수를 가지는 Score라는 객체를 정의했습니다.

그리고 print라는 메소드를 정의해서, 객체내의 print 멤버변수가 print 메소드를 가르키도록 했습니다.


또한 객체를 생성할때는 new라는 예약어를 사용하시는것을 볼 수 있습니다.


3. 객체배열 특징


 -내장객체 Array 객체를 의미한다.

- 접근 방법

   배열이름[인덱스] : 인덱스는 0부터 시작 합니다.


- 생성방법

  배열이름 = new Array(개수)


- 예) 

   Arr_Name = new Array(10)



 <html>

<head>

<title> 6장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">

my_array = new Array(5);

my_array[0] = "가";

my_array[1] = "control & instrumentation";

my_array[2] = "유튜브";

my_array[3] = "Jinss";

my_array[4] = "mybuddy";

for(var i=0;i<5;i++){

document.write(my_array[i]+" ");

}

</script>

</body>

</html>

 

객체 배열을 선언할때도 new라는 예약어를 사용하여 생성합니다.

예제에서는 다양한 문자열을 넣고 출력하는것을 확인할 수 있습니다.

자료형을 배열로 선언하였기 때문에, 연속적인 인덱싱으로 접근할 수 있습니다.

여기서는 for문을 통해서 접근하는 예제를 보실 수 있습니다.


.


4. array객체 메소드


- join() : 배열을 하나의 문자열로 만들어준다.

- sort() : 배열의 값들을 순서대로 정렬한다.

- reverse() : 배열안에 값들을 순서대로 재정렬시킨다.

- concat() : 두 개배열을 하나의 배열로 만든다.

- slice() : 배열의 일부분의 값을 추출 합니다.


 <html>

<head>

<title> 6장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">

my_array = new Array("사과","배","바나나");

for(var i=0;i<3;i++){

document.write(my_array[i]+"<br>");       //배열 전체 출력합니다.

}

document.write( "<br><br>");

document.write( my_array.join()+"<br>");      //하나로 합칩니다.

document.write( "<br><br>");

document.write( my_array.join("와 ")+"<br>");    // 합칠때 "와" 로 합칩니다.

document.write( my_array.join("& ")+"<br>");    //합칠때 &로 합칩니다.

array1 = new Array("오징어", "낙지", "문어","꼴뜨기");     //1번 인덱스전껄 자르고, 3번인덱스이상부터 짜릅니다.

array2 = array1.slice(1,3);


document.write(array2); 

</script>

</body>

</html>

 



힘찬 월요일 시작해봅시다! 감사합니다. :)

'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 String 내장객체 (8장)  (2) 2017.06.14
자바스크립트 Date 객체 (7장)  (0) 2017.06.13
자바스크립트 함수의개요 및 내장함수(5장)  (0) 2017.06.11
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09
자바스크립트 제어문(1), if, switch (3장)  (0) 2017.06.09

+ Recent posts

티스토리툴바