JavaScript

자바스크립트는 <script> 안에 작성해야 한다.</script>  <script src="자바스크립트 경로/파일명.js"></script>

항상 문자열은 문자처리하고각 실행구문뒤에는 세미콜론으로 마무리

입력	prompt('입력 제목','입력 내용')
출력	document.write('출력 내용')
	alert('경고 내용')
	console.log('브라우저 콜솔에 내용 출력문')
확인	confirm('확인 내용')

location.href="1230_01.html";

sum += num   ====>    sum = sum + num과같다.

1. HTML element에 쓰기 위해서는 innerHTML을 이용한다.

2. HTML에 output으로 쓰기 위해서는 document.write()를 이용한다.

3. alert box를 쓰기 위해서는 window.alert()를 이용한다.

4. browser console에 쓰기 위해서는 console.log()를 이용한다.

 

데이터타입 = 1. 숫자형 2.문자형 3.boolean 참거짓형 4.undefined형 5. null형

논리연산자 a && b = a와b 참일떄 a || b = a와b둘중 하나만참이면 a ! b = 아니면 참을 거짓으로 거짓을 참으로

삼항연산자 document.write((a>b)?a-b:b-a);  //(조건식)?참:거짓 //   참이라면 좌측실행 거짓이라면 우측실행

 

변수선언

    var a;  //변수 a를 선언 var은 변수선언과 업데이트 가능
    let b; // let은 변수선언 다시 못하지만 b=3; 이렇게 값의 업데이트 가능
    const c; c = 2j // const는 상수로서 한번선언하면 업데이트와 값의 변경이 이루어지지않음 메모리상에 저장되는게 변수

 

hakjum = "A"; 문자의 전역변수 

var jumsu = 0; 숫자형의 전역변수
지역변수는 문자형과 숫자형을받음 

 

어떠한 행위를 하다가 continue문을 만나면 해야할 명령문을 실행하지 않고 그 다음 명령문을 실행하는 명령문

 

1. for(a = 1; a <= 10; a++){
2. if(a == 7){
3. continue;
4. }
5. document.write(a+"<br />");
6.  

일때  6까지출력되고난후 7인 조건이 참이니까 continue로 인해 실행하지않고 8 9 10을 출력하게됨

 

break문은 if,switch,for,while문등에서 break문을 만나면 바로 빠져나가는 명령문

 

switch문예제

 

switch (g){   //case가 즉 switcH(g) 조건식의 g가되는것  문자열이니 쌍따옴표고 숫자열이면 쌍따옴표 없어도 된다.

case "사과":
price = 2000; break;

case "바나나":
price = 3000; break;

case "딸기":
price = 4000; break;

default :   //else 역할
price = 0;
}

 

if구문형태  

if(비교참거짓조건){
    참이면 실행
}else if(조건2){
 else if의 조건2가 참이면실행
}else{
 거짓+ 나머지일경우 실행
}

 

for구문형태

for(초기문; 조건식; 반복 후 작업){

-작업문-

}

1.초기문 > 2.조건식(참or거짓) > 3.작업문 > 4.반복 후 작업 순서로 진행

 

while구문형태

var i = 0;

while(i<10){

document.write(i + "<br>");

i++; 

}               Tip : while조건이 참일경우 실행한다  true일경우 작업문될때까지 실행

 

do while구문형태

var i = 0;

do {

document.write(i + "<br>");

i++;

} while (i<10);            Tip : do 문에서 한번 실행후 while() 조건에 따라 실행한다.

 

parseInt  = 정수화Number = 실수화

 

function ch(){str.style.color = "black";}    
<button onclick="ch()">클릭했을 때</button>
<button onmouseover="ch()">마우스를 올렸을 때</button>
<button onmouseout="ch()">마우스가 나갔을떄</button>

각각에 해당할떄 ch함수안의 작업문를 실핼하게됨.

 

name 은 폼 전송 이벤트 발생 시 서버로 데이터 이름으로써 전송하기 위한 식별자 (id, class 와 비슷) 

사용자 입력값을 받을때 <input>과 <textarea>를 많이쓴다.
<pre></pre>는 약관을 쓸 때 많이쓰임

 

<form name= "" action="page68.html" method="get // post"></form>
post로 넘기느냐 get으로 넘기느냐 중요함   보통 안적혀있으면 다 get이다.
form의 디폴트값 action은 _self, method는 get방식

검색은 get방식 (서버에서 어떤 데이터를 가져와서 사용할때)
로그인,회원가입처럼 중요한 정보를 전송할때는 post방식 (서버상의 데이터 값이나 상태를 바꾸기 위해 사용)을 사용
중요함 

 

<a href="page68.html?id=1111&pass=2222">로그인</a> 아이디와 패스는 변수

placeholder= //인풋태그 안에 입력전 외관상 보여줄떄

<input required = "required" selected = "selected" readonly disabled> required 속성은 내용이 비어있을때 경고메시지를 주는 속성 readyonly disabled 읽기만가능 수정불가

 

selected 태그나 radio태그안에 selected 와 checked를 쓰면 쓴 영역을 체크하고 선택한 상태로 출력
selected 태그는 인풋의 타입이아니고 그냥 태그임 아래와같은 형태
<select name="m_gender2">
                           <option value="">=선택=</option>
                           <option value="M">남</option>
                           <option value="F">여</option>

</select>

 

브라우저는 html로드시 html을 객체로 만듬, DOM(Document Object Model). 객체로 문서 구조를 표현하는 방법

document.getElementById("f").style.color = "red";
document.getElementByClass("f").style.color = "blue;  //클래스와 네임은 약식으로 사용못함

innerHTML 프로퍼티는 시작.종료 태그 사이에 들어있는 HTML 컨텐츠를 나타내는 문자열 정보이다.

 

var num = Math.random(); // num은 0.000000 ~ 0.999999... 값이 생성

 

 

부모창 

<script>
    function order(){
    window.open("0105_12.html","a","width=10,height=10")    //자식창을 열고 이 문서는 opener(부모창)이 됨.
    }
</script>

커피명
<input id="result1">
<input id="result2">
<span onclick="order()">주문</span>

.////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

자식창

<script>
    
function cl(){
    opener.result1.value = cc.value;
    opener.result2.value = dd.value;
    window.close();
} 
</script>    
 
커피명 :<select id="cc">
    <option value="">=선택=</option>
    <option value="아메리카노">아메리카노</option>   
<!--    아메리카노는 단순텍스트일뿐 value값에 아메리카노가 저장된것이아님-->
    <option value="카라멜마키야또">카라멜마키야또</option>
    <option value="카페모카">카페모카</option>
</select>
<br>
컵 사이즈 :<select id="dd">
    <option value="">=선택=</option>
    <option value="3000">small</option>
    <option value="4000">tall</option>
    <option value="5000">grande</option>
</select>
<br>
<button onclick="cl()">주문완료</button>

<!--컵사이즈를 선택했을때 부모창에 커피명은 result1에 가격은 result2에-->

 

이미지 마우스 클릭 올렸을떄 나갔을때 이미지변경

<script> 
    function ch(num, str){
        document.body.style.backgroundImage = str;
        if(num == 1){
            img01.src = "../img/a1.jpg"
        }else if(num == 2){
            img01.src = "../img/a2.jpg";
        }else{
            location.href = "./0105_02.html";
        }
    }

</script>
<body style = "background-color:orange">
<img src = "../img/a1.jpg" id="img01" onmouseover="ch(1,'red')" onmouseout="ch(2,'blue')" onclick="ch(3,'')">