HTML
### id 선택자 활용, <a>태그
<a> 태그의 href 속성은 링크된 페이지의 URL을 명시합니다.
# 화면 이동
<a href="#special"> 스페셜</a> # 스페셜을 누르면 id=special로 이동
<h3 id="special">스페셜</h3>s
# 사이트 링크 걸기
<a href="https:\\naver.com">현탭 네이버</a> # 현탭 네이버 를 누르면 네이버사이트로 이동한다
<a href="https:\\naver.com" target="_blank">새탭 네이버</a> # 이건 새 인터넷창을 열어서 이동
### 엔터 태그
<br> # 엔터한번
<p></p> 또는 </p> # 엔터두번
### 제목 태그
<h1>제목 1</h1> # 글자크기가 가장 크다
<h2>제목 2</h2>
<h3>제목 3</h3> # 글자크기가 가장 작다
### 마진
<body style="margin-left: 100px;"> # 왼쪽에 여백 100픽셀
### 타이틀 태그
<title>타이틀</title> # 인터넷창 최상단 막대에 표기되는 타이틀
### html에서 특수문자
# < > 처럼 html문서 안에서 특정 목적으로 사용되는 특문을 문자 자체로 입력하기 위한
코드 심벌 명칭
" " double quotes
& & ampersand
< < less than sign
> > greater than sign
  spacebar
