String 내장 객체

-> 최신표준(ES6)

length(properties)

charAt : String으로 저장된 문자열 중에서 '한글자'만 선택해서 char타입으로 변환해주는 것

-> 특정 인덱스에 위치하는 문자

-> 자바 = 자바스크립

substr : 오라클 - 사용법 같음

-> 인덱스 한개, 글자수 하나(몇번 인덱스부터 몇개 지정)

-> 글자 수 생략 : 모든 글자

slice() : 배열로부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용한다

문자열 연결

-> - 인덱스를 붙임

-> -(마이너스) 인덱스를 지원하는 메소드 : slice
-> -(마이너스) 인덱스 지원 : 파이썬
Script : 뒤에서 6글자

오라클 문자열 연결 : ||

-> 2번째 글자 : a => 1 (1번 인덱스)

indexOf, lastIndexOf

match함수 넣으면 특정 문자열이 중간에 포함되어있는지 검사 가능

padEnd() : 현재 문자열에 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다(채워넣기는 대상 문자열의 끝(우측)부터 적용된다)

-> string에서 java만 빼는 과정 : substring, substr 어떤걸 써도 상관없음( 0,4로 같았음 )

-> 10글자가 될때까지 *(에스터리스크)를 채우시오

-> 마스킹도 몇글자냐에 따라서 글자수반영해서 하는것이 좋음

replace

정규식 패턴을 써서 모든걸 바꾸게 처리할 수도 있지만 넘어감

replaceAll

-> replace는 한개만 바꾸고 replaceAll은 전체바꿈

-> (자바) replace, replaceAll 모두 다 바꿈(발견된 것 다 바꿈, 전달된 인수의 성격이 다름)

replace : 문자열 전달해서 문자열 바꿔달라고 시킴

replaceAll : 정규식 패턴을 전달해서 바꿔달라고 시킴

toLowerCase

서버에 포함된 local 환경에 따라

toUpperCase

TrimStart() : 현재문자열에서 선행 공백 문자를 모두 제거한다.

TrimEnd() : 현재문자열에서 후행 공백 문자를 모두 제거한다.

-> ★중간공백은 안없앰

alias(앨리어스) 별명

-> trimLeft 쓰면 trimStart 가져다 씀
-> trimRight 쓰면 trimEnd 가져다 씀

string을 만들때는 string생성자 함수 있음

-> 자바처럼 가능
-> 문자열 객체를 만든것(문자열 값이 아니라)
-> {}중가로 묶여있는 객체로 나옴

valueof() : 특정 객체의 원시값을 반환한다

-> 보통 원시값을 필요로 할때 알아서 사용하므로 직접 호출해야 하는 경우는 매우 드물다
(기본적으로 Object의 모든 후손 객체는 valeuOf를 상속받는다. 내장된 함수 객체는 모두 valueOf를 재정의해 적합한 값을 반환합니다. )
링크텍스트

array.forEach

-> for문의 역할을 수행하는 메소드
-> callback으로 되어있음(함수를 전달하게 되어있음)

-> callback안에 function전달해라

익명함수 : 최소 1개 들어감
( element 배열요소 )

-> '배열요소' 하나씩 꺼내서 function의 element로 자동전달되는 방식
= 향상 for문

-> 세미콜론(알게 모르게 안해도 됨)

-> 함수에 함수 전달 : 콜백으로 되어있음

-> 검사결과가 true인것만 남음

-> true,false식이 들어와서 만족하는것만 남기겠다

<회사선정기준>
-언어가 선택기준이 되어서는 안된다
(회사업력(많은것이 좋음), 사원수, 회사연봉, 기업평가, 퇴직금 )

-> c#을 교육해서 집어넣겠다

3. 배열 요소를 변경하기

join

-> 배열요소를 쭉 합쳐서 하나의 문자열로 만들어주기

(추가) push, unshift

-> math에 static 처리되어있음

-> 7.1보다 큰 정수 -> 8
-> -7.1보다 큰 정수 -> -7

-> 배열을 전개 연산자로 바꾸기

-> 배열 앞에 ...(마침표3개)

pow : base^exponent처럼 base 에 exponent를 제곱한 값을 반환합니다.

링크텍스트

-> 자바 버젼을 자바 스크립트로 바꾸는 버전

-> start부터 10개

-> 2,3,4,5,6 중 한개

-> 동일한 숫자 2개 면 겹쳐서 출력되기도 함

-> 전달안했을때 디폴트 매개값은 0이다

