Run JavaScript
1. script 태그
html문서에서 script 창을 열고 코드를 치면 javascript를 실행할 수 있다.
(쉽게 말하면, 웹브라우저에게 '이 코드가 javascript 코드입니다.'를 알려주는 태그)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>JavaScript</h1>
<script>
document.write(1+1);
</script>
<h1>html</h1>
1+1
</body>
</html> 
javascript와 html의 차이점은?
javascript는 숫자를 계산해서 출력해낼 수 있지만, html은 정적이기 때문에 숫자를 계산하지 못한 채로 그대로 출력한다.
2. Event handler
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">
</body>
</html>
Eventhandler : 어떠한 Event가 일어났을 때 어떠한 javascript가 실행되도록 하는 것
on○○○○라는 html의 속성의 속성 값으로는 반드시 javascript가 와야한다.
-onclick : 클릭했을 때 속성 값으로 적어준 javascript를 실행시킨다.
-onchange : 변화가 있을 때 속성 값으로 적어준 javascript를 실행시킨다.
-onkeydown : 어떤 key를 눌렀을 때 속성 값으로 적어준 javascript를 실행시킨다.
-alert : 경고창을 띄운다.
3. 콘솔(console)
웹브라우저 상에서 마우스 오른쪽 클릭 -> 검사 -> console클릭
콘솔(console) 창을 이용하면 파일을 만들지 않고 javascript 코드를 즉석에서 실행할 수 있다.
Data Type(자료형)
1.number(숫자)
숫자데이터를 명명한 자료형이다.
var age = 20; // number 2.string(문자열)
var name = "LGwebOS"; // string작은/큰 따옴표로 감싸주어야한다.
*주의 : 숫자를 따옴표로 감싸면 문자로 인식한다.
연산을 할 때 따옴표로 감싸주면 숫자로 인식이 안되어 연산이 진행되지 않고 문자열로 출력이 된다.
숫자로는 여러가지 산술 연산이 가능하다면, 문자에는 여러가지 기능들이 있다.
그 기능 중 2가지만 살펴보자!
-1. 문자의 기능 : 길이 알아보기
코드 : '길이를 알고 싶은 문자열'.length
이처럼 문자열 뒤에 .length를 붙여주면 그 문자열의 길이가 나온다.
-2. 문자의 기능 : 문자의 유형 바꾸기 (소문자 -> 대문자)
코드 : '소문자로 적은 문자열'.toUpperCase()
*주의 : 맨 뒤에 ()를 꼭 붙여줘야한다.
이 외에도 문자열과 관련된 다양한 기능들이 있다.
구글에 Javascript string 을 검색하면
다양한 properties 와 Methods 등을 볼 수 있다.
3.Variable(변수)
바뀔 수 있는 값
x와 y에 들어가는 숫자는 얼마든지 바뀔 수 있다.
x와 y를 변수라고 한다.
4.Boolean(불린자료형)
숫자와 문자열은 그 데이터로 무한히 많은 것들이 올 수 있다.
- 숫자 데이터=1, 2, 998, 651564, 등 무한하다.
- 문자 데이터=서울과학기술대학교, 자바스크립트, 코스모스 등 무한하다.
그러나 자료형 중 오직 두개의 데이터만을 값으로 가지는 것이 있다.
바로 불린 자료형이다.
그 데이터의 값으로 오직 true와 false 만을 갖는다.
5.Array(배열)
배열의 기본 구조
var 배열이름 = [ "데이터 1" , "데이터 2" , "데이터 3" ] ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Array</h1>
<ul>
<script>
var fruits = ["apple", "banana", "watermelon"];
var height = [152, 160, 178, 120];
</script>
</ul>
</body>
</html>배열의 이름을 정해준 뒤 그 안에 element(요소)들을 넣어준다.
배열은 대괄호로 표현해 주어야한다.
배열 불러오기
배열 안에 있는 데이터를 불러오려면 [인덱스]가 필요하다.
인덱스란, 배열 안에 있는 데이터의 순서라고 생각하면 된다.
여기서 주의할 점은 인덱스는 0부터 시작이라는 점이다.
| fruits 이라는 배열의 인덱스 | |
| fruits(배열 이름) | Index |
| apple | fruits[0] |
| banana | fruits[1] |
| watermelon | fruits[2] |
n번째 배열을 불러오는 코드
--> document. write ( 배열 이름 [ n ] ) ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Array</h1>
<ul>
<script>
var fruits = ["apple", "banana", "watermelon"];
var height = [152, 160, 178, 120];
document.write(fruits[0]+'<br>');
document.write(fruits[1]+'<br>');
document.write(fruits[2]+'<br>');
</script>
</ul>
</body>
</html>
배열에 데이터 추가하기
배열에 데이터를 추가하는 코드
--> 배열이름.push(' 추가이름 ');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Array</h1>
<ul>
<script>
var fruits = ["apple", "banana", "watermelon"];
var height = [152, 160, 178, 120];
fruits.push('mango');
document.write(fruits);
</script>
</ul>
</body>
</html>
이 외에도 배열에 관련된 여러가지 기능이 있다.
구글에 Javascript array 를 검색하면 다른 기능들을 사용하는 방법을 볼 수 있다.
6.Function(함수)
함수는 정리정돈을 할 수 있는 상자이다.
반복되는 코드가 있다고 가정해보자.
-> 코드가 필요할 때마다 작성을 해야한다.
-> 반복되는 코드의 오류를 찾거나 바꾸고 싶은 부분이 생겼을 때 모두 찾아 일일이 바꾸어주어야 한다.
-> 반복되는 코드가 길어지면 웹 페이지의 크기가 커지며 인터넷 전송의 시간, 비용이 모두 커져버린다.
이런 반복되는 코드의 문제점을 해결해 줄 수 있는 것이 바로 '함수'이다.
함수의 기본 문법
function 함수이름 () {반복되는 코드}
*함수이름은 가능한 그 함수의 기능을 명시하는 이름으로 정한다. ex) 더하는 기능이 있는 함수이름 : sum
함수 활용 예시
함수를 사용하지 않은 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>No Function</h1>
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
document.write('<li>3</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
two();
</script>
</ul>
</body>
</html>
함수를 사용한 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Function</h1>
<ul>
<script>
function two(){ document.write('<li>2-1</li>'); document.write('<li>2-2</li>'); }
document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
</script>
</ul>
</body>
</html>
두 예시의 코드가 결과는 같지만, 아래는 함수에 의해 코드가 실행되어짐을 볼 수 있다.
자세히 살펴보면 두 예시의 코드에서
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');이 반복됨을 알 수 있다.
따라서 반복되는 코드 두줄을 two라는 이름으로 함수를 생성했다.
이제 반복되는 코드의 내용을 수정하고 싶다면 함수를 기술해논 코드 한번만 수정해주면 모두 적용이 되어 코드의 유지, 보수가 매우 편리해진다.
코드를 짜다보면 아주 동일한 코드를 불연속적으로 반복하기도 하지만 상황에 따라 코드가 약간은 바뀌며 반복되는 경우도 있다.
예를 들어, sum = a+b 에서 a와 b에 계속 다른 값을 넣어계산 할 수 있다면 높은 효용을 가질 수 있을 것이다.
여기서 우리가 값을 대입하는 a와 b를 매개변수라고 부른다.
그럼 매개변수를 이용한 함수의 구조를 살펴보자!
function 함수이름 (매개변수a, 매개변수b) {반복되는 코드}
더하기를 하는 함수의 코드를 적는다면
function sum (a, b) { document.write(a+b) } 로 나타낼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Function</h1>
<ul>
<script>
function sum(a,b){ document.write(a+b+'<br>')}
sum(5,7)
sum(1,3)
sum(8,2)
</script>
</ul>
</body>
</html>
이제 더하기를 하는 코드를 3번 반복해서 치지 않고 함수와 매개변수를 활용해 1번만 치고도 결과값을 출력할 수 있게 되었다.
7.Object(객체)
앞에서 언급했듯이 정보를 정리하는 방법에 '배열'이 있다.
그 안에는 숫자, 문자열, 불리언 등과 같은 정보가 들어갈 수 있다.
배열은 순서대로 정보를 저장 할 수 있다는 장점이 있지만, 더 다양한 정보를 담기에는 한계가 있다.
이를 보완해줄 수 있는 것이 객체이다.
배열에는 여러개의 정보만 넣을 수 있다면
객체에는 각각의 정보와 정보에 대한 이름 도 넣을 수 있다.
정리해보자면,
배열: 정보만 넣을 수 있다, 정보의 순서가 있다, 표현 방식 :[ ]
객체: 정보에 대한 이름과 정보가 있다, 순서가 없다, 표현방식: { }
var fruit = ['apple','red']; //배열(array)
var fruit = {name:"apple", color:"red"}; //객체(object) 객체의 기본 구조
객체의 기본 구조는 배열과 비슷하다.
var fruit = {name:"apple", color:"red"}
이 코드를 예시로 설명을 해보자면,
fruit이라는 객체에 apple이라는 정보를 name이라는 딱지(정보의 이름)을 붙여 저장한 것이다!
*배열과 달리 대괄호를 사용해준다는 것에 유의하자!
이렇게 하면 fruit이라는 객체 안에 다양한 종류의 정보를 '라벨링'하여 저장할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Object</h1>
<ul>
<script>
var fruit = {name:"apple", color:"red", taste:"sweet" owner:"kelly"};
</script>
</ul>
</body>
</html>객체 불러오기
배열에서 배열이름[i]라는 코드로 배열 안의 정보를 불러온 것과 같이
객체에서도 객체이름.key라는 코드로 객체 안의 정보를 불러올 수 있다.
객체에서 key란?
객체 안에서 원하는 정보에 도달 할 수 있게해주는 매개체로 정보의 이름을 말한다.
var fruit = {name:"apple", color:"red"} -->여기서 key값은 name과 color이다.
이제 fruit이라는 객체에서 apple이라는 정보를 불러와보자!
객체를 불러오는 코드 : document.write(객체이름.key값); 또는 document.write(객체이름["key값"])
document.write(fruit.name); 또는 document.write(fruit["name"]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Object</h1>
<ul>
<script>
var fruit = {name:"apple", color:"red"};
document.write(fruit.name+'<br>');
document.write(fruit["name"]+'<br>');
</script>
</ul>
</body>
</html>
Operator
1. Assignment operators (대입연산자)
오른쪽 항의 값을 왼쪽의 변수에 대입한다는 뜻이다.
값 1을 변수 x에 대입하는 경우 아래 코드와 같이 쓸 수 있고 '='이 대입연산자를 의미한다.
x = 1;다만 1과 같은 constant에는 어떠한 값을 대입해도 값이 변하지 않는다.
2. Comparison operator(비교연산자)
좌항과 우항의 값을 비교해서 true 혹은 false라는 값을 만들어낸다.
이 때 좌항과 우항의 값이 같은지 물어보는 동등비교연산자는 ===로 표현하고
아래와 같이 1과 1의 값을 비교하는 코드를 쓸 수 있다.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Comparison operators</h1>
<h2>===</h2>
<script>
document.write(1===1);
</script>
</body>
</html>
마찬가지로 >와 <와 같은 부등호를 이용해서도 비교연산자를 사용할 수 있다.
이 때 >는 >로 <는 <로 치환하여 사용해준다.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Comparison operators</h1>
<h2>1<1</h2>
<script>
document.write(1<1);
</script>
</body>
</html>
Statement
1. Conditional statement (조건문)
조건에 따라 함수가 실행되도록 하는 것이다.
보통 if를 사용하며, 바로 뒤에 있는 괄호 안에 true와 flase 둘 다 입력 가능하다.
<!DOCTYPE html>
<html>
<h2>IF-true</h2>
<script>
document.write(“1<br>”);
if(true){
document.write(“2<br>”);
} else {
document.write(“3<br>”);
}
document.write(“4<br>”);
</script>
IF-true
1
2
4
<!DOCTYPE html>
<html>
<h2>IF-false</h2>
<script>
document.write(“1<br>”);
if(flase){
document.write(“2<br>”);
} else {
document.write(“3<br>”);
}
document.write(“4<br>”);
</script>
IF-false
1
3
4
즉, true면 if(ture)의 중괄호 안의 내용이 실행되고, else 부분의 내용은 무시된다.
else면 else의 중괄호 안의 내용이 실행되고, if(true) 부분의 내용은 무시된다.
여기서 if 뒤의 괄호 안에 false가 온다면 반대의 상황이 발생한다.
(true와 false를 Boolean이라 한다.)
2. Loop statement (반복문)
반복문은 순서대로 실행되는 프로그램의 실행 순서를 제어하는 제어문이라고도 할 수 있다.
보통 while을 사용하며, if처럼 괄호 안에 true와 flase 둘 다 입력 가능하다.
<!DOCTYPE html>
<html>
<script>
document.write(‘<li>1</li>’);
var i = 0;
while(i < 3){
document.write(‘<li>2</li>’);
document.write(‘<li>3</li>’);
i = i +1;
}
document.write(‘<li>4</li>’);
</script>
Loop
true면 중괄호 안의 내용이 실행되고, flase가 될 때까지 중괄호 안의 내용을 반복해서 실행된다. 또한 while(i < 3)처럼 반복문을 언제 종료할 것인지에 대한 설정이 필요하다.
3. Loop & Array (배열과 반복문)
<!DOCTYPE html>
<html>
<script>
var study = [‘HTML’, ‘CSS’, ‘JavaScript’’];
</script>
<h2>Study</h2>
<ul>
<script>
var i = 0;
while(i < study.length){
document.write(‘<li>’+study[i]+’</li>’);
i = i + 1;
</script>
</ul>
Study
study라는 변수를 만들어 주고, 반복분을 실행하면 이렇게 배열안의 원소들을 차례대로 가져오게 만들 수 있다.
while(i < 3) 으로 반복문을 실행해도 같은 결과가 나오지만, while(i < study.length)를 이용하면 배열이 바뀌더라도 자동으로 맞춰서 출력된다.
4. Function (함수)
연속적으로 반복되지 않다면, 반복문을 사용할 수 없다. 그럴 때 대신 사용하는 것이 함수다.
function JS() - JS라는 함수 정의
JS(); - 위에서 정의한 JS 함수 실행
<!DOCTYPE html>
<html>
<script>
function JS() {
document.wirte(‘<li>2-1</li>’);
document.wirte(‘<li>2-2</li>’);
}
document.wirte(‘<li>1</li>’);
JS();
document.wirte(‘<li>3</li>’);
</script>
5. Loop & Object (객체와 반복문)
함수와 변수가 다양하고, 많아지자 이를 정리정돈하기 위해 만들어진 것이 객체이다.
<!DOCTYPE html>
<html>
<h1>Iterate</h1>
<script>
for (var key in book) {
document.write(key+“ : ”+book[key]+‘<br>’);
}
</script>
Iterate
title : The little Prince
writer : Saint Exupery
characters : fox
for (var key in book)는 book이라는 객체 안 key값을 하나씩 가져와 반복문을 수행한다는 의미이다.
6. Property & method
객체에 소속된 변수를 프로퍼티라고 하고, 객체에 속해있는 함수를 메소드라고 한다.
document.querySelector()에서 document는 객체, querySelector()는 메소드이다.
또한 프로퍼티와 프로퍼티를 구분할 때는 콤마를 사용한다.
7. Refactoring
외부적인 동작은 똑같이 유지하면서 내부의 코드는 더 효율적으로 개선하는 것이다. 기존 코드를 없애고 새로운 코드를 만들었다면 리팩토링이 아니다.
8. Library & Framework
라이브러리는 재사용하기 쉽도록 만든 소프트웨어, 부품을 가져오는 느낌이다.
프레임워크는 하고자 하는 것에 따라서 공통적인 부분을 만들어 놓는 반제품 같은 것, 만들어져 있는걸 파헤쳐서 다시 만드는 느낌이다.
jQuery – 대표적인 라이브러리
$(‘a’) - 이 페이지에 있는 모든 a태그를 jQuery로 제어하겠다는 의미
ex) $(‘a’).css(‘color’, ‘black’);
CSS
1.Style atrribute
어떠한 태그의 스타일 속성을 바꾸고 싶다면 태그안에 style=""를 추가하여 쌍따옴표 사이에 CSS 코드를 작성한다.
<!doctype html>
<html>
<body>
<h1 style="background-color:coral;color:powderblue">COSMOS</h1>
</body>
</html>
2. Style tag
어떠한 특정 태그로 감싸져 있지 않은 정보에 스타일을 주고 싶다면 직접 임의의 태그로 감싸주면 된다.
단, h1과 같이 어떠한 정보가 담겨있지 않은 무색무취의 태그 span, div를 사용한다.
이 두 태그는 줄바꿈이 없느냐 있느냐의 차이이다.
<!doctype html>
<html>
<body>
<span style="background-color:red;color:white">Apple</span> is a red fruit,
but<div style="background-color:black;color:yellow">Banana</div> is a yellow fruit.
</body>
</html>
3. Selector(선택자)
선택자를 잘 사용하면 주고싶은 효과를 효율적으로 줄 수 있다.
CSS 선택자는 크게 tag 선택자, class 선택자, id 선택자가 있다.
class 선택자는 여러 정보들를 grouping해주는 것이므로 어떠한 효과를 광범위하게 주고 싶을 때 사용한다.
id 선택자는 광범위한 효과 중에서도 예외적으로 또 효과를 주고 싶을 때 사용한다.
따라서 둘의 효과가 맞부딪히면 id 선택자의 효과가 우선적으로 나타난다.
또한 class선택자를 표현할 땐 앞에 .을 붙이고 id선택자를 표현할 땐 앞에 #을 추가하여 표현하면 된다.
<!doctype html>
<html>
<head>
<style>
.cosmos{
font-weight: bold;
color:red;
}
#first{
color:green;
}
</style>
</head>
<body>
<div id="first" class="cosmos">ABCDEFG</div>
<div class="cosmos">HIJKLMN</div>
</body>
</html>
첫번째 줄에서 id의 효과인 초록색이 우선적으로 적용되었다
그렇다면 document.querySelector(selectors)구문을 통해 야,주간모드가 가능한 페이지를 만들어보자.
document.querySelector(selectors)는 Java Script를 통해 CSS선택자를 선택할 수 있는 구문이다.
따라서 매개변수에 원하는 선택자를 넣어주면 된다.
이 때 Java Script에 style 속성을 넣기 위해 구문 뒤에 .style.property 순으로 추가한다.
<!Doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1 style="color: coral">COSMOS</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';
">
<p>
COSMOS is the BEST. Have a Nice Day!
</p>
</body>
</html>
'Study > web기술' 카테고리의 다른 글
| CSS cheat sheet (0) | 2021.05.15 |
|---|---|
| html cheat sheet (2) | 2021.05.10 |