### <table> 태그
# 데이터테이블을 그리는 태그
# 형태 : <table></table> 속에 t헤드와 t바디가 들어가는 형태, t헤드에는 column, t바디에는 value
# 속에는 <tr></tr>을 한 줄로 구분하여 헤드는 <th>바디는 <td>
<table border="10" style="width:15%;"> <!--티헤드티바디 생략가능 보더=테이블에구분줄긋기-->
<thead> <!--프로는 전체창 폭에서 반을 말함 px로도가능-->
<tr>
<th>성명</th> <th>점수</th> <th>비고</th> # th 글씨진하게, 가운데정렬
</tr>
</thead>
<tbody>
<tr>
<td>제임스</td> <td>85</td> <td rowspan="3">줄셀병합/세로로병합</td>
</tr>
<tr>
<td>마리아</td> <td>55</td>
</tr>
<tr>
<td colspan="2">칸셀병합/가로로병합</td>
</tr>
</tbody>
</table>
### <audio>, <video> 태그
# src에 파일경로를 잡아주면 사운드파일과 영상파일을 띄울 수 있다.
<audio src="data/sample_impact.mp3" controls autoplay></audio>
<video src="data/mp4sample.mp4" controls width="640"></video>
CSS (, HTML)
# css style을 거는 방법은 3가지가 있다.
1. 특정 태그에 직접 걸기
<body style="margin: 50px;">
2. 헤드에 선택자를 잡아서 걸기
<head>
<style>
.name {color: aqua; background-color: black;} # class="name" 네임class에 대한 내용
span {font-size: 100px;} # span태그에 대한 내용
div { # div태그에 대한 내용
background-color: yellow;
width: 300px;
padding: 25px;
border: 15px solid navy;
margin: 25px;
}
</style>
</head>
3. 외부 CSS파일을 가져오기
<head>
<link rel="stylesheet" href="my.css">
</head>
# my.css 파일 내용
<p></p> 태그 속 글자색 블루, 백그라운드 베이지색으로
p {
color: blue;
background-color: antiquewhite;
}
# 중복될 경우 우선순위 1 > 2 > 3 가까운 것을 우선
# <hr> 태그
# 한 줄을 끝까지 긋고 엔터
# <span>, <div> 태그, 인라인과 블록
<span></span> 태그는 <div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰입니다.
<div> display속성 block > 줄 바꿈
<span> display속성 inline > 줄 안바꿈
# <p></p> 태그
paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰입니다.
BOX
<style>
div {
background-color: rgb(194, 54, 121); # 박스 속 배경컬러
width: 300px; # 박스너비 (문장 길이에 따라 높이는 자동으로 맞춰진다)
padding: 25px;
border: 5px solid navy;
margin: 25px;
}
</style>
CSS3 박스 모델은 margin / content / padding, border 로 구성되어 있다
margin 여백
content 내용물
padding 박스 속 크기
border 박스 외곽 테두리의 두께
JavaScript
basic
### 변수 선언 let / var / const
# let vs var
let 을 써야한다
var a = 10;
var a = 20;
var 는 이런식으로 중복선언이 가능하여 실수 유발의 가능성이 있지만
let 은 변수의 최초 선언이 한번만 가능하기 때문에 변수 이름을 중복선언하여 에러를 일으킬 염려가 없으며
다른 언어와도 그 쓰임새가 같다.
# const 값을 한번 선언하면 바꿀 수 없는 상수로 선언
Math.PI # 3.14159~ 내장된 상수
Math.sqrt(num) # 루트num
Math.ceil(num) # 올림
Math.random() # 0이상 1미만의 소수, 난수
Math.random() *num # 0이상 num미만의 소수, 난수
Math.random() *num +num2 # num2이상 num+num2미만의 소수, 난수 ( num2는 최솟값, num은 최댓값-최솟값 )
최대, 최소 두 값 사이의 난수를 생성하는 펑션
function getRandomArbitrary(min, max)
{return Math.random() * (max - min) + min;}
참고: Math.random()은 암호학적으로 안전한 난수를 제공하지 않으므로, 보안과 관련된 어떤 것에도
이 함수를 사용해서는 안 된다. 그 대신 Web Crypto API의 window.crypto.getRandomValues()
메소드를 이용하여야 한다.
Template literals :
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.
이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.
console.log(`a=${a},b=${b}`)
# 파이썬의 f스트링과 같다 ${} 안애 변수를 넣는다
인덱스
변수[변수.length-1] : 양수인덱스는 파이썬과 같지만 음수인덱스는 존재하지 않기 때문에
파이썬의 len과 같은 .length를 활용하여
변수.length를 앞에 붙이면 파이썬의 음수인덱스처럼 사용이 가능하다
(python) 변수[-1] == (js) 변수[변수.length-1]
ex) console.log(array[array.length-1])
array.length # 배열의 길이를 반환 파이썬의 len(리스트)
new Date() 현재 날짜/시간등을 알려준다 2022-09-10T08:33:16.767Z (타입은 object)
new Date().toLocaleString # 현재시각을 올바로 표시하는법. # 투로컬스트링은 배열의 각 요소들을 문자로 뽑아준다.
new Date().getFullYear() 현재년만 뽑기
new Date().getMonth()+1 현재월만 뽑기, 겟먼스는 현재월에서 -1 값을 뽑기 때문에 +1을 해야한다
(1월=0, 2월=1 이런식으로 0부터 시작하기 때문)
new Date().getHours() 현재시간만 뽑기
typeof (파이썬의 type)
console.log( typeof(변수), typeof 변수 ) #두가지 사용법
# typeof 다음에 여러개의 값이 연달아 나올 때는 ( )가 필요하다
# AND 와 OR
AND는 && 그리고 / 둘다 참이라야 참 / 곱
OR은 || 또는 / 둘중 하나라도 참이면 참 / 합
# bool (typeof 는 boolean 이다)
console.log( 4>3); # 트루
console.log( 4>3 && 10>8); # 트루 && 는 파이썬에서 and 의 의미
console.log( '가방'<'나무' || false); # 출력 트루
# 가방/나무는 가나다순으로봐서 가방이 작기 때문에 트루다
그리고 트루와 폴스의 or 연산이기 때문에 결과적으로 트루
console.log(today.getHours() >= 9 && today.getHours() < 18 ); # 수업시가이 맞는지 아닌지 확인하는 코드
console.log( Boolean(0), Boolean(1), Boolean('') ,Boolean(' '), Boolean(undefined) )
출력 false true false true false
console.log( Number(true), Number(false))
출력 1 0
# undefined
let 변수;
변수이름만 선언을 하고 value를 주지 않았을 때 - 언디파인드 타입이다
# 증감연산자
let a = 20
let b = 1
# 변수++ 는 연산을 먼저 하고 +1을 한다 # ++변수는 +1을 먼저 하고 연산을 한다
console.log(a++, ++b) # 출력 20 2
console.log(a++, ++b) # 출력 21 3
# -- 는 -1
# 일치연산자
console.log (1 == 1.0 , 1 != 1.0 ) # true false
console.log (1 === 1.0 , 1 !== 1.0 ) # true false # ===는 자료형까지 같은지 > 둘다 넘퍼 타입이라 트루
console.log (1 == '1' , 1 != '1' ) # true false
console.log (1 === '1' , 1 !== '1' ) # false true
# 강제 자료형변환
# 넘버와 스트링
console.log( '101', Number('101')) # 문자백일이 숫자 백일로 변환되어출력됨 출력모양은 같고 출력색이 다르다
console.log( 101, String(101)) # 숫자를 문자로
console.log( Number('문자'))
출력 NaN (낫 어 넘버)
console.log( Number(true), Number(false))
출력 1 0
# 자동 자로형 변환
# 숫자 + 문자, 문자 + 숫자
console.log( typeof(52+'37'), typeof('52'+37)) # 둘다 string 이다.
console.log( 21+31+'37') # 5237 string ( 앞의 21+31은 숫자연산 뒤에 ='37'은 문자로
console.log( 1 + true ) # 출력 2
console.log( true + 'bool') # 출력 truebool 문자형
진수
console.log( Number('0o123') ) # 출력 83
# 8진수 123을 10진수로 바꾸라는 말 > 83
console.log( Number('0x123') ) # 출력 291
# 16진수 123을 10진수로 바꾸라는 말 > 291
console.log( Number('0b101') ) # 출력 5
# 2진수 101을 10진수로 바꾸라는 말 > 5
html 에서 javascript 사용 방법
<script></script> 속에 자바스크립트 코드를 넣는다
# 콘솔로그와 도큐먼트라이트의 차이
<script>
console.log('hello-consolelog'); # f12누르고 콘솔 누르면 뜨는 곳에 출력
document.write('hello-docuwrit'); # 인터넷창에서 보이는 것
</script>
# 얼럿과 프롬프트의 차이
<script>
alert('Hello!!'); # 새 작은 창을 띄워서 문구를 표시한다
prompt('Hello Wold!!!','입력하세요'); # 새 작은 창을 띄워서 앞 문구를 표시하고 유저에게 입력받을
칸에 뒤 문구를 표시한다
</script>
# 이너텍스트와 이너에이치티엠엘의 차이
<body>
<p id="ptag"></p>
<p id="ptag2"></p>
<script>
document.getElementById('ptag').innerText = 'Hello World!!! - innerText';
document.getElementById('ptag2').innerHTML = '<h1>Hello World!!! - innerHTML</h1>';
</script>
</body>
# 이너텍스트 안에서는 <h1>같은 태그가 안 먹히고 '<h1>' 문자로 표시된다
조건문
숫자를 입력 받고 짝수인지 홀수인지 알려주는
<input type="text" id="num" placeholder="정수를입력하세요">
<button onclick="evenOdd()">버튼</button> # 버튼button을누르면 이븐오드 펑션 작동
<p id="result"></p> # 결과를 출력할 곳
<script>
function evenOdd() {
const num = Number(document.getElementById('num').value); //.value 인풋값가져오기
const res = document.getElementById('result');
if (num%2 === 0) {
res.innerHTML = '<h4>짝수입니다.</h4>';} # 짝수입니다 가 id result 로 들어간다
if (num%2 === 1) { //이프대신 엘스가능9
res.innerHTML = '<h4>홀수입니다.</h4>';} }
</script>
# 삼항연산자, 조건 연산자 : 파이썬의 리스트컴프리헨션 같은 기능
const amPm = currentTime.getHours() < 12 ? '오전' : '오후' ;
# 조건 ? True시 : False시
const month = Math.ceil(Math.random() * 12);
const mon = parseInt(month/3);
const season = mon==1 ? '봄' : mon ==2 ? '여름' : mon ==3 ? '가을' : '겨울';
console.log(month, season)
parseInt() 함수
parseInt("10", 2); # 2 # 파라미터 "10"을 2진법으로 읽어서, 10진법으로 변환한 값을 리턴하였습니다.
parseInt("10") # 10 # 문자를 숫자형으로 변환한다
parseInt("10.1", "10.9") # 10, 10 소수점을 버리고 정수형으로 반환한다
parseInt("10n"); # 10
parseInt("10nnn13"); # 10
parseInt(" 10"); # 10
parseInt("10 "); # 10
정수, 난수, 랜덤값
const 변수 = Math.ceil(Math.random() * 12); # *없으면 0이상1미만 있으면 0이상 *값미만의 난수, 소수
# ceil 올림 이라 결국 1부터 12의 정수, 난수를 생성한다 > 1월부터 12월까지 랜덤값으로 사용
버튼실행문 만들기
<script src="ptest.js"></script> # 펑션 저장된 js파일 경로, 로드
<h3>문제 3. 학점 판단</h3> # h~1,2,3 제목태그
<input id="gradej" placeholder="점수를입력하세요"> # placeholder 네모칸 들어갈 말
<button onclick="ex3()">실행</button> # onclick 버튼 클릭 시 실행할 펑션이름 , >버튼에쓸말<
<p id="grade"></p> # 출력문 이너텍스트로 넣을 공간
# js파일 # 아이디밸류로 받아서 아이디이너텍스트로 넣어주기
function ex3() {
const gradej = document.getElementById('gradej').value
let grade;
if (90 <= gradej) { grade='A' }
else if (80 <= gradej && gradej < 90 ) { grade='B' }
else if (70 <= gradej && gradej < 80) { grade='C' }
else if (60 <= gradej && gradej < 70) { grade='D' }
else { grade='F' }
document.getElementById('grade').innerText = `${gradej}점은 ${grade}학점입니다.`;
}
반복문
array 배열의 타입
typeof array # object
# 배열에 원소 추가하기 / 파이썬의 append 하는 법
array.push('push') # array.append('push') 와 같다
array[array.length] = 88; # array.append(88) 과 같다 array.length가 인덱스로 잡히면
가장 마지막 원소 그 다음 인덱스
# 원소 뽑아서 출력하기
console.log(array.toString()); # [ ] 를 벗기고 원소를 출력한다, '문자'도 문자 로 바꿔서 출력한다
# 기본 for-loop 포문
let array = [1,2,3]
for (let i=0; i < array.length; i++) { # for ( 렛초기값, 조건, 증감분 ) { }
console.log( i, array[i]) }
# 어레이렝스를 조건으로 하여 인덱스를 잡아서 모든 원소를 출력하는 코드
# 배열의 원소 하나당 한줄씩 출려하는 코드
for (let 변수 of array) {
console.log(변수); }
# 변수 다중 선언
let number = 1, sum = 0;
# scope rule 스코프룰
sum=0
for (let i=1; i<1000; i++){ # ()안에서선언한 변수i는 {}안에서만유효함(scope rule이라고한다)
sum+=i # 그래서 아래 콘솔로그에서 i가 언디파인
if(sum>1000)
break}
console.log(sum,i)
# factorial 팩토리얼 : 두가지 방법
let product = 1;
let a;
for ( a=10 ; a>=2; a--){
product *= a}
console.log(product)
let product2 = 1;
for (let i=1; i<=10; i++) {
product2 *= i;
}
console.log(`1에서 10까지 정수의 곱은 ${product2} 입니다.`);
# 약수 구하기 (약수 : divisor [디바이저] )
let input = 120;
let divisors = []; # 약수를 넣을 빈 배열 선언
for (let i=1; i<=input; i++) {
if (input % i == 0) {
divisors.push(i); # 푸시: 파이썬의 어펜드
}
}
console.log(divisors);
### for 강화
# for of
for (let 변수 of array) { console.log(변수) } # 배열의 원소들을 하나씩 뽑는다
# for in
for (let i in array) { console.log(i, array[i]) } # 배열의 인덱스 0 부터~ 뽑기
# 배열에[인덱스]를 걸어서 인덱,원소를 뽑으면 파이썬의 enumerate 같은 효과
# 피타고라스의 정리를 따르는 직각삼각형의 세변 a < b < c 의 길이 구하기
for (let c = 1; c < 100; c++) { # c 100 미만의 선에서 피~를만족하는 a,b,c를 구한다
for (let b = 1; b < c; b++) {
for (let a = 1; a < b; a++) {
if (a*a + b*b == c*c) {
console.log(a, b, c);
}
}
}
}
# 완전수 perfect number
: 자기 자신을 제외한 약수의 합이 자기 자신과 같은 수
ex) 6 의 약수 [1,2,3,6] 에서 6을 제외한 약수의 합은 6
Q. 10000 이하의 수 중 완전수를 구하시오.
for (let i=1; i<=10000; i++) {
let divisors =[];
for (let k=1; k<i; k++) {if(i % k == 0) {divisors.push(k);} }
let sum=0;
for (let div of divisors) {sum+=div;}
if(sum == i) {console.log(i); console.log(divisors.toString());}
}
# <pre> </pre> 태그
<pre>
pre 요소 내의 텍스트는
고정폭 글꼴(fixed-width font)을 사용하여 표현되며,
사용된 띄어쓰기와 줄바꿈이 모두 그대로 브라우저 화면에 나타납니다.
</pre>
# 홀수를 input으로 받으면 *로 다이아몬드를 그리는 함수
function ex01() {
const num = parseInt(document.getElementById('num').value);
const half = parseInt(num/2);
let diamond = '';
for (let i=1; i <= half+1; i++) {
let stars = '';
for (let k=1; k <= half+1-i; k++)
stars += ' ';
for (let k=1; k <= 2*i-1; k++)
stars += '*';
diamond += stars + '\n';
}
for (let i=half; i>=1; i--) {
let stars = '';
for (let k=1; k <= half+1-i; k++)
stars += ' ';
for (let k=1; k <= 2*i-1; k++)
stars += '*';
diamond += stars + '\n';
}
document.getElementById('pre').innerText = diamond;
}
# 1보다 큰 홀수를 입력 받았는지 검사
<script>
function checkOdd() {
if (parseInt(document.getElementById("num").value) > 1 &&
parseInt(document.getElementById("num").value) % 2 == 1)
{ ex01() }
else { document.getElementById("pre").innerText = '1보다 큰 홀수를 입력하세요.' }
}
</script>
함수
# 함수 이름을 갖는 기본 함수
function funcName() {
console.log('함수 이름을 갖는 함수');
}
funcName();
# 익명함수
const fn = function() { #function ee() 여기서 ee처럼 ()앞에 뭐가 들어가도 error는 안나지만 없는 것과 같은 취급
console.log('익명함수');
}
fn();
# 화살표함수 arrow function
const arrowFunc = () => {
console.log('화살표함수');
}
arrowFunc();
const square = (x) => { # () 안 변수가하나면 괄호생략가능 = (x) => 를 = x => 로
return x*x;
}
const sq = x => x*x; # 함수 안 내용 { } 안에 내용이 리턴 하나만 있으면 { }랑 리턴을 생략가능
console.log(sq(10))
const square2 = (x,y) => {
return x*x + y*y ;
}
console.log(square2(3,4))
# 짝수면 제곱수, 홀수면 세제곱
const myFunc = x => x%2==0 ? x*x : x*x*x
console.log(myFunc(2),myFunc(3))
# 펑션 두개를 활용한 완전수 perfect number 코드
function getDivisors(num) {
let divisors = [];
for (let k=1; k<num; k++) {
if (num % k == 0) {
divisors.push(k);
}
}
return divisors;
}
function sumArray(array) {
let sum = 0;
for (let div of array) {
sum += div;
}
return sum;
}
for (let i=2; i<=10000; i++) {
const array = getDivisors(i);
const arrSum = sumArray(array);
if (arrSum==i) {
console.log(i);
console.log(array.toString());
}
}
# if () {} 이프문 변형
# 모두 같은 코드
if (!count) {count = 0;}
count = count ? count : 0;
count = count || 0; # || 또는
# 콜백 callback
function callFiveTimes(callba1){
for (let i=0; i<2; i++){
callba1();
}
}
const cb = function ct() {
console.log('함수호출완료');
}
callFiveTimes(cb);
callFiveTimes(function() {
console.log('함수호출완료');
});
callFiveTimes( () => {
console.log('함수호출완료');
});
# 숫자변환
const a = '52.23' , b = '52.23' ;
console.log(parseInt(a),parseFloat(b))
const c = '1501동';
console.log(parseInt(c),parseFloat(c));
# setTimeout 함수, 타임아웃 설정
setTimeout( function () {console.log('타임아웃발생(3초후)');} , 3000 );
# setInterval 함수, 인터벌
setInterval( function () {console.log(new Date());} , 3000 );
setInterval( () => {console.log(new Date());}, 3000 );
# clearInterval 함수
# 셋타임아웃과 셋인터벌, 클리어인터벌을 활용 무한코드에 타임아웃 걸기
const si = setInterval( () => {
console.log(new Date());
}, 1000);
setTimeout(()=>{
clearInterval(si);
},5000);
# 재귀함수 recursion 어떤 것을 참조할 떄 자기 자신을 참조하는 것
1. num팩토리얼 코드
const num = 5;
let product = 1;
for (let i=1; i<=num; i++) {
product *= i;
}
console.log(`${num}!은 ${product}입니다.`);
2. 재귀함수로 팩토리얼 구현
function factorial(n) {
if (n == 0)
return 1;
return n * factorial(n-1);
}
console.log(`10!은 ${factorial(10)}입니다.`);
3. 재귀함수로 fibonacci 피보나치수열 구현
function fibo(n) {
if (n == 0 || n == 1)
return 1;
return fibo(n-1) + fibo(n-2);
}
for (let i=0; i<10; i++)
console.log(fibo(i));
객체
## 기본, 객체
let fruits = ["사과", "배","감"];
let arrayPersonInfo =["제임스",28, "남자"]
let personInfo = {
"name":"제임스", "age":28, "gender":"남자"
}
console.log(personInfo["name"])
let maria= {name : "마리아", age :24, gender :"여자"};
console.log(maria.age);
const key = "age";
console.log(maria[key]);
## 반복문
;
