본문 바로가기

분류 전체보기

 (108)
[Javascript] map() arr.map(callback(){ return }); map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 적용하고 호출한 결과를 모아 새로운 배열에 반환한다. 몇일전에 forEach문을 이용해서 배열생성을 했는데 별로 좋은 방법이 아니고, 이럴땐 맵핑을 해주는게 더 좋은 방법이라고 한다. 저번에 했을 때 Array()를 이용해 빈 배열을 먼저 만든 후 거기에 값을 넣어주었다. [undefined,undefined,undefined]
[Javascript] fill( ) 메서드 fill() 메서드는 배열의 모든 요소에 정적인 값으로 채워준다. arr.fill( value , start , end ); value는 배열을 채울 값이다. start는 시작 인덱스를 의미한다. 이때 기본값은 0이다. end는 끝 인덱스로 기본값은 this.length이다. 만약 start가 음수라면 배열의 길이 + start end가 음수라면 배열의 길이 + end 1번- 매개변수가 value만 있다. 배열의 모든 요소를 5로 바꿔주면 된다. 2번- 매개변수로 value와 start만 있기 때문에 끝위치는 생각해 줄 필요 없다. 시작 위치가 인덱스 1이므로, 배열[1]부터 끝까지 5로 채워주면 된다. 3번- 시작 위치는 1, 끝 위치는 2이므로 배열[1]만 5로 바꿔준다. 끝위치로 지정해준 배열[2]..
[Javascript] forEach문, Array( ), fill( ) 1. array.forEach( function(value, index, array ){ }); value는 해당 배열의 모든 요소 index는 해당 배열의 위치(순서) array는 해당 배열 자체를 의미한다. * 배열의 요소만 사용하고 싶다면 매개변수를 value만 주면 되지만, array를 사용하고 싶다면, value와 index를 사용하지 않는다고 하더라도 매개변수안에 넣어주어야한다. index도 마찬가지로 매개변수로 array는 넣어줄 필요 없지만 value는 꼭 넣어줘야한다. 2. forEach문을 이용하여 배열 값 뿌려주기 Array(숫자)를 이용하여 빈배열을 만들 수 있다. 이때 만들어진 배열의 값은 empty를 가지게 된다. 보통은 [ ] 를 이용해서 배열을 만들지만 숫자가 큰 배열을 만들..
[Javascript] append( ) VS appendChild( ) Append( ) VS AppendChild( ) 1. append()는 Node Object와 Dom String 을 추가할 수 있지만 appendChild()는 오직 Node Object만 추가 할 수 있다. appendChild()를 이용해 Dom string을 추가하려고 하면 에러가 뜬다. Uncaught TypeError : Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' 매개변수의 값이 Node가 아니라고 에러가 뜨는것을 확인 할 수 있었다. 2. append()는 값을 반환할 수 없지만 appendChild()는 Node Object를 반환 할 수 있다. 3. append()는 여러개의 값을 함께 추가할..
[Javascript] 틱택토 틱택토란?! 두 명이 번갈아 가면서 3X3의 판에 O와 X를 써서 가로 , 세로 또는 대각선 상에 먼저 한줄을 만들면 이기는 게임이다 . 틱택토 순서도 1. 3 X 3 칸을 만들어 준다. / 턴 = X 2. 한 칸을 클릭한다. 3. 칸이 이미 채워져 있는가? 3.1 Yes. 2번으로 이동 (다시 한칸을 클릭한다.) 3.2. No. 4번으로 이동 ( 칸에 표시해준다. ) 4. 칸에 '턴'을 표시한다. ( 턴은 X 또는 O ) 5. 가로 또는 세로 또는 대각선중에 동일한 턴으로 한줄이 완성되었는가?? 5.1. Yes. 해당 턴의 승리!! 5.2. No. 턴을 바꾸고 (X -> O 또는 O ->X ) 2번으로 이동 Dom 객체와 이차원 배열을 이용해 3X3 칸을 만들어 주었다. 각 칸마다 addEventLis..
[Javascript] 숫자야구 (3) + 추가 저번에 했던 숫자야구에 내가 입력한 답들을 기록해 놓으면 더 좋을 것 같아 추가해보았다. ol태그를 document.createElement()를 이용해 생성하고, 입력한 답이 틀리면 li태그를 같은 방법으로 생성해 틀릴때마다 내가 입력한 답을 보여줄 수 있도록 하였다. 홈런이 되거나 10번의 기회가 끝나서 새로운 문제가 생성되면 기록한 리스트 목록을 지우고 처음부터 다시 기록할 수 있도록 하였다. innerHTML innerHTML은 해당 태그안에 포함되어 있는 하위 태그들을 설정 시킬 수 있다. 그래서 innerHTML의 값을 설정하면 안에 있던 모든 태그 요소들이 사라지고 새로 입력한 내용으로 재설정 된다. ol.innerHTML = ''; 으로 하여, ol태그의 안에 있는 (이때 ol태그는 포함 ..
[Javascript] indexOf( ) indexOf() 문자열.indexOf("찾으려는 문자 또는 문자열") 문자열에서 특정 문자열의 시작 위치값을 리턴해 준다. 특정 문자열이 없다면 -1을 리턴시켜준다. str 변수에서 'World'란 값을 찾아 그 문자의 첫번째 인덱스값을 리턴해준다. str에서 'World'는 6번째 인덱스부터 시작한다. 그래서 6을 리턴해준다. 문자열.indexOf("찾으려는 문자 또는 문자열", 시작할 위치) 시작 위치를 5로 주었더니, 0번째에 위치한 Hello가 아닌 13번째 위치에 있는 Hello의 위치를 콘솔창에 출력한다. 찾는 문자열이 없으면 -1을 반환한다. 찾고자하는 문자가 존재하지않으면 -1을 반환한다. 배열에서 위치값 찾기 배열의 경우도 indexOf를 이용해 인덱스값을 반환받을 수 있다. "cat"..
[Javascript] split과 join /문자열 나누기와 합치기 1. split() - 문자열 나누기 문자열.split(구분자) => 배열 문자열을 구분자를 기준으로 나누어 배열로 만들어 준다. 2. join() - 배열 합치기 배열.join(구분자) => 문자열 배열에 구분자를 추가하여 문자열로 만들어 준다. 3. 배열과 문자열 비교 배열로 만들어 배열끼리 비교한 것은 false. 배열은 주소값이 다르기 때문에 서로 비교 되지않는다. 배열끼리 비교하는거 좀 더 생각해 봐야겠다... for문 돌려서 하는 방법밖에 없는건가ㅏㅏㅏㅏㅏㅏㅏㅏ

티스토리툴바