[Javascript] - 함수, 객체, DOM, input, tagname, style, img

​

1. 함수 - fuction 예약어(){}

​

1) 더하는 함수 - add

결과값:

​

2) 빼는 함수 - minus

결과값:

​

이처럼 함수를 사용자가 원하는 대로 만들 수 있다. 자바의 def랑 같다고 생각하시면 된다.

​

​

2. 객체

- 객체는 JAVA랑 그냥 똑같다고 보시면 된다.

값을 중괄호{key :value}로 담아주면 된다.

값 출력은 key로!

​

출력값:

​

3. DOM -

Document Object Method : DOM은 문서를 객체화 한 모델이다

​

​

innerText -> 안에 있는 글자를 가져오는경우

innerHTML -> 태그를 지원해서 수정하는 경우

​

Ex)<h1>고구마</h1>

- innerhtml 이면 고구마로 출력한다.

- innertext면 <h1>고구마</h1> 로 그대로 출력 된다.

​

출력값

여기서 클릭버튼을 누르면 아래와 같은 값이 출력된다.

​

3-1 DOM 문제 - 다음과 같은 값을 출력해라

(값이 게속 저장되면서 나와야한다)

​

정답 :

​

이처럼 버튼에 onclick을 주고

+=로 해서 값을 더해준다.

​

4. input

이처럼 값을 넣을 수 있는 기능이다. 위에 코드는 다음과 같다

​

이처럼 변수에 넣어주고 보여주면 된다.

​

인풋 데이터가져오기 버튼을 누르면 txt친 것을 나오게 코드 작성했다.

5. 태그네임(Tagname)

​

이 값을 모두 출력하려면 어떻게 해야할까 ? -> 반복문으로 길이만큼 출력해주면 된다.

li를 ul로 묶어주는거 명심하자!

여기서 저는 반복문의 길이를(length로 줬어요)

​

로그값을 보면

그대로 출력 됩니다.

​

​

6. 스타일

- 스타일은 css랑 거의 비슷하다고 보시면 됩니다.

버튼을 누르면 색 = tomato, 크기는 25px, font는 bold로 구현하기

​

​

6-1 스타일 문제

- 기본 파란색 정사각형에서 원만들기를 누르면 오렌지색 원이 만들어지며, 직사각형 버튼을 누르면 너노란색의 직사각형 모양을 가진 도형 만들기

​

정답

처음에 원을 만들때 borderRadious를 주고 다시 직사각형을 만들려고 하면 안되는데 이는

borderRadious에서 0 값을 주지 않아서 발생한 문제입니다.

​

​

7. 이미지(img)

​

이처럼 저는 외부에서 이미지를 가져왔습니다.

똑같이 하면되고 img.src로만 하시면 됩니다.

​

​

#shift

#unshift

#pop

#push

#javascipt

#js

#html

#body

#onclick

#body

#조건문

#배열문

#배열함수

#length

#property

#dom

#tagname

#img