2021. 10. 5. 14:11ㆍ스터디/Coding
Html과 css로는 정적인 문서밖에 할 수 없다. 그냥 정보만 올리기에는 이걸로 충분하지만 웹페이지와 상호작용하기 위해서는 추가적인 언어가 필요하다. 바로 javascript.
<script> Javascript의 영역 시작태그
<style>은 <head>에 들어가지만 <script>는 <body>에 들어간다.
<head>
<style>
....
<body>
<script>
document. write(1+1); <!-- 1+1이 연산되어 출력 -->
</script>
<h1>html</h1>
1+1 <!--그대로 1+1로 출력 -->
</body>
<input type="button"> 버튼을 만드는 태그
<input type="button" value="버튼에 넣는 글씨" onclick="alert('hi')">
<input type="text" onchange="alert('changed')"
/*
이벤트
- onclick
- alert 경고창을 여는 속성
*/
event 속성
자바스크립트는 상호작용가능한 많이 쓰이는 속성을 10~20개 정도를 정해둔다.
버튼 인풋을 넣을 때는 <script>안에 넣지 않음.
<input>은 별도 개체.
console 기능
콘솔을 사용하면 JS를 실행하기 위해서 파일을 하나 만들지 않고 웹브라우저 창에서 즉석으로 JS를 사용할 수 있다.
JS를 이용해 간단한 연산적용으로 계산기처럼 사용할 수 도 있다.
예시1)
alert('~~글자수 셀 내용~~'.length)
<!--작은따옴표안에 들어가는 내용의 글자수를 셀 수 있는 식이다.-->
예시2)
생활코딩 이벤트 댓글단 사람의 갯수 세기
[F12] >> "elements" >> [ESC] 하면 콘솔나옴.
문자열과 숫자
숫자
- 산술연산자(사칙연산): + - * /
문자열 (string)
"넣고싶은 글"
'넣고싶은 글'
문자열의 글자가 몇개인지 알고 싶다면 properties를 이용한다.
"글자수 알고싶은 문자열".length
하지만 이런 기능들을 다 하나하나 알 수가 없으니 검색 ㄱㄱ
Methods에는 다양한 기능들이 있다.
**properties와 Methods는 무슨차이인가..?
변수와 대입연산자
> x=1; x는 변수 / 1은 대입연산자
< 1
> y=1;
< 1
> x+y;
< 2
변수(variable)는 대입연산자에 의해서 값이 언제나 변할 수 있다.
하지만 1=2; 처럼 1이라는 값을 언제나 갖고 변하지않는 상수(constant)에는 값을 변하게 할 수 없다.
변수를 사용하는 방법
긴 글에서 이름을 바꾸기
엔터를 누르지않고 실행을 유보하려면 [shift] + [enter]
웹 브라우저의 제어(night/day 버튼 예제)
night 버튼을 클릭했을 때, 스타일 속성이 생기면서 배경 블랙, 텍스트색상 화이트로 변경.
<body /*css 속성을 어떻게 자바스크립트에 넣을까?*/>
<input type="button" value="night" onclick="document.querySeletor( 'body' );">
*query: 질의하다.
**bold처리된 부분은 JS영역이다.
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white'; ">
*볼드 부분은 <body style="background-color:black;">와 같다.
Javascript의 프로그래밍언어는 무엇인가?(이론)
JS는 사용자와 상호작용하므로 시간의 순서에 따라서 작동되어야한다. 이는 HTML과 분류되는 큰 특징이다. 조건에 따라 작동을 다르게 배치하거나, 반복해서 어떠한 기능이 실행되도록 할 수 있다.
조건문 예고
토글 Toggle : 하나의 버튼에 여러기능
'night' / 'day'의 버튼을 두가지가 아닌 토글버튼으로 만들어보자.
사용되는 기능 if/boolean...
비교연산자(Comparison operrator)와 불리언(Boolean)
<h2>1===1</h2>
<script>
document.write(1===1); /*값은 'true'다*/
</script>
<h2>===</h2>
<h2>1===2</h2>
<script>
document.write(1===2); /*값은 'false'다 "==="는 비교연산자*/
</script>
비교연산자는 좌항과 우항이 있다. 좌항과 우항을 합하여 어떠한 값을 낸다.
비교연산자 "="은 좌항과 우항의 관계에 따라 T/F의 값을 내는데 이 값이 불리언(boolean)이다.
<지금까지의 데이터타입>
1. 문자열 Str
2. 숫자 Number
3. 불리언 Boolean
17. 조건문의 활용
night와 day의 버튼을 하나로 하고 화면이 day상태일때 night상태의 버튼을 누르면 night상태의 화면과 day버튼으로 전환되는 토글 버튼을 만들자.
<input id="night_day" type="button" value="night" onclick="
if (night) {
document.querySelector('body').style.backgroundColor = 'rgb(30, 30, 35)'; /*조건을 개별일때와 같이*/
document.querySelector('body').style.color = 'white';
document.querySelector('a').style.color = 'white';
} else {
document.querySelector('body').style.backgroundColor = 'white'; /*조건을 개별일때와 같이*/
document.querySelector('body').style.color = 'black';
document.querySelector('a').style.color = 'black';
} ">
'스터디 > Coding' 카테고리의 다른 글
| 기기에 따라 뷰포트가 다른 걸 어떻게 해야할까? (0) | 2022.01.26 |
|---|---|
| 개자이너 되기 프로젝트... (0) | 2021.08.04 |
| 웹/앱 디자인의 단위 개념 총정리 (0) | 2021.07.18 |
| 기본 HTML 문서 형식의 완성 (0) | 2021.07.13 |
| 생활코딩 WEB2 - CSS 01 ~ 10 (0) | 2021.07.13 |