Javascript를 이용하면 웹 브라우저를 제어!
▶ Script 태그
HTML의 태그 중 하나인 script 태그 안에는 Javascript 코드를 쓸 수 있음 -> HTML 코드 안에 Javascript 넣기
<body>
<script>
document.write('hello, world!');
</script>
</body>- 변화할 필요가 없는 페이지의 뼈대는 HTML로 작성 -> 동적
- 유저와 상호작용이 필요한 요소들을 그 위에 Javacript로 작성 ->정적
▶Javascript와 사용자의 상호작용, 이벤트(Event)
: 웹 브라우저에서 일어나는 중요한 사건
<input type="button" value="hi" onclick="alert('hi')">예시)
- onclick : 사용자가 어떤 것을 클릭하는 사건을 의미
- onchange: 입력창에서 사용자가 키보드를 이용해 무언가 입력하면, 그에 따라 내용이 바뀌는 사건을 의미. 이 때, 입력창에 입력한 후 바깥쪽을 클릭했을 때를 기준으로 그 전과 내용이 바뀌었는지 확인함.
https://www.w3schools.com/js/js_events.asp
JavaScript Events
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
▶콘솔 (Console)
- 콘솔을 통해서 입력된 코드는 현재 페이지에서 즉석으로 실행
- 웹 브라우저에서 오른쪽 버튼 > 검사 > Console 탭
▶문자열을 처리하는 명령어
예시)
- str.toUpperCase() : str 안에 들어 있는 모든 문자열의 문자들이 대문자로 바뀜
- str.indexOf('hi') : str 안에 있는 hi 라는 문자열을 찾아서 그 부분이 앞에서부터 몇 번째 문자인지 알려줌
▶CSS의 기본 문법
CSS를 이용하면 웹페이지에 있는 요소들의 디자인을 바꿀 수 있음 -> 바꾸고 싶은 태그에 style 속성을 사용
<h1>Javascript<h1>이렇게 하면 Javascript라는 글자가 나타나게 됨.
이 때 이 글자의 색을 blue로 바꾸고 싶다?
<h1 style="color: blue">Javascript<h1>이러한 요소들을 알아보고 싶다면 ' CSS property + "원하는 디자인 요소" '로 검색하기!
▷ span, div
CSS를 이용해서 문단의 특정 부분에만 스타일을 주어서 강조를 하고 싶다-> HTML 태그가 필요-> div와 span
- 둘 모두 어떠한 특정한 기CSS나 Javascript 코드를 삽입하기 위해서 존재하는 태그
- div 태그는 화면 전체를 사용하기 때문에 줄바꿈이 되고, span은 줄바꿈이 되지 않음
▷선택자 ) class
<head>
<style>
.js {
font-weight: bold;
}
</style>
</head>.js = class 이름
어떤 문장에서 Javascript라는 단어에만 이 class를 적용시켜서 볼드체로 만들고 싶다?
<span class="js">Javascript</span> is wonderful!이렇게 하면 이제 js라는 class를 가진 모든 태그를 한 번에 바꿀 수 있음!
▷선택자 ) id
<style>
#first {
color: green;
}
</style>- class라는 단어는 그룹을 의미하고, id는 특정한 것을 식별한다는 의미
- class는 중복될 수 있지만, id는 한 페이지에서는 딱 한번만 쓰임
- class 선택자를 이용하면 광범위한 효과를 줄 수 있고, id 선택자를 이용하면 예외적으로 디자인을 바꿀 수 있음 -> class 위에 id를 얹어서 구현하는 것이 효율적
- 우선순위 ) id > class > 태그
▶querySelector
querySelector라는 함수를 사용하면 이러한 선택자를 이용해서 원하는 태그를 선택
documnet.querySelector("body")body라는 이름의 태그를 모두 선택
(js라는 class를 가진 태그를 선택하고 싶다면 따옴표 사이에 .js를 쓰면 되고, first라는 id를 가진 태그를 선택하고 싶다면 #first라고 씀)
documnet.querySelector("body").style.backgroundColor = 'black';예를 들어서, 버튼을 클릭할 때 이러한 스타일 변화가 일어나도록 만드려면 ?
<input type="button" value="night" onclick="documnet.querySelector('body').style.backgroundColor = 'black';">
'온라인 강의 > Javascript(생활코딩)' 카테고리의 다른 글
| Javascript 문법 (0) | 2022.08.03 |
|---|---|
| Javascript 활용(생활코딩) (0) | 2022.08.01 |
| Javascript 객체(생활코딩) (0) | 2022.08.01 |
| Javascript 함수(생활코딩) (0) | 2022.07.31 |
| Javascript 제어문(생활코딩) (0) | 2022.07.31 |
