Git repository

210809

HTML 문법검사에서 제외시키기

<script type="text/javascript">
//<![CDATA[

Input Javascript code ...

//]]>
</script>

자바스크립트 기본문법 / document.write 메서드

document.write("재미있는 자바스크립트" + "<br />");

매개변수 출력하는 메서드
객체.메서드(); - 객체기반언어
object.method();

변수 선언 및 초기화

var num = 10;

변수명 작성시 주의사항
대,소문자 구분
변수명 앞에 영문, _, $ 올수있음
변수명에는 영문, 숫자, _, $
숫자로시작x

변수에 저장 가능한 데이터타입

문자열, 숫자, 논리(불린), 널

    var txt1 = "자바스크립트"; // 문자형 String
    var txt2 = '10'; // 큰or작은 따옴표 안에 입력하면 문자형

    var num=10; // 숫자형 Number

    var result = true; // 논리형 bool(참:true, 거짓:false)

    var result = null; // 널형 null, 비어있음

연산자

 산술연산자,이항연산자 +,-,*,/,%(나머지)
 

비교연산자

비교연산자- 값:true참, false거짓
A > B
A>=B, A<B, A<=B, A==B 데이터타입일치x, A!=B,
A===B 데이터타입일치, A!==B

대입연산자

=, +=, -=, /=, %=

증감연산자

++1씩 증가, --1씩 감소

논리연산자

||논리합(or), &&논리곱(and), !논리부정 - true참1, false거짓0

true || true -> true
true || flase -> true
false || false -> false

true && true -> true
true && false -> false
false && flase -> false

!true -> false
!false -> true

prompt함수

var a = prompt("질문내용","기본답변제시");

"질문내용"과 "기본답변제시"가 있는 입력창이 뜨고,
사용자가 입력한 값이 a에 문자열로 저장 됨

Number함수

var a = Number(prompt("국어점수는?","0"));
문자열->숫자 형변환

String함수

var num1 = 200;
var num2 = 300;
var txt5 = String(num1);//'200'
document.write(num1 + num2 + txt5 + "<br />");//500200

숫자->문자열 형변환

문자결합 연산자

var txt1 = "아름다운";
var txt2 = "우리강산";
document.write(txt1 + txt2 + "<br />");//아름다운우리강산

삼항연산자

num1 >= num2 ? alert("참이다") : alert("거짓이다");

alert함수

alert("메시지");

"메시지"가 담긴 경고창 띄우는 함수

confirm함수

var result = confirm("메시지");

"메시지"가 담긴 확인/취소 창 띄우고 사용자가 입력한 값(true/false)을 반환하는 함수

210810

조건문

if문

if(조건식){
	실행문;
}

if~else문

if(조건식){
    실행문1;
}else{
    실행문2;
}

if~else if문

if(조건식1){
    실행문1;
}else if(조건식2){
    실행문2;
}else{
    실행문3;
}

else if는 여러개 올 수 있음

swithch~case문

지정한 변수에 저장된 데이터와 정확히 일치하는 경우 사용

num = 3;

switch(num){
case 1:
        실행문1;
        break;
case 2:
        실행문2;
        break;
case 3:
        실행문3;
        break;
default:
        실행문4;
        break;
}

반복문

while문

특정 조건을 만족하는 동안 실행문을 반복적으로 수행

var i = 초기값;
while(조건식){
    실행문;
    증감식;
}

for문

for(var k=초기값; 조건식; 증감식){
    실행문;
}

210811

break문

해당 반복문을 종료

continue문

반복문이 continue문을 만나면 더이상 실행문을 수행하지 않고 증감식으로 돌아가서 실행문 반복한다.

객체

자바스크립트는 객체기반 언어다.
객체 - 특정 기능을 수행하는 단위체
메서드 - 객체가 지닌 각각의 기능

object.method();
휴대폰.통화하기(); - 메서드
휴대폰.색상; - 속성

새로운 객체를 생성할때 - new 연산자, new 내장객체함수명

var todayObj = new Date();
todayObj.getFullYear();

Date 객체

Date 객체
var 변수 = new Date();
var 변수 = new Date(년,월,일,시,분,초);

날짜 제공 메서드
getFullYear()
getMonth() 0~11
getDate()
getDay() 요일 0(일요일)~6(토요일)
getHours() 시간(0~23)
getMinutes() 분(0~59)
getMulliseconds() 1/1000초
getTime() 1970년1월1일 이후부터 경과된 밀리초 제공

