입문자를 위한 자바스크립트 기초 강의_JS기초04

* createElement&appendChild

document의 createElement메소드는 지정된 이름의 HTML 요소를 만들어 반환해준다.

document.createElement('div')

document.createElement('a')

document.createElement('p')

위와 같이 HTML 요소가 만들어지고 반환되었다고 해서 바로 웹브라우저 화면에 추가되는 것은 아니다.
dom에다가 추가하는 작업을 해 주어야 하는데 이때 사용하는 것이 appendChild이다.
기본 사용법과 예제 코드는 아래와 같다.

// 기본사용법
target.appendChild(자식으로 추가할 요소)

// 예제
const p = document.createElemennt('p')
document.body.appendChild(p)

여기서 하나 더!! 
appendChild와 비슷한 역할을 하는 append 메소드도 있다.
타깃 요소에 자식 요소를 추가한다는 점은 두 메소드 모두 같으나 차이점도 존재한다.
appendChild의 경우 추가한 자식 노드를 반환하지만 append는 반환 데이터가 없다.
append는 요소에 노드 객체 또는 문자열을 자식 요소로 추가할 수 있지만 appendChild는 노드 객체만을 추가할 수 있다.

* value 속성 외

<input>, <select> 처럼 사용자로부터 입력을 받는 데 사용되는 요소들이 있다.
여기에 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근하자.
입력 요소의 value에 접근하여 할 수 있는 일은 크게 두 가지 읽기와 쓰기이다.

// 대상 요소의 사용자 입력값을 읽어 콘솔에 출력하자
console.log(target.value)

// 대상 요소의 사용자 입력값을 "변경값"으로 바꾸자
target.value = "변경값"

여러 입력 요소를 포함할 수 있는 폼 요소로 부터 여러 입력값을 받을 수 있다.

<form>
  <input name="nickname" placeholder="닉네임">
  <input name="character" placeholder="특징">
  <input type="submit" value="입력완료">
</form>

form에서 submit 이벤트를 발생시키면 입력 값들을 읽어올 수 있다.

여기서 한 단계 더 나아가서!!!
이 input의 값을 가져오고 싶다면 .val()을 활용해서 가져올 수 있다.
위의 소스코드에서 input 태그에다가 먼저 id값을 추가해주자.

<form>
  <input type='text' id="nickname" name="nickname" placeholder="닉네임" >
  <input type='text' id="character" name="character" placeholder="특징">
  <input type="submit" value="입력완료">
</form>

그 다음 아래와 같이 간단히 가져와서 변수에 저장해주면 값 가져오기 완료.

let testName = $("#nickname").val();

삼항 연산

삼항 연산은 이름 그대로 세 개의 항을 이용해 결과를 반환하는 연산이다.
보통 if문의 단축 형태로 사용되기 때문에, 삼항 조건 연산식이라고도 부른다.
사용 구문과 예시 코드는 아래와 같다.

// 구문
조건식 ? 참일 경우의 결과 : 거짓일 경우의 결과

// 예시
let result;
result = 3 > 2 ? "true" : "false"
console.log(result)

/* 예시의 결과
3은 2보다 크기 때문에 result의 값은 true가 된다 */

https://www.inflearn.com/course/입문자-자바스크립트-기초강의/dashboard

입문자를 위한 자바스크립트 기초 강의 - 인프런 | 강의