[js 간단 요약] 자바스크립트를 배워서 공포감을 없애자!

16229 단어 HTMLJavaScript

개략


최근 타이타니움을 다루고 있는데 JS에 대해 자세히 알지 못해서 1부터 배워서 기사를 싣고 싶어요.
어쨌든 웹으로 만져보세요.왜냐하면 반응이 있으면 너무 좋아!
효능: 주로 나의 공포심과 도구 정도.
프로젝트는 대충 알 수 있을 거예요.하지만 자바스크립트는 잘 모르겠지만 움직일 수 있습니다.이게 뭐가 무서워?
그런 사람들이 이 기사를 읽으면 자바스크립트에 대한 공포심이 옅어졌으면 좋겠다고 생각합니다.
''''''와의 협력을 주축으로 대화 진행
-초보자졸업☆
- 난 생JS를 보고 싶지 않아!
- 단독행동을 만드는 JS!
나는 이런 사람에게 적합하지 않다고 생각한다. 주의해라.
우선,javascript를 사용합니다.

당장 js를 꼼꼼히 씹어라.초도입편


캔버스로 간단히 설명해 주세요.
canvas는 웹에서 브라우저에 그림을 그리기 위해 만들어진 규격으로 자바스크립트와 유사한 조작을 간단하게 할 수 있으니 이걸로 배우세요.(마음에 드는 사람은 걸어다녀야 한다!)
당분간 이런 글자를 써라.자세하게 썼으니 신경 쓰지 마세요.
index.html
<html lang="ja">
  <head>
    <!-- ページの文字コード設定 -->
    <meta charset="utf-8">
    <title>なんとなくJSを使う</title>
  </head>
  <body>
    <section>
      <canvas id="mycanvas" width="700" height="300" style="border: solid; 1px #999;></canvas>
      <script>
      </script>
    </section
  </body>
</html>
다 됐어요?
브라우저로 열면 CSS로 사각형만 만들었을 뿐, 나는 사각형만 나왔다고 생각한다.그 사각에는 화포가 있다.
그럼 얼른 공백의 캔버스에script 라벨에 js를 쓰세요!
index.html
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#00bfff";
  ctx.fillRect(20, 20, 50, 100);
이것을 브라우저에 써서 열어 보세요.사각형 있죠?
해설1:document.getElementById("mycanvas");
Javascript의 특징으로 브라우저에 로드된 ""은document 객체로 나타낼 수 있습니다.
document. ~~ 그럼 다양한 정보에 접근할 수 있겠네요.
그중.getElementById는 상당히 기본적인 기초이다)에 기술된 라벨의 id 부분은 우수한 것이다.
이것만 알면 뭐든지 할 수 있어요.
해설
해설2: var ctx=canvas.getContext("2d");이하
canvas.이거 위에서 변수로 만든 거지?mycanvas라는 id의 라벨을 대상으로 합니다.
canvas.getContext("2d");이른바 마법의 언어로 억지로 말하면 캔버스의 2d 관계의api를 사용할 수 있다.이제 사용할 준비를 해야겠어요.
ctx.fillStyle = "#00bfff";
ctx.fillRect(20, 20, 50, 100);
색상을 만들고 위치와 크기를 결정하며 사각형을 표시합니다.그래.
해설
여기까지, 어?이미 두려워하지 않는다. 사람은 프로그램에 상당히 정통한 사람이다.

당장 js를 꼼꼼히 씹어라.함수화하여 버튼을 만들자.


아까 나
index.html
function draw(){
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#00bfff";
    ctx.fillRect(20, 20, 50, 100);
}
이런 느낌 아래
index.html
<button type="button" onClick="draw()">描画</button>
한번 기술해 보세요.
그래서 브라우저를 시작하려면-?


버튼이 나왔어요. 버튼을 누르고 싶으면 움직일 거예요.
해설 3:>에서javascript의 촉발.
마우스가 멈춰 있을 때 움직이고 싶어요!더블 클릭 원해!표에서 버튼을 눌렀을 때 판단을 하게 해주세요!
이런 상황에서'사건 속성'은 트리거를 훈련시키는 데 쓰인다.이번에 사용한 것은 온클릭이라는 버튼이 눌렸을 때 움직이는 물건이다.
활동 등록 정보에는 어떤 것들이 있습니까?이쪽 사이트에서 기다리실지 모르겠습니다!
HTML 태그/HTML의 기본/이벤트 속성 - TAG index 웹 사이트
해설
물론 함수에서도 함수를 사용할 수 있다.
만약 스크립트에서 이렇다면 조웨이의 조웨이다.
index.html
function draw(){
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    parts(ctx);
}
function parts(ctx){
    ctx.fillStyle = "#00bfff";
    ctx.fillRect(20, 20, 50, 100);
}
왠지 알 것 같아?