날짜 지정 메서드
setFullYear()
setMonth() 0~11
setDate()
setDay() 요일 0(일요일)~6(토요일)
setHours() 시간(0~23)
setMinuets() 분(0~59)
setSeconds() 초(0~59)
setMilliseconds() 1/1000초
setTime() 현재까지 경과된 밀리초 새로 지정
toGMTString() 날짜를 그리니치천문대 표준시로 표시
toString() 날짜를 문자형식으로 표시

210812

math 객체

new연산자를 사용하지 않음
메서드
max(,,); 최대값
min(,,); 최소값
round(); 소수점 첫째자리 반올림
ceil(); 소수점 무조건 올림
floor(); 소수점 무조건 절삭
abs(); 절대값
random(); 0~1사이 난수 발생

math.random 메서드 활용(난수발생)

//Math.random()*(갯수) + 시작수
//1~n인 난수 발생시키는 코드
Math.floor(Math.random()*n+1);

String 객체

문자형 변수도 String 객체임. new연산자를 사용하지 않아도 됨.
var 변수(인스턴스 네임) = new String("자바스크립트");
var 변수 = "자바스크립트";

매서드
.bold()
.link("URL")
.length - 텍스트의 개수 반환
.toLowerCase()
.toUpperCase()
.indexOf("i") - i를 찾아서 최초로 일치하는 인덱스번호 반환, 없으면 -1반환
.lastIndexOf("i")
.charAt(5) - 5번 인덱스에 저장된 문자 데이터를 반환
.substring(4,6) - 인덱스4~6직전 문자 반환
.slice(7,9) - 인덱스7~9직전 문자 반환(인덱스 하나면 거기부터 끝까지)
.substr(10,3) - 10번 인덱스부터 3글자 반환
.replace("web", "bye") - 텍스트를 교체
.concat("good") - 끝에 good단어를 결합해서 반환
.split("") - ""공백을 기준으로 데이터 분리(콤마, [0], [1])

parseInt("문자열"); 함수

문자열 내에서 정수만 추출하는 함수

210813

배열

배열 - 하나의 변수에 여러 개의 데이터를 저장

var 변수 = new Array();
변수[0] = "값1"
변수[1] = "값2"
변수[2] = "값3"

var 변수 = new Array(3);

var 변수 = [값1, 값2, 값3];

메서드
reverse() 역순 변환
slice(1,2) 인덱스 1~2 직전까지 반환
sort() 오름차순 정렬
join("구분자") 구분자로 데이터 연결(결과는배열x)
concat() 하나로 결합

shift() 첫인덱스0 데이터 삭제
pop() 마지막인덱스 데이터 삭제
unshift(값) 첫인덱스0 새데이터 중첩하여 추가
push(값) 마지막 인덱스에 새데이터 중첩하여 추가

length 갯수반환
splice(a,b) 인덱스 a에서부터 b개 데이터 삭제

함수

함수 - 일련의 실행문들을 메모리에 저장했다가 필요할 때 함수이름으로 호출해서 사용
내장함수, 사용자정의함수
지역변수, 전역변수

function 함수명(매개변수1,매개변수2){
    실행문;
} // 선언

함수명(인자값1,인자값2); // 호출

매개변수와 인자값은 갯수를 맞춰야 하고 0개 ~ n개가 될 수 있음

HTML에서 함수의 호출

1.매개변수 있는 함수
script에서 선언

function greet(theText){
    alert(theText);
} // 매개변수를 받아 출력하는 함수

HTML에서 호출

<button onclick="greet('안녕하세요!!');">들어오기</button>/*버튼이 눌렸을 경우 함수 실행*/

2.매개변수 없는 함수
script에서 선언

var num = 1;

function nextGallery(){
    num++;
    if(num>7) num = 1;
    document.getElementById("gallery").src="images/img"+num+"-31.jpg";
    return false;//링크 이동하지 않고 종료
} // #gallery의 src를 찾아 num증가시키는 함수

HTML에서 호출

<a href="#" onclick="prevGallery();"><img src="images/left_btn-31.png" alt="이전 그림 버튼"></a>
<img src="images/img1-31.jpg" alt="갤러리 그림" id="gallery" />
/*링크가 눌렸을 경우 함수 실행*/

document.getElementById("id"); 메서드

HTML상의 id를 찾아 가져오는 함수

figma 앱디자인 완료