200917_TIL
📚 edwith 부스트코스 : 자바스크립트의 시작
HTML과 JS의 만남
script 태그
- HTML의 태그 중 script 태그 안에 Javascript 코드를 쓸 수 있다.
- HTML로 작성한 코드와 다른 점은, Javascript로 쓴 코드는 동적이라는 것이다.
- 웹페이지에 글씨를 출력할 땐
document.right();
를 쓴다.
이벤트
document.right();
를 쓴다.: 웹브라우저 내에서 일어나는 사건
<input type="button" value="hi" onclick="alert('hi')">
- onclick의 속성값으로는 반드시 JS 코드가 와야 한다.
- onclick 속성의 속성값은 사용자가 클릭을 했을 때 JS의 문법에 따라 해석되어 웹브라우저에서 출력된다.
<input type="text" onchange="alert('changed')">
- 입력창에서 사용자가 키보드를 이용해 무언가 입력하여 내용이 바뀌는 사건이 일어났을 때
- 이외에도 다양한 이벤트들이 있다. ex) onkeydown, onmouseover 등
콘솔
- 웹 브라우저에서 오른쪽 클릭 > 검사 > Console
(Elements에서 Esc를 누르면 Console 창을 함께 볼 수 있다.) - 파일을 만들지 않고 코드를 웹페이지에서 즉석으로 실행할 수 있다.
- 콘솔에서 실행시키는 JS는 웹페이지를 대상으로 실행된다.
alert('Hello, World!'.length)
- 위 코드를 콘솔에 입력해 실행시키면 바로 경고창이 뜨고 문자열의 길이를 알려준다.
JS의 데이터 타입과 연산
- 데이터 타입: Boolean, Null, Undefined, Number, String, Symbol
- 연산자와 메소드
- Number 타입 - 산술 연산자
- String 타입
- .length 연산자
- str.toUpperCase(): 문자열의 모든 문자를 대문자로 변환
- str.indexOf('hi'): 문자열 내에서 hi 문자열이 앞에서부터 몇 번째 문자인지 알려줌
- .trim(): 공백을 없애줌
- '1'+'1'을 하면 결과는 '11'이 됨
- 변수와 대입 연산자
- var(variable)을 변수 이름 앞에 붙여주면 좋음! ex.var x=1
- 대입 연산자=
웹브라우저 제어
document.querySelector("body")
documnet.querySelector("body").style.backgroundColor = 'black';
<input type="button" value="night" onclick=
"documnet.querySelector('body').style.backgroundColor = 'black';">
- night 버튼을 클릭하면
body
태그를 선택하여 스타일 속성 중 backgroundColor을 black으로 변경하도록 한다.
오늘 공부하면서 느낀 점
- 평일에 시간 내서 공부하라면 할 수 있는 나 자신을 발견했다. 역시 사람은 하려고 하면 할 수 있구나...
- 과제도 강의도 밀리지 말자ㅠ 열심히 살아야지
- 오늘 강의를 약간 들었는데 자바스크립트는 뭔가 매우 새로운 느낌이라 신기하다. 앞으로도 재미있게 배울 수 있을 것 같다.
Author And Source
이 문제에 관하여(200917_TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@welloff_jj/200917TIL
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여(200917_TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@welloff_jj/200917TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)