-> 디폴트 매개변수 : 전달하지 않았을때 사용할 매개값

-> 모든 수의 0제곱 1임

10_event.html

태그를 문서에 저장할 수 있음 : document.getelementid
-> 문서 객체니까

-> 클릭하는 html 구성요소

div를 클릭하면 커진다

-> 키가 내려가는 순간, 누르고 있는 순간, 누르고 띄어지는 순간

keydown :키 내려가는 중 : 이전에 입력된 걸 검사하고 싶을때

keyup : 새로 입력된 걸 검사하고 싶을때

-> div가 이벤트 대상, 글자가 커진다(evnet listener로)

이벤트 리스너 : 이벤트 발생시 동작할 함수(function)

-> 함수 안에다가 글자키우기 코드넣어야 함

이벤트 객체 : 이벤트 객체에 저장된 값이나 메소드를 사용하고 싶으면 이벤트 리스너(함수)에 매개변수를 하나 선언하기 (자동으로 이벤트 객체가 저장이 됨)

-> 수업은 표준 이벤트로, 고전 이벤트가 더많이 사용되기는 함

-> div 클릭하면 함수가 동작함

-> 수업에서는 표준event 함수로!

-> event listener (이벤트 리스너)

-> 이벤트 대상을 확인할 수 있다 (클릭하는 대상 box1이 된다)

-> event 구성요소

클릭했을때 크기를 키우고 싶음

-> event.target이 box1 임(box1의 스타일 바꾸기)

-> 둘이 같은데 this를 안쓸 이유가 없음

-> function없애기

이벤트 익명 함수 :

화살표 익명 함수는 this인식이 안됨(쓰지 않는것이 좋음)

화살표 함수를 잘 안씀(-> 어디서는 쓸 수 있고 어디선쓸 수 없음)

-> click했을때 A function도 실행 , B function도 실행은 불가능하다

-> 둘다 적용 : 표준이벤트 모델

-> 실무에서는 둘다 적용할 일이 거의 없음

★★★event 대상 : box2, eventtype은 cilck 등 잘 구분하기!!

★★ (권장) 표준 이벤트

(인라인 이벤트는 사용 x -> 태그 안에 자바 스크립트 넣지 말기!)

이벤트를 등록해주는 박스가 100개 -> 인라인 이벤트 : 코드 100개 적기

자바스크립트도 CSS처럼 별도의 파일로 만들어서 작업





-> 기본 event등록된것이 있어서 알아서 함

submit(서브밋)

-> submit이 안되게 막을 수 있음
-> 동작하면 안되니까

-> 배열이니까 abc 3개 들어감

querySelectAll : 자바스크립트의 DOM(Document Object Model)에서 사용되는 메서드 중 하나, 지정된 CSS 선택자에 일치하는 모든 요소를 선택하는데 사용된다

# : HTML 문서 내에서 특정 DOM 요소를 선택하기 위한 CSS 선택자의 일부로 사용된다 -> HTML 요소 선택자에서 사용하는 경우 : 'id'속성이 'site'인 요소를 선택할 수 있다.-> 이렇게 선택된 요소에 대한 조작이나 이벤트 처리 등을 수행할 수 있습니다.

-> .net으로 끝나면 이동 x

addEventListener
addEventListener : 자바스크립트에서 이벤트 처리를 구현하는 중요한 메서드
(사용이유)
1. 이벤트 기반 프로그래밍 : 웹 애플리케이션은 사용자와 상호 작용하며 다양한 이벤트(클릭, 키보드 입력, 마우스 움직임 등)가 발생합니다. 'addEventListener'를 사용하면 이러한 이벤트에 대한 리스너(처리 함수)를 등록할 수 있으므로 원하는 동작을 수행할 수 있습니다.
2. 비동기성 처리 : 웹 애플리케이션은 비동기적인 성격을 가질 때가 많습니다. 사용자의 상호 작용에 따라 데이터를 로드하거나 업데이트하거나 UI를 갱신하는 경우가 그 예입니다.
3. 다양한 이벤트 처리 : 'addEventListener'를 사용하여 이벤트 리스너를 등록하면 비동기 작업이 완료할 때 적절한 동작을 수행할 수 있습니다.
4. 이벤트 위임 : 이벤트 위임은 부모 요소에 하나의 이벤트 리스너를 등록하여 하위 요소에서 발생한 이벤트를 처리하는 패턴입니다. 이 패턴을 사용하면 대규모 웹 애플리케이션에서 이벤트 처리를 효율적으로 관리할 수 있으며, 'addEventListener'가 이 패턴을 구현하는 데 중요한 역할을 합니다.