깨물고 삼키다.


그럼 다음은 이거.
body의 부분은 다음과 같다.이번에는 그림을 사용했다.>의 어떤 폴더에'hut.png'이라는 폴더를 만들었습니다.
index.html
<section>
    <img id='sample_img' src='' name="img" alt='画像登場予定'/>
    <buttom type="button" onClick="drawImg()">画像表示・非表示</buttom>
    <form name='area1'>
        <p id='wrote'>文字を打ち込んでね！</p>
        <textarea name="text" onkeyup="check()"></textarea>
    </form>
    <br>
    <textarea id="t1"></textarea>
    <textarea id="t2"></textarea>
    <buttom type="button" onClick="inputAlert()">アラート</buttom>

    <script>
    var c = 0;
    function drawImg(){
        var img = document.getElementById("sample_img");
        if(c%2 == 0){
            img.src = 'img/hut.png';
            img.style.visibility = 'visible';
        }else{
            img.src = '';
            img.style.visibility = 'hidden';
        }
        c++;
    }
    function check(){
        var str = document.area1.elements["text"].value;
        var strCount = document.area1.elements["text"].value.length;
        document.getElementById("wrote").innerHTML = str+'\nと書きましたね？それは'+strCount+'文字です。';
    }
    function inputAlert(){
        var str1 = document.getElementById("t1").value;
        var str2 = document.getElementById("t2").value;
        alert("打ち込んだ文字は\n"+str1+"\nと\n"+str2+"\nですね！");
    }
    </script>
</section>
이걸 읽을 수 있다면 JS는 무섭지 않을 거야!
예?원본 파일이 너무 더러워서 못 알아보겠어요?
....소스가 더러운 것은 내가 아직 익지 않았기 때문이다.m(_ _;)m
다음은 해설.
못 읽겠어!
이런 분들은 참고해주세요!
해설4: 대작전 영상 표시
그래.
하는 일은 간단해서 꼬리표를 직접 바꿨다.
처음에 src가 없는 상태는 지정한 src를 통해 그림을 표시합니다.
반대로 src를 비워 숨길 수도 있습니다.
스타일도 편집할 수 있고visibility라는 요소를 표시하고 숨길 수 있습니다.
그림 크기를 변경하려면
img.style.width로 변경되면...?
해설
해설5: 도대체 무슨 글자를 입력한 거야!?
표를 만들 때 입력할 때 문자를 계산할 수 있는 편리한 녀석.체크입니다.
지정 방법이 아까와 다르다는 것을 아십니까?
document.area1.elements["text"].value;그렇습니다.
지금 보고 있는 웹 페이지.(이름은area1).(그 중name은text 요소입니다.)(위에 적힌 내용)
이런 느낌이야.일반적인 경우document.getElementById를 사용할 수 있다면 방법이 있을 텐데, 이런 기술도 있다.
다음은 표시된 부분입니다.
document.getElementById("wrote").innerHTML
누구세요?그렇게 말씀하셨죠?
p 라벨 안쪽에 글이 적혀 있죠?
그것은 라벨의 안쪽을 직접 가리킨다.textarea는value이지만 p 탭에value라는 요소가 없습니다. (그렇죠?)
그러니까그래서 내용을 바꿀 수 밖에 없기 때문에 이런 기술이 있을 수 있다.
해설
해설6: Alert는 간단합니다.
여기 오면 input Alert () 정말 쉬워요.
간단하게 문장을 얻은 후에는 간단해진다.
끓이든지 굽든지
문장을 검사하거나 정규 표현을 확인하세요.
진짜/가짜 답장을 원합니다(경보 대화상자를 원합니다!)시간
var res=confirm (str1+ "그럴까요?");
이렇게 쓰세요.res 부분에 대화상자에 대한 평가가 포함되어 있습니다.
해설
이제 여기서 끝!
우리 공부는 지금부터 시작한다!
iOS 반사 작업
인피니트 스크롤을 고도로 결정된 오버플로우: 스크롤의 상자 안에 강제로 설치할 때의 엉뚱한 필기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage