>함수
- 자바스크립트에서는 함수도 하나의 타입이다.따라서 함수를 변수에 대입할 수 있다.
: 다른 함수 내에 중첩되어 정의할 수도 있다.
function 함수이름(매개변수1, 매개변수2,...){
실행할 문장
return 리턴값;
}
1. 함수의 선언과 호출
1) 함수의 선언
function count() {
for (let i= 0; i<10; i++){
console.log('i' ,i )
}
}
2) 함수의 호출
count();
2. 함수를 선언하면서 바로 호출
( function show(data){
alert("show() 함수가 호출되었습니다. +data")
}) (10);
>디폴트 매개변수
- 매개변수를 정하지 않으면 기본값을 대신 변수에 저장한다.
fuction 함수이름(매개변수1, 매개변수2=값,...){
실행할 문장
return 리턴값;
}
>나머지 매개변수
- 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있다.
- 함수 선언문 위에 함수를 호출할 수 있다.
function 함수이름(매개변수1,...매개변수2){
...
}
>함수 표현식
-자바스크립트는 함수를 변수에 저장할 수 있으므로 익명함수를 선언하여 특정 변수에 넣어준다.
:함수 호출시 함수 선언문 밑에서 해야한다.
(호이스팅이 일어나서 변수를 선언 초기화 까지 해야 함수를 호출할 수 있다.)
const 함수명 = function(매개변수1, 매개변수2,...){
...
}
>호이스팅
- 자바 스크립트의 함수 선언이나 var변수의 경우 호이스팅이 일어난다. 선언문들은 가장 최상단으로 끌어올려서 실행하는것을 호이스팅이라고 한다. 함수 안에 필요한 변수값들을 모두 모아서 유효범위의 최상단에 선언을 한다.
>화살표 함수
- function 키워드를 사용하여 함수를 만드는 것보다 간단하게 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수이다.
const 함수명 = (매개변수1, 매개변수2,...) =>{
}
>String 객체
- 문자열을 쉽게 만들고 다룰 수 있게 한다.
const str = "문자열";
const str = new String("문자열");
ex) const str1 = "Hello Javascript!";
length:문자열의 길이를 알려준다.
console.log('문자열의 길이:'+str1.length) //17
indexOf():원하는 문자의 인덱스를 알려준다.
console.log('J의 인덱스:'+str1.indexOf('J')) // 6
console.log('a의 뒤에 있는것의 인덱스:'+str1.lastIndexOf('a')) // 9
charAt():문자열의 n번째 글자를 알려준다.
console.log('문자열의 6번째 글자:'+str1.charAt(6)) // J
console.log('문자열의 6번째 글자:'+str1[6]) // J
includes():문자열의 포함여부를 알 수 있다.
console.log('Java 문자열의 포함여부:'+str1.includes('Java')) //true
substring():원하는 글자부터 n까지 출력해준다.
console.log('6번째 글자부터 끝까지:'+str1.substring(6)) //Javascript!
console.log('6번째 글자부터 10전까지:'+str1.substring(6,10)) //Java
substr():원하는 부분부터 n글자까지 출력해준다.
console.log('6번째부터 4글자:'+str1.substr(6,4)) //Java
split():문자열을 원하는 대로 나눠준다.
const str2 = "cherry/banana"
console.log(str2.split("/")) //cherry, banana
replace():문자열을 대체해준다.
let str2 = "cherry/banana"
str2 = str2.replace("cherry","durian") // durian/banana
trim() :enter 친 공간을 없애준다.
const str3 =" result "
console.log(str3.trim()) //result
>Math 객체
- 수학에 관련된 여러 메소드들을 가지고 있는 객체
min():최소값
Math.min( ) // Infinity
max():최대값
Math.max() // -Infinity
#max, min메소드는 인자로 받은것중에 최댓값, 최솟값을 반환한다. 그러므로 max인자값에 아무것도 없다면 가장 큰것은 자바스크립트가 인지하는 수 중 최솟값인 -infinity가 될 것이고 min의 경우에는 최솟값이 자바스크립트가 인지하는 수 중 최댓값인 infinity가 될 것이다.
round():반올림
Math.round(10.49) //10
floor():내림
Math.floor(10.49) //10
ceil():올림
Math.floor(10.49) //11
random():랜덤숫자 만들기:0이상 1미만의 난수 *난수: 정의된 범위안에서 무작위로 추출된 수
-이 객체를 통해 우리는 랜덤숫자를 뽑아낼 수 있다.
ex)1~10까지 숫자를 뽑아낼 경우
Math.floor(Math.random()*10)+1
0.000000... ~ 0.99999999
*10 : 00.000000~ 9.999999
floor: 0 ~ 9
+ 1 :1 ~ 10
>객체
- 프로퍼티와 메소드들을 하나로 가지고 있는 집합체
(프로퍼티는 마치 자바에서의 변수와 비슷하다.)
<객체 선언>
1.리터럴 표기법
const 객체명 = {
프로퍼티1:값1,
프로퍼티2:값2,
...
메소드명:function(){
...
}
}
2.생성자를 이용해 선언
function 생성자명(매개변수1,매개변수2,...){
this.프로퍼티1= 값1;
this.프로퍼티2= 값2;
}
*자바와 자바스크립트의 생성자의 차이
자바에서는 생성자가 클래스의 필드(붕어빵틀)를 똑같이 복사해서 하나의 객체를 찍어내는 역할을 한다.
그래서 그저 생성자를 호출 시 초기화만 해준다. 그러나 자바스크립트에서의 생성자는 결과는 비슷하지만
클래스라는 개념이 존재하지 않기 때문에 필드를 아예 새롭게 적은 코드를 읽어나가며 만들어 나가는 것이다.
>프로토타입
- prototype은 사전적 의미로 원형이라는 뜻을 가지고 있다.
- 자바스크립트의 모든 객체는 프로토타입이라는 객체를 상속받는다.
- 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 그 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. 생성자를 선언하면 자신의 내용으로 인해 만들어지는 초기모델 객체를 프로토타입으로 가지고, Object.prototype도 가지고 있다.
*쉽게 설명을 하자면 우리가 처음에 객체를 만들때 생성자를 선언해서 호출한다. 그 때 만들어진 객체를 초기모델이라고 하며 다른말로는 prototype 이라고 한다. 그래서 이 모델을 상속받아서 객체들을 사용할 수 있다. 이 모델을 자바에서의 클래스와 비슷한 역할을 한다고 생각하면 될 것 같다.
생성자명.prototype --> 해당 생성자의 프로토타입
car라는 prototype이 있었을때 mycar, dadcar, momcar등등 객체를 만들어낼 수 있다. 또한 자바스크립트에서는
새로운 프로퍼티+값을 넣을 수 있다. 예를 들어 현재 mycar에는 brand와 color와 price밖에 없는데 wheel :4 인 정보를 넣고 싶을 경우 mycar.wheel = 4; 로 직접적으로 객체에 프로퍼티를 넣을 수 있다. 그러나 원형인 car는 변하지 않는다.
그래서 dadcar.wheel ,momcar.wheel 은 변하지 않는다. 그러므로 우리는 원형을 바꿔주면 된다.
Car.prototype.wheel=4;
위의 코드를 작성하면 이제 dadcar.wheel ,momcar.wheel 모든 car를 상속받고있는 객체들은 다 wheel 프로퍼티를 갖게 될 것이다.
---------------------------------------------------------------------------------------------------------------------------------
<함수예제1-table>
1.요금표 table을 만들어라
2.텍스트 입력하는 칸 만들고 옆에 조회 버튼을 만들어라
3.텍스트칸에 아동,성인,청소년중 하나를 입력하게 해라
-input의 입력값(value)를 읽어와야한다.
const age1 = document.getElementbById("age").value;
4.텍스트칸에 입력했을시 그 텍스트가 있는 테이블 style 변경하게 하기
* 테이블안의 아동or청소년or성인 행 배경 색깔 바뀌게 하기
* 아동or청소년or성인 앞에 ★붙이게 하기
1) tr 과 td 를 읽어와야 한다.
id인 kids teens adult 를 아동 청소년 성인에 대입하기 위하여 배열로 만들어 준다
(1) let arAge = ['아동','청소년','성인'];
let arId = ['kids','teens','adult'];
(2) For문 이용하여 tr과 td 를 id를 써서 데려오기.
for(let i =0; i<arAge.length; i++){
const tr = document.getElementById(arId([i]);
const td = document.getElementById(arId[i]+"-txt");
}
(3) style을 변경해준다.
tr.style.background = "blue";
td.innerHTML = '★' +td.innerHTML;
**주의
-아동을 반복 입력했거나 아동 청소년 성인 입력했을때 중복되서 배경의 색깔이 변하는것과
★이 늘어나는 것을 막아야 한다.
:초기화 필요= 위에서 FOR문 써서 배경색도 원래대로 글도 그대로 바꿔준다.
-아동,성인,청소년이 아닐경우 아동,청소년,성인 중 입력해주세요 뜨게 하기.
: flag , alert 이용하기.
5.조회버튼을 누르지 않아도 텍스트칸에서 enter눌렀을 시 실행되도록 만들기
1)input txt에 onkeyup 에 새로운 함수를 추가한다.
onkeyup: 키보드를 눌렀다 땔때 수행되는 것.
*한개의 글자를 쓸때마다 함수가 수행되기 때문에 우리는 enter가 눌릴때만 함수가 수행되도록
조건문을 만들어 주어야 한다. enter의 아스키코드는 13이다.
function enterkey(){
if(event.keyCode==13){
tb(); //버튼 눌리게 하기
}
}
<함수예제2-가위바위보게임>
컴퓨터는 가위,바위,보 중 하나를 선택한다. 프롬포트로 입력을 해서 이기면 성공
컴퓨터 : 가위
프롬포트로 입력받기: 가위, 바위, 보 중 선택하세요
입력: 가위
<body>: 컴퓨터:가위 /나:가위
비겼습니다!(이겼습니다! 종료합니다!)(졌습니다!)
-------------------------
1.가위바위보 게임하기 버튼을 눌렀을때 수행하기
<input type="button" onclick="rsp() "></input>
2.컴퓨터가 가위,바위,보 중 하나를 선택한다.
랜덤으로 선택해야 하므로 math.random 을 사용하고 가위 바위 보를 배열에 넣어주자
let index = ['가위','바위','보'];
let com = Math.floor(Math.random()*3); //0:가위 1:바위 2:보
for(let i=0; i<index.length; i++){
if(user==index[i]){
user=i;
break;
}
}
3.가위,바위,보 중 선택하세요 뜨게 해서 입력값 받기
let user = prompt("가위,바위,보 중 선택하세요");
4.컴퓨터가 이기거나 지거나 비기면 body에 정해진 글 작성해주기
-컴퓨터가 낼 경우의 수 0 1 2
*컴퓨터가 이기려면 user 는 1 2 0 이렇게 내야한다. 여기서 우리는 코드를 활용할 수 있다.
if(user==com+1 || user==com-2){
document.write(`컴퓨터: ${index[com]} / 나: ${index[user]}<br>이겼습니다! 종료합니다!<br>
------------------------<br>`);
}else if (user == com ){
//비길때
}else {
//졌을때
}
*이길때까지 무한 반복하기.(무한while문 사용하기)
<함수예제3-숫자를 한글로 변경하기>
input박스에 숫자를 입력한 후 변경 버튼을 누르면 위의 textarea에 결과를 한글로 표시해라
1.input 박스와 텍스트 박스를 읽어와라.
<input type="text" id="input"></input>
<textarea id="ta"></textarea>
const input = document.getElementById("input");
const ta = document.getElementByld("ta");
let data = input.value;
2.변경버튼 눌렀을때 변경 되어야 하므로 button에도 속성주기.
<button onclick="change()">변경</button>
3.입력한 숫자를 한글로 처리하기
1)한글 변수에 담아두기
let hangle = "공일이삼사오육칠팔구";
2)input 값 문자열로 인식해야 한개씩 문자 데려올 수 있음
let result = "";
3)for문 이용하여 누적해주기
for(let i=0; i<data.length;i++){
result += hangle[data[i]]; // data:"1024" hangle['1'] --> '1','0','2','4'
}
4)점의 경우 찾을 수 없기때문에 undefined라고 뜰것이다. 그러므로 이것만
replace 메소드를 활용하여 점으로 바꾸어 누적 연결해준다.
result = result.replace("undefined","점");
ta.innerHTML = result;
4.숫자만 입력하게 하기
isNaN(data) 메소드 사용하여 숫자가 아닐경우 숫자만 입력해주세요를 결과값에 넣기.
if(isNaN(data)){
ta.innerHTML = "숫자만 입력해주세요";
}
'프로그래밍 > Javascript' 카테고리의 다른 글
| Javascript 5일차 - 이벤트, jquery (0) | 2022.01.14 |
|---|---|
| Javascript 4일차 -노드생성_복제_제거, 폼객체 (0) | 2022.01.13 |
| Javascript 3일차 -window객체,Date객체,DOM, 노드 (0) | 2022.01.12 |
| Javascript 1일차 - 탄생배경, 문법 (0) | 2022.01.10 |