코드
- <script></script> javascript 코드임을 웹브라우저에게 알려줌
- document.write(’출력 내용’) 웹페이지에 어떤 글씨 출력할 때
- onclick 클릭했을 때
- onclick 버튼 클릭했을 때 경고창 뜨게 하려면 input 태그 안에 onclick=alert(’경고문’)
- onchange 내용이 변했을 때
- onkeydown 키보드 키를 눌렀을 때
- alert(’내용’) 내용을 알림으로 띄움
- alert(1+1); 경고창에 2가 출력됨
- “문자열” 또는 ‘문자열’ 쓰면 됨
- ‘문자열’.length 내용의 글자 수
- ‘문자열’.toUpperCase() 문자열을 대문자로 변환
- ‘문자열’.indexOf(’찾으려는 것’) 문자열에서 찾으려는 것이 몇 번째에 나오는지 알려줌. 0,1,2, ...번째라고 알려줌. 문자 한 개를 찾아도 되고 단어를 찾아도 됨.
- trim() 공백을 없앰
- var 변수명 = 내용;
- style=”css 코드”
- <div></div> css로 제어하고 싶은 대상을 감싸는 어떠한 기능도 의미도 없는 태그
- <div></div> css로 제어하고 싶은 대상을 감싸는 어떠한 기능도 의미도 없는 태그. h1처럼 화면 전체를 쓰기 때문에 줄바꿈이 일어남.
- <span></span> css로 제어하고 싶은 대상을 감싸는 어떠한 기능도 의미도 없는 태그. 줄바꿈이 일어나지 않음. div와는 전체를 쓰는지 안 쓰는지만 다름.
- ‘ctrl’+’F’ 단어 찾기
- <style>내용</style> 내용이 css 코드임을 웹 브라우저에게 알려줌
- <style>a{ }</style> 이름이 a인 태그에 적용
- <style>.b{ }</style> 이름이 b인 class에 적용
- <style>#c{ }</style> 이름이 c인 id에 적용
- document.querySelector(’선택할 것’) css 선택자(Selector)를 이용해서 선택
- document.querySelector(’선택할 것’).stlye.backgroundColor=’색상’ css와 달리 javascript에서는 이렇게 씀
- document.querySelector(’선택할 것’).stlye.color=’색상’ css와 달리 javascript에서는 이렇게 씀. 여기서 color는 글자 색
내용
- HTML은 정적임 → 사용자와 상호작용하기 위해 Javascript를 이용해서 동적으로 만듦. Javascript가 HTML을 제어함
- 웹 브라우저는 한 번 화면에 출력되면 자기 자신을 바꿀 수 없음
- 이벤트 : 웹브라우저에서 일어나는 일
- onclick 이용해서 라이트모드/다크모드 전환 가능
- 콘솔 : 파일 만들지 않고 바로 코드 실행 가능
- 페이지에서 마우스 오른쪽 버튼 클릭하고 ‘검사’ 누르면 개발자 도구 나옴
- 개발자 도구의 elements 창에서 ‘esc’로 콘솔 창 보이게 했다 안 보이게 했다 할 수 있음
- 문자열과 숫자는 다른 데이터타입
- 1은 숫자, “1”은 문자열
- “1”+”1”은 “11”
- 콘솔에서 ‘shift’+Enter’ 누르면 실행은 하지 않은 채 다음 줄로 넘어감
- 웬만하면 변수 앞에 var 써
- backgroundColor=’black’은 black이 backgroundColor라는 변수의 값이 됨을 의미함.
- style 속성 안에는 css가 옴
- class는 무언가를 그룹핑하는 것. id는 한 가지 대상을 식별하는 것. class는 1학년 1반, id는 출석번호 생각하면 됨. id는 한 페이지 안에서 중복해서 쓰면 안 됨.
- class 선택자는 포괄적. id 선택자는 무언가를 정확하게 타겟팅.
- class를 통해 광범위하게 효과를 줌. 그중에서 예외처리 하고 싶은 것을 id 선택자로 지정하면 됨.
hello world 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
document.write('hello world');
</script>
</body>
</html>
알림창
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hello')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('keydown')">
</body>
</html>
Day/Night 모드 전환
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="Night" onclick="document.querySelector('body').style.backgroundColor='black'; document.querySelector('body').style.color='white';">
<input type="button" value="Day" onclick="document.querySelector('body').style.backgroundColor='white'; document.querySelector('body').style.color='black';">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>WEB</h2>
<p>
The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in August 1991.
</p>
</body>
</html>'Front-End > JavaScript' 카테고리의 다른 글
| Learn JavaScript_Arrays (0) | 2022.07.20 |
|---|---|
| Learn JavaScript_Conditionals (0) | 2022.07.14 |
| Learn JavaScript_Introduction (0) | 2022.07.14 |
| 자바스크립트의 실행 방법과 실습 환경 (0) | 2022.03.27 |
