추첨 학습javascript

7344 단어 HTMLJavaScript
다음 현장에서javascript를 사용했기 때문에 조금 접촉하는 것을 배우기 시작했습니다.
우선, 흔히 볼 수 있는'추첨'애플리케이션을 만들어 보자
응용 프로그램만큼 큰 것이 아니라, 단지 인터넷에 표시될 뿐이다

html 코드(index.html)

<html>
    <head>
        <meta http-equiv="content-type" charset="utf-8">
    </head>
    <body>
        <h1>簡単おみくじ</h1>
        <input type="button" id="getResult" value="ボタンを押すとおみくじが引けるよ">
        <div id="result"></div>
        <script src="script.js"></script>
    </body>
</html>
자바스크립트를 적용하고 싶은 곳에 삽입script하면 거기에 반영될 것 같습니다.
그런데 css와 마찬가지로 일반적으로 head에 쓰입니까?다
이건 앞으로 공부해야 한다는 걸 알아차렸으면 좋겠어요.

javascript 코드(script.js)


let omikuji = {
    items: ["大吉", "吉", "中吉", "小吉", "末吉", "凶"],
    getResult: function() {
        let results = this.items;
        return results[Math.floor(Math.random() * results.length)]
    }
}
//console.log(omikuji.getResult())

let getResult = document.getElementById("getResult");
let result = document.getElementById("result");

getResult.addEventListener("click", function() {
    let done = omikuji.getResult();
    switch (done) {
        case "大吉":
            result.innerHTML = "おめでとう！結果は「" + done + "」でした";
            break;
        default:
            result.innerHTML = "結果は「" + done + "」でした";
    }
})
변수 선언, 조건 분기, 함수 생성 및 HTML 작업이 도입되었습니다.
나는 기초적인 일을 많이 배웠다고 생각한다.

변수 선언


javascript는 let 에서 변수를 설명해야 할 것 같습니다.
python에서 선언 없이 사용할 수 있기 때문에 좀 번거롭습니다.
또 상수를 사용할 때 const 에 성명된 것 같다.
사전에 설명한 부분은 관리하기 쉽다는 것이 장점이다.

조건 분기


다른 언어if의 문장일 수도 있지만 이번에는 더 간단하게 요약한 switch 문장을 사용했다.
'if hoge=hogehoge'라고 쓰는 것보다 case 결과만 쓰는 것이 비교적 쉽다.
여기에서 각자의 케이스에 break 를 쓰도록 주의하세요.
아래에 적힌case도 부합된다고 가정하면 아래가 우선이다.
케이스에 맞지 않는 처리용default 쓰기

함수


함수는 function 에서 정의됩니다.
또한 items: []처럼 함수 내에서 변수를 설명할 때let 変数名 =이 아니라 変数名: 도 주의해야 한다.Math.floor() 정수로 변경 가능Math.random()0-1에서 무작위 숫자를 만든다.

HTML 사용


HTML 측면의 조작을 할 수 있는 것은 자바스크립트의 즐거움이다.
이번에는 많은 조작 중에 세 개를 사용해 보았다.document.getElementById(htmlのid)이것은 html에서 성명한 것이다id.
즉, 상응하는 id를 조작할 수 있다는 것이다.addEventListener(“ユーザー動作”, 操作)사용자 비헤이비어를 방아쇠로 사용할 수 있습니다.
이번에는 사용자 액션에 추가되었습니다click.
사용자가 화면을 클릭할 때를 기점으로 하고 싶어서다.innerHTML너는 문장을 HTML 쪽에 맡길 수 있다.
html 표기를 직접 사용할 수 있기 때문에 상당히 편리하다.

결과:




여기서 끝!
Validation - Validator 분리
[프로그래머스] 완주하지 못한 선수(해시Lv1) - 파이썬

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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