Day04 (이벤트, marquee 태그 텍스트 스크롤 막대, demo 계산기)

Alert(“”); 경고 상자 팝업하기;전체 쓰기: window.alert("실행문");윈도 창의 대상은 일반적으로 생략할 수 있습니다.Console 콘솔 출력;일반적으로 우리 프로그래머 테스트에 사용되며 디버깅 프로그램용:console.log("실행문");컨트롤러 출력, 일반 출력 문장;console.warn('집행문');컨트롤러 경고;console.error ("컨트롤러 오류 알림");콘솔 오류 알림;
문서 인쇄 출력:document.write(출력 실행);
문서 객체
JS, 저희 웹 페이지의 요소를 제어하는 데 사용됩니다.그럼, 그는 어떻게 통제했습니까?원소를 제어하려면 먼저 제어하고 싶은 원소를 찾아야 한다. ID는 영원히 유일하고 충돌하지 않기 때문에 우리는 일반적으로 ID로 우리가 바꿔야 할 원소를 찾는다.getElementById(‘s1’); get 요소 by id 이름으로 가져오기;
document.getElementById(‘s1’);
document.getElementById('s1').style.background='#efefef'
먼저 원소를 얻은 다음에 원소의 스타일을 바꾸고 스타일 내의 백그라운드 속성을 변경한다.JS에서 가로줄이 있는 CSS 속성을 바꾸고 모두 낙타봉 명명법을 사용한다.
사건
이벤트란?예를 들어 우리는 불을 켜고 우리는 손으로 스위치를 누르고 스위치 처리 프로그램을 켜고 전구를 밝힌다. 이것이 바로 사건이다.그러면 이벤트는 반드시 이벤트의 세 가지 요소가 있어야 한다. 그것이 바로 이벤트 원본 이벤트 처리 프로그램이다.
1.1 이벤트 소스
촉발할 대상은 손으로 출발한다. 그 손이 사건의 근원이다.
1.2 이벤트
어떻게 촉발합니까?누르다두드리다치다누르다

                
onclick             
ondblclick          
onkeyup                      ?  
onchange                        
onfocus           ，            。    
onblur            ，            。    
onmouseover       ，             
onmouseout        ，             
onload                  
onunload            
onsubmit                
onreset             

1.3 이벤트 처리기,
무슨 일이 일어났는지 사건 처리 프로그램의 불이 켜지고 문이 열렸다.
우리가 얻은 원소는 변수를 통해 저장할 수 있다!!!
그러면 하나의 사건의 전체 과정: 원소를 얻은 다음에 원소에 하나의 사건을 부여하고 마지막으로 사건에서 물건을 집행한다.

var a = document.getElementById('b1');
var s = document.getElementById('s1');
a.onclick = function() {
    s.style.background ='#efefef';
}

marquee 태그 텍스트 스크롤 막대
onmouseover 마우스가 이동하는 이벤트;onmouseout 마우스를 이벤트에서 꺼내기;
페이지 로드 함수:

window.onload=function(){
}

Google JS는 표준 문서 흐름에 속하기 때문에, 만약 Google JS를 페이지 요소의 앞머리에 쓰면 얻을 수 없습니다. 그러면 Google은 페이지에 불러온 이벤트를 통해 Google이 임의의 곳에 쓴 Window를 완성할 수 있습니다.onload는 브라우저가 열릴 때 페이지의 모든 요소가 한 번 불러옵니다.그래서 우리 페이지의 마운트 속도가 빨라지기 위해 보통 JS는 페이지 밑에 놓는다.
transform: rotate(45deg);회전 각도
this 키워드는 현재 함수를 가리킨다.event.target;//대상 이벤트 찾기;target 대상
이벤트 이벤트, 그럼 이벤트.target: 목표 이벤트 찾기;하위 원소에 적용할 수 있음;
계산 방법:eval();포함된 문자열의 연산 계산하기;
초점: 현재 창의 마우스 초점 가져오기;초점 상실: 현재 원소가 초점을 잃기;
초점을 맞추는 것도 이벤트가 있습니다. 그의 이름은:onfocus=function(){}초점을 잃는 것입니다.onblur=function(){}
계산기
구조

        

        

            
            
            
            

            
            
            
            

            
            
            
            

            
            
            

        
        C
        =
    

css 스타일

.box {
    width: 300px;
    border: 1px solid silver;
    text-align: center;
    margin: 50px auto;
}

.box input {
    height: 50px;
    margin: 3px 0;
    width: 70px;outline: none;
}

#input {
    width: 290px;
    text-align: right;
}

#chu,#btn,#clear{
    width: 144px;
}
#btn,#clear{
    margin: 0 0 3px 0;
    height: 50px;
}

js 목록

//       
window.onload = function(){
    //   
   var num = document.getElementById("num");          //          

   var input = document.getElementById("input");             //         

   var btn = document.getElementById("btn");                //      

   var clear = document.getElementById("clear");              //      

    //   
    //        
    num.onclick = function(event){           
       
        var x = event.target || event.srcElement;        //  

        if(x.value == undefined){
            //      undefined        。
        }else{
            input.value = input.value + x.value;
        }
    };
    
    //   
    //    
    btn.onclick = function(){
      
        if(input.value !="")                //   input          input     

        input.value = eval(input.value);       //   
    };
    
    //   
    //    
    clear.onclick = function(){
        input.value = "";
    };
};