[Javascript] 배열에서 특정 문자/문자열 찾기(indexOf/ lastIndexOf/ includes/ find/ filter/ some/ search)

01 indexOf() - 인덱스 반환 배열 요소의 위치를 찾고자 하는 경우에 사용 있으면 해당 요소의 배열 인덱스를 반환하고 없으면 -1을 반환한다. 대소문자와 공백을 구분 const arr = ['one', 'two', 'three']; console.log(arr.indexOf('one')); // 0 Array.indexOf()에 2번째 인자로 시작할 인덱스 번호를 넣을 수 있다. 첫 번째 인자는 배열에서 찾을 요소를 넣었다면, 두번째 인자는 선택사항으로 해당 배열에서 시작하고자 하는 위치를 넣어 검색할 수 있다. 기본값은 0이며 배열의 크기보다 인덱스를 크게 잡는 경우 -1이 리턴된다. const arr = ['one', 'two', 'three']; console.log(arr.indexOf(..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 8.
• textsms

[Javascript] 클릭이벤트 강제 발생

보통 onclick이나 onkeyup, onkeypress 등 클릭 또는 키보드 입력으로 인해서 이벤트를 발생시키게 하기 위해서 지정해둔 함수를 호출해오곤 하는데 함수호출을 하지 않아도 바로 작성해서 강제로 이벤트가 발생하도록 할 수 있다. 엔터키를 누르면 search함수가 실행되도록 하는 코드이다. onkeyup에 바로 코드를 넣어줌으로써 엔터키를 누르고 떼는 순간 search함수가 실행된다. 다음은 col이라는 카드를 클릭하면 그 카드에 담긴 영화의 ID를 alert창에 띄워주는 코드이다. 역시 클릭을 하고 떼는 순간에 alert창이 뜨고 영화의 ID를 가져옴을 알 수 있다.

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 8.
• textsms

[CSS] 그림자 붙이기

.first{ border-radius:3px; box-shadow:3px 3px 3px 3px #999;} .second{ border-radius:50%; box-shadow:-3px -3px 3px 6px #093;} .third{ border-radius:3px; transform-origin:50% 50%; transform:rotate(20deg); box-shadow:3px 3px 0px -1px #F00;}

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 8.
• textsms

[Javascript] 대소문자 구분 없이 비교하기 : toUpperCase(), toLowerCase()

🍀 toUpperCase( ), toLowerCase( ) 🍀 toUpperCase( ) 는 문자열을 대문자로 변환하며, 변환 후 두 개의 문자열이 같은지 비교하면 됌 let a = "hello world"; let b = "Hello World"; if (a.toUpperCase() === b.toUpperCase()){ alert("두 값이 같습니다") } else { alert("두 값이 다릅니다") } // 두 값이 같습니다 toLowerCase( ) 는 문자열을 소문자로 변환하며, 변환 후 두 개의 문자열이 같은지 비교하면 됌 let a = "hello world"; let b = "Hello World"; if (a.toLowerCase() === b.toLowerCase()){ alert("..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 8.
• textsms

[Javascript] body 내용 초기화

body 태그 안에 있는 HTML 요소들 중 내용을 초기화 하고 싶을때는 innerHTML 을 사용하면 된다. innerHTM은 동적으로 HTML을 추가하는 것으로 내용을 추가하는 것도 가능하지만 이것을 활용하여 body 태그 안의 요소들을 전부 초기화시키거나 원하는 위치의 부분을 초기화시킬 수도 있다. document.querySelector('#card').innerHTML=''; // 검색 시 조건에 맞는 영화만 출력하기 위해 비우기 반대로 내용을 추가할때는 아래와 같이 내용을 추가해줄 수 있고 let myHTML = document.querySelector('#card'); let add = ''; add += '내용을 추가'; myHTML.innerHTML = add; 더 나아가서 이전에 했었던..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 8.
• textsms

[CSS] 글자 굵기 지정 : font-weight

font-weight로 글자의 굵기를 지정한다. font-weight: normal | bold | bolder | lighter | number | initial | inherit normal : 보통 굵기 ( == 숫자 400) bold : 굵은 굵기 ( == 숫자 700) bolder : 상속된 값보다 굵은 굵기 lighter : 상속된 값보다 얇은 굵기 number : 100, 200, 300, 400, 500, 600, 700, 800, 900 initial : 기본값으로 설정 inherit : 부모 요소의 값을 상속 .normal { font-weight: normal; } .bold { font-weight: bold; } .100 { font-weight: 100; } .200 { font..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 8.
• textsms