querySelectorAll() : HTML 요소가 아닌 nodeList 형태로 값을 반환한다 -> 사용을 하려면 반복문을 이용해 사용해야 한다

링크텍스트

.endsWith() : 문자열이 특정 문자열로 끝나는지 확인한다.

/(슬래시) 자동으로 들어감

preventDefault() : a태그나 submit 태그를 누르게 되면 href를 통해 이동하거나, 창이 새로고침하여 실행된다. preventDefault를 통해 이러한 동작을 막을 수 있음

(1) a 태그를 눌렀을 때 href 링크로 이동하지 않게 할 경우
(2) form안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을때(submit은 작동됨)

링크텍스트

문제1. 서브밋 방지하기

-> 서브측으로 보내는건 name임 (id가 아님)
(id는 javascript에서 씀)

-> ※실제로 submit은 form 태그가 이벤트 대상임

-> 기본 event가있음

-> value속성에 들어감 (properties 붙이기)

-> submit은 됨(검색 못하게 막았음)
-> 하려면 event.preventDafault()있어야 함

->★★★ 아이디 입력 안되고 비번 입력안될때 체크할 수 있어야함

-> submit event는 form에다가 달아야함(button x)

-> submit이 동작하지 않은 이유 : button 때문에

-> duam 검색은 빈문자열을 검색하면 빈문자열을 조회함 (검색결과 없다고 뜸)

-> event객체 사용 안해도 괜찮음



->button은 클릭하면 아무런 일이 없었음
-> return은 function이니까 function 종료임(함수의 return은 함수의 종료임)
-> 함수가 종료가 되니까 하지않음

-> 검색어는 필수입니다 후 네이버,다음 다 안됌

submit (메소드도 있음)

개별 동의도 전체 동의에 영향을 미치고 서로 영향을 미침
클릭할때마다 계속 상태 변해야하니까 clickevent로 바꾸기

-> 전체 선택의 체크여부가 개별선택의 체크여부로 그대로 넘어간다

-> true : 체크가 된것, false : 체크가 해지된것
-> 체크박스들의 체크여부는 attribute로 볼 필요 x
-> 속성

-> 전체선택클릭할때마다 true일수도 false일수도 있음
: checkAll클릭할때마다 바뀜




-> 1번을 클릭해도 1,2,3을 다 봐야함


-> checked값을 다 더하면 1 아니면 0
-> 현 상황에서 3이 나오는지
3이 아니면 누군가는 체크를 안했다는 것

-> true,false를 0과1로 바꿔서 동작하는 지 확인하기


-> 둘다 3이면 check했다는 것

j.query로 다시 풀것 : 코드가 꽤 축약되는것들도 있음

j.query : 적은 코드로 많은일을 할 수 있는것

여기서 this는 wrap 4번임

-> 색깔 만드는 방법 : rgb 함수방법
(rgb 함수 : red, green, blue 0~255사이로 줘서 색깔을 만듦)
(배열 : 배열의 index를 생성하겠다)

-> 고전 event : 한번에 한번 등록(아직 많은 브라우저에서 쓰고있음)

internet explorer 11도 지원 x

setInterval() : 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로부터 변경된 데이터를 주기적으로 받아와야 하는 경우에 사용

링크텍스트

getElementById() : 특정 id 속성을 가진 요소를 검색하고 그 요소를 리턴한다. 이는 HTML DOM 관련 스크립트를 짤 때 가장 유용하고 일반적으로 쓰이는 메소드입니다. 주로 document의 일부 요소를 찾거나 조작할 때 많이 사용한다.

-> 특정 id로 document를 검색하는데 요소를 찾지 못한 경우 null을 리턴합니다. id는 원래 페이지 내에서 고유한 값이어야 하기 때문에 여러 요소가 같은 id로 지정된 경우 getElementById() 메소드는 첫번째로 찾아낸 요소만을 리턴합니다.

textContent : 'Node'의 속성으로, 사용자에게 보여지는 text값만 읽어오는 innerText와는 달리 script나 style태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.

padStart() : 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.

.setAttribute() : 선택한 요소(element)의 속성(attribute)값을 정합니다.

링크텍스트

.removeAttribute() : 요소(element)에서 주어진 이름의 특성을 제거한다.

링크텍스트

parseInt() : 문자열에서 숫자를 추출하기 위함, 입력받은 문자열을 실제 숫자값으로 바꾸어 반환함

링크텍스트