JavaScript 기본 지식, 변수, 요소 와 요소 획득 작업: (1)

자 바스 크 립 트 저 는 전단 스 크 립 트 언어 자 바스 크 립 트 의 기본 개념, 페이지 도입 방식, 페이지 요소 와 요소 속성 을 가 져 오 는 기술, 함수 의 기본 정의 방법 과 사용 방법 을 배 웠 습 니 다.시간 이 빠 르 고 물건 이 많 습 니 다. 오늘 은 JS 가 얼마 남지 않 았 습 니 다. 쇠뿔 도 단 김 에 정 리 를 해 보 겠 습 니 다. 나중에 자신 이 정리 한 것 을 돌 이 켜 볼 수 있 고 이해 할 수 있 습 니 다.
물건 이 깨 진 것 도 많 습 니 다. 예전 에 모두 가 주류 언어 를 배 웠 기 때문에 쉽게 배 울 수 있 습 니 다. 프로 그래 밍 의 사상 이 있 기 때문에 배 운 지식 과 다른 언어의 문법 은 전체 디 렉 터 리 로 나 옵 니 다. 1: JavaScript 와 기본 사용 방법 이 무엇 입 니까? 2: 변수 3: 요소 획득 방법 4: 요소 조작 방법 5: 함수(폐쇄 함수) 6: 조건문 7: 배열 및 조작 방법 8: 순환 문 9: JavaScript 구성 10: 문자열 처리 방법 11: 디 버 깅 프로그램의 방법 12: 타이머 설정 13: 유형 변환 14: 패 킷 15: 내장 대상 16: 대상 대상 지향
디 렉 터 리 1:
자 바스 크 립 트 가 뭐 예요?
자 바스 크 립 트 는 브 라 우 저 에서 실행 되 는 발걸음 언어 입 니 다. 자 바스 크 립 트 는 주로 전단 과 사용자 의 상호작용 문 제 를 해결 합 니 다. 상호작용 과 데이터 상호작용 을 포함 합 니 다. 자 바스 크 립 트 는 브 라 우 저 설명 으로 실 행 됩 니 다.
앞부분 의 큰 덩어리 세 개.
1. HTML: 페이지 구조 2, CSS: 페이지 표현: 요소 크기, 색상, 위치, 숨 기기 또는 표시, 일부 애니메이션 효과 3, JavaScript: 페이지 행동: 일부 애니메이션 효과, 페이지 와 사용자 의 상호작용, 페이지 기능
앞의 HTML 과 CSS 는 이미 다 정 리 했 으 니 이어서 JS 를 정리 합 시다.
JavaScript 페이지 삽입 방식
줄 이벤트 (이벤트 에 주로 사용)

type="button" name="" onclick="alert('ok！');">

페이지 스 크 립 트 태그 삽입

<script type="text/javascript">        
    var a = '  ！';
    alert(a);
script>

외부 도입

<script type="text/javascript" src="js/index.js">script>

CSS 와 마찬가지 로 내부 도입 과 외부 도입 이 있 는데 지식 포 인 트 는 같 고 차이 점 은 도입 방식 이 다 를 뿐이다.
자 바스 크 립 트 문장 과 주석
javascript 문 구 는 ";" 로 끝내 야 합 니 다.

<script type="text/javascript">    
var a = 123;
var b = 'str';
function fn(){
    alert(a);
};
fn();
script>

만약 당신 이 이전에 python 을 배 웠 다 면 점 수 를 더 하 는 습관 이 없 었 을 것 입 니 다. 자바 등 이 었 다 면 이런 습관 이 있 었 을 것 입 니 다. 그러나 점 수 를 더 하지 않 아 도 틀 리 지 않 았 을 것 입 니 다. 그러나 사람들의 규범 은 더 해 야 합 니 다.
javascript 주석

"text/javascript"</span>>    

//     
var a = <span class="hljs-number">123</span>;
/*  
        
    <span class="hljs-number">1</span>、<span class="hljs-keyword">...</span>
    <span class="hljs-number">2</span>、<span class="hljs-keyword">...</span>
*/
var b = <span class="hljs-string">'str'</span>;

