[DAY39] JavaScript : 제어문, 분기문, 반복문

NA YE SOM·2023년 8월 29일


04_branch.html

textContent(property) : 텍스트를 추가할 수 있는 property
-> innerText(text를 element에 추가할 경우)
링크텍스트


-> tag먼저 만들고 아래쪽에 script 작성하기



-> 태그 내부 텍스트 : 80이 필요


-> textContent가 가져오는건 '문자열 80'으로 묶여있음
-> 숫자 80으로 바꾸기



-> 선언만 하고 값을 주지 않으면 undefined상태임
-> 자바와 동일해서(자바코드처럼 작성하기)

05_loop.html



반복되는 숫자 :for문이 제일 좋음
(int가 없음 => let쓰기 : 지역변수만들때 선언할때 쓰기)


-> textcontent로 하면

이상하게 나옴 br그대로 나옴



-> 이미지 배치 끝나고 css끼리 하는것

id가 box2인 div아래 id들
id가 box2 인 div 밑에 있는 태그들

-> 오른쪽 여백을 조금 주기(margin-right)

query selector 하나만 있을 때 쓰는것

query selector all



-> css 함께 병행하기

queryselectall : 배열처리해야함


-> 첫번째 배열: ""(빈문자열)


-> 마지막 12월까지

-> script로 만들어서 box3에 넣어보기

-> 12개 다 붙이고 최종적으로 닫아주는 /select팔요함



-> 테이블의 데이터 (3행 3열)
-> 테이블로 만들어서 넣어보기(이중for문필요)

-> 어떤 값 하나 빼서 행과 열에 넣어보기!

이중 for문 필요한 상황(반복문)


배열


-> bracket[]

배열에 들어가는 모든 요소가 동일한 타입으로 들어갈 이유는 x

-> 자바) string끼리, int끼리




-> DOM 객체도 넣을 수 있음
-> 서로 다른 타입인데 한번에 뭐아서 저장가능


-> 자바스크립트에서 지원 : for in문


-> 배열의 요소 추가가능

-> 처음에는 100을 보내고 다음에는 1.5 보내면 (1,5만 남은, 덮어쓰기되서)
-> 최종 : true만 나옴

누적 : +=

요소사이사이에 공백 2개(2칸)

★★★(시험) 사이사이에 공백 2개 넣기!


-> 대입연산 처리는 항상 오른쪽먼저 처리(괄호 없어도 됌)

★★★ (공백을 구성하는 엔티티 코드) - 웹페이지에서 공백을 만든다

-> advanced for문 : 자바에서 배열요소를 한개씩 꺼내왔음


-> array에서 index를 가지고 오시오

-> 인덱스를 가지고 오는 상황

-> 그대로 달라진 것 없음

반복문으로 이미지 출력하기

-> 파일의 이름을 배열로 만들기



push(요소)

unshift(요소)



-> 짜장 -> 제육볶음 -> 짬뽕의 순서가 됨


-> array모든 요소 box3번에 넣기


-> 대입연산자의 오른쪽을 먼저 처리한다


-> (가로) 필요없는 가로임

pop() 마지막 요소 삭제하기

shift() 첫번째 요소 삭제하기


-> 밀어서 절벽으로 , 앞사람부터 떨어뜨리는 것
(left shift)
=> 첫번째 요소 제거하는 방식


-> 마지막 요소 지워짐
-> 첫번째 요소 지워짐

splice(스플라이스) : 만능메소드(삽입, 수정, 삭제 모두 가능)

수정 : 지운다음에 새로운 데이터를 넣는것


-> 1개를 빼고 1개를 새로 집어넣으면 한가지가 수정됨
-> 2개를 빼고 2개를 새로 집어넣으면 2개가 수정됨

삭제할 갯수 : 0이라고 지정하면? 추가하겠다

-> 삭제를 안하고 추가만 하겠다

삭제할 갯수 : 3개 전달, 추가할 요소가 없음
-> 삭제만 하겠음


-> 생략가능
-> 추가할 요소가없으면 안적을 수 있음





-> 넣는 요소가 없음

함수

원래는 함수 하나마있었는데
클래슥 개념 생기면서 class안에 들어가는걸 method 라고 하고 class밖에 있는걸 함수라고 함



-> 메소드 이름이 있다

-> = 메소드 정의 : 함수를 만드는 것


-> 만들어서 호출하기(둘다하는 것)
(예전)

반환이 없는건 아닌데 적지 x
-> javascript는 타입의 선언이라는 개념이 없으니까


-> 반환타입 대신 : function이 들어감

-> 적을수도 있고 안적을수도 있다([]대괄호로 묶기)


-> 자바와 같은데 함수가 이것만 있는게 아님(함수를 초반에 잘 잡아두기)


-> 파라미터 없이 비워둠


-> 전달한 인수 x : 매개변수 x



-> 호이스팅 : 일부코드는 위치랑 상관없이 먼저 처리되는것이 있다
-> 4. 함수의 정의(호이스팅 대상)


-> 이렇게 짜면 대부분 오류남
(함수가 보이지도 않는데)
-> 자바 script는 오류 x


-> 항상 인식되서 실행될 수 있음

-> 함수 호출이 아니라 '정의'가 hoisting임

★★ 함수를 만들어 두는것 중요!


->원하는 것을 함수단위로 자르고 프로그램이 돌아갈 수 있게 만듦

-> 작업을 함수별로 만들어 두고 함수로 정의

-널리 사용하는 함수 : 선언함수

이름은ㅇ 없지만 만들수 있음

-> Int, string이없어서 반환타입은 적지 x


함수를 부르는 방법? 이름잉 ㅓㅂ슨ㄴㄷ '




만들자마자 호출하는바업
(딩ㅇ-ㅂ===




-> 문서객체

addEvnent.listener

event : 많이 씀(작업을 만들어줄때 익명함수 많이 씀)

-event : 사람들이 웹브라우저 조장할때 각종 행위들(클릭 등)

1)2) 번 잘 안씀 -> ★★★3)번

event 함수(이름없는 함수를 더 많이 만들 수 도 있음)

사용자가 어떤 행위를 했을때 동작할 수 있도록 event 작업해주기!

사용자가 마우스 가져다대거나 포커스를 가지면 무슨일을 하는지


-> alert으로 띄우나 console로 띄우나 별 차이 x




-> '자기호출실행'으로 이름은 없으니까

3) 이벤트 리스너로 등록하기


-> double 클릭하면 function 뒤에 동작함

event동작할때 발생하는 함수




-> 똑같은거 여러번 출력시 콘솔창 번호붙임

이름이 있는 함수 vs 이름이 없는 함수


1. (평가) submit(서브밋)

form에 있는 걸 가지고 '이동'을 하겠다 -> submit(서브밋)
form의 action에서 작동함

-> form에 모든 요소들을 가지고 variable submit 하겠다

-> ?(물음표) 파라미터들은 전송하지 않아도 반영 x

2. div태그 - 시멘틱 태그(의미를 갖는 태그) div


-> div태그의 똑같은 이름일 뿐(구역 구분할 때 감싸는 용도로 쓰는것)

  • 웹페이지 제목 만들때 : title 태그 -> 아무것도 안하고 저장만해도 15점(하나당 5점)
  • 열고 닫는 태그 주의!
profile
개발자 velog

0개의 댓글