목록 2
변량
JavaScript 는 약 한 유형의 언어 이다.
javascript 의 변수 형식 은 값 에 의 해 결 정 됩 니 다. 변 수 를 정의 하려 면 키워드 'var' 를 사용 해 야 합 니 다. name 을 변수 이름 으로 사용 하지 않 는 것 이 좋 습 니 다. 틀 릴 수 있 기 때 문 입 니 다.

var a = 123;
var b = 'asd';

 //           ","  ，    ‘var’   

var c = 45,d='qwe',f='68';

변수 형식
5 가지 기본 데이터 유형: number, string, boolean, undefined, null 1 가지 복합 유형: object 3. 변수, 함수, 속성, 함수 매개 변수 명명 규범 1, 대소 문자 구분 2, 첫 번 째 문 자 는 반드시 자모, 밑줄 () 또는 달러 기호 ($) 3 이 어야 합 니 다. 그 문 자 는 자모, 밑줄, 달러 기호 또는 숫자 일 수 있 습 니 다.
목록 3
원소 획득 방법 1
내 장 된 대상 document 의 getElement ById 방법 으로 페이지 에 id 속성 을 설정 한 요 소 를 가 져 올 수 있 습 니 다. html 대상 을 가 져 온 다음 에 변 수 를 할당 할 수 있 습 니 다. 예 를 들 어:

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
script>
....
<div id="div1">    div  div>

위의 문 구 는 자바 script 을 요소 위 에 쓰 면 오류 가 발생 합 니 다. 페이지 에서 위 에서 아래로 불 러 와 실 행 된 것 이기 때문에 자바 script 이 페이지 에 요소 div 1 을 가 져 올 때 요소 div 1 을 불 러 오지 않 았 습 니 다. 해결 방법 은 두 가지 가 있 습 니 다. 첫 번 째 방법 은 자바 script 을 페이지 맨 아래 에 놓 는 것 입 니 다.

....
<div id="div1">    div  div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
script>
body>

두 번 째 방법: 자바 script 문 구 를 window. onload (창 불 러 오기 완료 대기) 가 촉발 하 는 함수 에 넣 으 면 요 소 를 가 져 오 는 문 구 는 페이지 에 불 러 온 후에 실 행 됩 니 다. 오류 가 발생 하지 않 습 니 다.

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
script>

....

<div id="div1">    div  div>

원 소 를 가 져 오 는 두 번 째 방법
document. getElementsByTagName (") 은 선택 집합 이자 배열 을 가 져 옵 니 다. 하지만 아래 표 시 된 방식 으로 집합 에 있 는 dom 요 소 를 선택 할 수 있 습 니 다.
목록 4
조작 요소 속성
가 져 온 페이지 요 소 는 페이지 요소 의 속성 을 조작 할 수 있 습 니 다. 속성의 동작 은 속성의 읽 기와 쓰 기 를 포함 합 니 다. 속성 을 조작 하 는 방법 1, "," 조작 2, "[]" 조작 속성 쓰기 1, html 의 속성 은 js 의 속성 쓰기 와 같 습 니 다. 2, "class" 속성 은 "className" 3, "style" 로 씁 니 다.속성 안의 속성 은 가로 줄 이 있 는 것 을 낙타 봉 식 으로 바 꿉 니 다. 예 를 들 어 "font - size" 는 "style. font Size" 를 통 해 "." 조작 속성 으로 바 꿉 니 다.

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        //      
        var val = oInput.value;
        var typ = oInput.type;
        var nam = oInput.name;
        var links = oA.href;
        //  (  )  
        oA.style.color = 'red';
        oA.style.fontSize = val;
    }

script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.laowang.com" id="link1">  a>

"[]" 를 통 해 속성 조작:

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        //     
        var val1 = oInput1.value;
        var val2 = oInput2.value;
        //  (  )  
        // oA.style.val1 = val2;    
        oA.style[val1] = val2;        
    }

script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.laowang.com" id="link1">a>

두 번 째 방법 은 통용 되 는 것 이 바로 '[]' 를 사용 하 는 것 이다. 첫 번 째 방법 '은 통용 되 지 않 기 때문에 두 번 째 방법 을 사용 하여 좋 은 습관 을 기 르 는 것 을 권장 한다. 앞으로 많은 실 수 를 피 할 것 이다.