목차
JavaScript 빠른 시작
1.js는 텍스트를 생성합니다
3.js 작성 위치 및 실행 순서는
웹 프론트엔드 JS 튜토리얼 JavaScript 빠른 시작 사례 튜토리얼

JavaScript 빠른 시작 사례 튜토리얼

Aug 09, 2017 pm 02:07 PM
javascript js 지도 시간

JavaScript 빠른 시작

1.js는 텍스트를 생성합니다

<!--
    js一般是写在head标签里面
-->
<script>
    document.write("我是天才!!");
    document.write("我是废才!!");

</script>
로그인 후 복사

3.js 작성 위치 및 실행 순서는

<script>
    document.write("我是天才<br/>");
    document.write("我是废才<hr/>");
    document.write("我是鬼才     ");
    document.write("我是人才");
</script>
로그인 후 복사

4.js 변수 선언으로 가져옵니다.
<!--
    1,书写位置:js是一种弱类型的语言,所以语法不是特别的严格,但是一般js代码是写在head标签里面
    2, 执行顺序:js的解释执行是从上往下进行的。
-->
<script>
    alert("哈哈");
    alert("哼哼");
    alert("嘎嘎");
</script>
로그인 후 복사

6. js

<!--
    使用src属性导入外部的js文件
    引入js文件需要占用一个script标签,执行代码时需要另取一个script标签
-->
<script src="../js/mylove.js"></script>

<script>
    var sum = getSum(2, 3);
    alert(sum);
    alert("我是来自于内部的js");
</script>

mylove.js:
alert("我是来自于外部的js文件代码");

function getSum(a,b){
    return a + b;
}
로그인 후 복사

7에 있는 판단문. js

<script>
    // 由于javascript是一种弱类型语言,所以定义变量都是使用一个关键字var
    // 定义一个数字类型
    var number = 10;

    // 定义一个字符串
    var str = "aaabbb";

    // 定义一个数组
    var arr = [1,2,3,"haha","yue"];
</script>
로그인 후 복사

8의 세 가지 종류의 js

<script>
   // 输入1-10之间的数字,如果大了则提示输入过大,如果小了则提示输入小了,在1-10之间则把输入的数字打印出来!

    var number= prompt("输入一个1-10之间的数字");
    if(number > 10){
        alert("你输入的数字大了!");
    }else if(number < 1){
        alert("你输入的数字小了!");
    }else{
        alert("你输入的数字为:" + number);
    }
</script>
로그인 후 복사

9의 기능. js의 예외 처리 js

<script>
    // 1 警告框
    alert("我是天才");

    // 2 确认框,返回值为true则表示确认,false表示取消
    var result = confirm("欲练此功必须自宫,你还练吗?");
    if(result){
        alert("自宫成功!");
    }else{
        alert("怂了吧!~?");
    }

    // 3 提示框输入框
    var name = prompt("请输入名字","王八");
    if(name!=""&& name!=null){
        alert("您输入的名字为:" + name);
    }
</script>
로그인 후 복사

12.Timer

<script>

    // 求和函数
    function getSum(a, b) {
        return a + b;
    }
    var sum = getSum(3, 6);
    alert("和为:" + sum);


    // 定义重载函数
    function add(){
        alert("我是无参函数!");
    }

    function add(i,j){
        alert("我是有参函数!");
        var sum = i + j;
        alert("有参函数和为:" + sum);
    }

    add();
    // 调用无参的函数时,结果却是弹出有参的提示
    // 这是因为js中的函数不能重载,只可以有一个同名函数,多了的会被最后的一个覆盖掉

    add(2,4); // 正常输出

    add(2,4,6); // 输出和仍为6,因为函数只有两个参数,多传入的值是无效的

</script>
로그인 후 복사

13의 Window 객체를 사용해 보세요.

코드는 다음과 같습니다
<script>
    // 使用for循环求1-100的和
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        sum += i;
    }
    alert("1-100的和是:" + sum);



     // 使用for循环打印九九乘法表
    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            document.write(j + "*" + i + "=" + j * i + "     ");
        }
        document.write("<br/>");
    }

    // for循环打印标题
    for(var i = 1; i <=7;i ++){
        document.write("<h"+i+">" +"我是"+ i + "级标题"+"<h"+i+">");
    }

    // for循环遍历月份

        document.write("<br>"+"<select>");
        for(var i = 1; i <=12;i ++){
            document.write("<option>");
            document.write(i);
            document.write("</option>");
        }
        document.write("</select>");    


    // 高级for,x是角标
    var str = ["haha","hdhd",99,10,'ooo'];
    for(x in str){
        alert(str[x]);
    }
</script>
로그인 후 복사

14. 시간과 배열

<script>
/**
 * js中处理异常有两种方式,第一种是用try{} catch(){}语句块处理
 * 还有就是你认为代码会出错时用throw关键字把错误跑出去,然后用catch里进行捕获
 */

    var count = 3 * 8;
    haha 让你输出不了;
    alert(count);


    function add(a, b) {
        try {
            hahahaha
            return a + b;
        } catch (err) {
            alert("出错了吧");
        }
    }

    add(1,4);

    function value(){
        var sum = prompt("输入1-100的数字:");
        if(sum == "" || sum==null){
            alert("输入为空啊");
            return;
        }

        try{
            if(sum > 100){
                throw "e1";
            }else if( sum < 1){
                throw "e2";
            }else{
                alert("你输入的数字是:" + sum);
            }
        }catch(e){
            if(e == "e1"){
                alert("输入过大了");
            }else if(e == "e2"){
                alert("输入过小了");
            }
        }               
    }

    value();
</script>
로그인 후 복사
16. 돔과 함께
<script>
    /**
     * window对面表示打开的浏览器对象,主要包括了五个子对象
     * 1. Navigator    导航器对象
     * 2. History      浏览器历史纪录
     * 3. Screen       屏幕
     * 4. Document     文档
     * 5. Location     位置
     */
</script>

<script>

    function me_Navigator(){
        document.write(navigator.appCodeName + "<br/>");
        document.write(navigator.appVersion + "<br/>");
        document.write(navigator.appName + "<br/>");
        document.write(navigator.geolocation + "<br/>");
    }

    me_Navigator();

    // 上一步
    function clickme(){
        history.back();
    }

    // 跳转
    function tiancai(){
        var result = confirm("要去百度官网吗?");
        if(result){
            location.href="index.html";
        }
    }
</script>
로그인 후 복사
17 . html 태그를 얻으려면
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <script>

            // 电子显示时钟

            function showTime(){
                var date = new Date();
                var canvas = document.getElementById("showcanvas");

                var hours = date.getHours();
                var min = date.getMinutes();
                var sec = date.getSeconds();

                canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";
            }

            setInterval("showTime()",1000);


            // 倒计时显示器
            var i = 0;
            var t = 0;
            function backTime(){

                var date = new Date();
                var canvas = document.getElementById("showcanvas");

                var hours = date.getHours();
                var min = date.getMinutes();
                var sec = date.getSeconds();

                canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";

                i ++ ;
                if(i == 5){
                    clearInterval(t);
                }
            }

            t = setInterval("backTime()",1000);



        </script>

    </head>
    <body onload="backTime()">
        <div id="showcanvas"></div>
    </body>
</html>
로그인 후 복사
18. Jquery의 우아한 강과 호수

렌더링은 다음과 같습니다
  • 데이터 파일은 다음과 같습니다


    juery 클래스 라이브러리는 온라인에서 다운로드할 수 있습니다. .txt 데이터는 다음과 같습니다:
[

{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food1.jpg",

"desc":"九毛九"

},

{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food2.jpg",

"desc":"진짜 쿵푸"

},

{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food3.jpg",

"desc":"哥乐"

},

{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food4.jpg",
    "desc":"피자헛"
  • },

    {"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food5.jpg",
    “설명”:”KFC” },

    {"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food6.jpg",
  • "desc":"용허왕"
  • },

    {"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food7.jpg",

    "desc":"홍리 마을"
  • }
  • ]


    사진 자료는 다음과 같습니다




















    코드는 다음과 같습니다. 다음과 같습니다

        <script>
             var i = 0;
             var t;
            function image(){
                document.getElementById("img").src="../img/"+ i +".png";
    
    
                i ++;
                if(i == 7){
                    clearInterval(t);
                    alert("画完了,好玩吧!");
                }
    
            }
    
            t = setInterval("image()",1000);
        </script>
    
    </head>
    <body onload="image()">
    <img id="img"/>
    </body>
    로그인 후 복사

위 내용은 JavaScript 빠른 시작 사례 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Dewu 사용법 튜토리얼 Dewu 사용법 튜토리얼 Mar 21, 2024 pm 01:40 PM

Dewu APP는 현재 매우 인기 있는 브랜드 쇼핑 소프트웨어이지만 대부분의 사용자는 Dewu APP의 기능을 사용하는 방법을 모릅니다. 다음으로 편집기는 Dewuduo를 사용자에게 제공합니다. 관심 있는 사용자는 와서 살펴볼 수 있습니다! Dewu 이용방법 튜토리얼 [2024-03-20] Dewu 할부구매 이용방법 [2024-03-20] Dewu 쿠폰 받는 방법 [2024-03-20] Dewu 매뉴얼 고객센터 찾는 방법 [2024-03- 20] 듀우 픽업 코드 확인 방법 [2024-03-20] 듀우 구매처 찾기 [2024-03-20] 듀우 VIP 개설 방법 [2024-03-20] 듀우 반품, 교환 신청 방법

WeChat에서 결제 소리를 끄는 방법에 대한 튜토리얼 WeChat에서 결제 소리를 끄는 방법에 대한 튜토리얼 Mar 26, 2024 am 08:30 AM

1. 먼저 위챗을 엽니다. 2. 오른쪽 상단의 [+]를 클릭하세요. 3. QR코드를 클릭하시면 결제가 진행됩니다. 4. 오른쪽 상단에 있는 세 개의 작은 점을 클릭하세요. 5. 결제도착 음성알림을 클릭하시면 종료됩니다.

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

photoshopcs5는 어떤 소프트웨어인가요? -photoshopcs5 사용법 튜토리얼 photoshopcs5는 어떤 소프트웨어인가요? -photoshopcs5 사용법 튜토리얼 Mar 19, 2024 am 09:04 AM

PhotoshopCS는 Photoshop Creative Suite의 약자로 Adobe에서 제작한 소프트웨어입니다. 그래픽 디자인 및 이미지 처리에 널리 사용됩니다. PS를 처음 배우는 사용자로서 오늘은 photoshopcs5가 무엇인지, photoshopcs5를 사용하는 방법에 대해 설명하겠습니다. . 1. Photoshop CS5는 어떤 소프트웨어입니까? Adobe Photoshop CS5 Extended는 영화, 비디오 및 멀티미디어 분야의 전문가, 3D 및 애니메이션을 사용하는 그래픽 및 웹 디자이너, 엔지니어링 및 과학 분야의 전문가에게 이상적입니다. 3D 이미지를 렌더링하고 이를 2D 합성 이미지로 병합합니다. 쉽게 비디오 편집

DisplayX(모니터 테스트 소프트웨어) 튜토리얼 DisplayX(모니터 테스트 소프트웨어) 튜토리얼 Mar 04, 2024 pm 04:00 PM

모니터 구입 시 테스트는 파손 구입을 피하기 위해 꼭 필요한 부분입니다. 오늘은 모니터 테스트를 위한 소프트웨어 사용법을 알려드리겠습니다. 방법 단계 1. 먼저 본 사이트에서 DisplayX 소프트웨어를 검색하여 다운로드한 후 설치하고 열면 사용자에게 제공되는 다양한 감지 방법을 확인할 수 있습니다. 2. 사용자는 일반 전체 테스트를 클릭합니다. 첫 번째 단계는 디스플레이의 밝기를 테스트하여 상자가 선명하게 보이도록 조정하는 것입니다. 3. 그런 다음 마우스를 클릭하여 다음 링크를 입력합니다. 모니터가 각 흑백 영역을 구분할 수 있으면 모니터가 여전히 양호하다는 의미입니다. 4. 마우스 왼쪽 버튼을 다시 클릭하면 모니터의 그레이스케일 테스트를 볼 수 있습니다. 색상 전환이 매끄러울수록 모니터가 더 좋아진 것입니다. 5. 또한, 우리는 displayx 소프트웨어에서

전문가가 가르쳐드립니다! Huawei 휴대폰에서 긴 사진을 자르는 올바른 방법 전문가가 가르쳐드립니다! Huawei 휴대폰에서 긴 사진을 자르는 올바른 방법 Mar 22, 2024 pm 12:21 PM

스마트폰의 지속적인 발전과 함께 휴대폰의 기능은 점점 더 강력해졌고, 그 중 장사진 촬영 기능은 많은 사용자들이 일상생활에서 사용하는 중요한 기능 중 하나로 자리 잡았다. 긴 스크린샷은 사용자가 쉽게 보고 공유할 수 있도록 긴 웹페이지, 대화 기록, 사진을 한 번에 저장하는 데 도움이 됩니다. 많은 휴대폰 브랜드 중에서 Huawei 휴대폰은 사용자들로부터 높은 평가를 받는 브랜드 중 하나이며, 긴 사진을 자르는 기능도 높은 평가를 받고 있습니다. 이 기사에서는 Huawei 휴대폰으로 장사진을 찍는 올바른 방법과 Huawei 휴대폰을 더 잘 활용하는 데 도움이 되는 몇 가지 전문가 팁을 소개합니다.

여름에는 꼭 무지개를 찍어보세요 여름에는 꼭 무지개를 찍어보세요 Jul 21, 2024 pm 05:16 PM

여름에 비가 내린 후에는 아름답고 마법 같은 특별한 날씨 장면인 무지개를 자주 볼 수 있습니다. 이 역시 사진에서 볼 수 있는 보기 드문 장면으로, 매우 포토제닉하다. 무지개가 나타나는 데에는 몇 가지 조건이 있습니다. 첫째, 공기 중에 충분한 물방울이 있고, 둘째, 태양이 낮은 각도로 빛납니다. 따라서 비가 그친 후 오후에 무지개를 보는 것이 가장 쉽습니다. 그러나 무지개의 형성은 날씨, 빛, 기타 조건의 영향을 크게 받기 때문에 일반적으로 짧은 시간 동안만 지속되며, 가장 잘 볼 수 있고 촬영할 수 있는 시간은 더욱 짧습니다. 그러면 무지개를 만났을 때 어떻게 제대로 기록하고 고품질로 사진을 찍을 수 있습니까? 1. 무지개를 찾아보세요. 위에서 언급한 조건 외에도 무지개는 대개 햇빛 방향으로 나타납니다. 즉, 태양이 서쪽에서 동쪽으로 빛날 경우 무지개가 동쪽에서 나타날 확률이 높습니다.

PHP 튜토리얼: int 유형을 문자열로 변환하는 방법 PHP 튜토리얼: int 유형을 문자열로 변환하는 방법 Mar 27, 2024 pm 06:03 PM

PHP 튜토리얼: Int 유형을 문자열로 변환하는 방법 PHP에서는 정수 데이터를 문자열로 변환하는 것이 일반적인 작업입니다. 이 튜토리얼에서는 특정 코드 예제를 제공하면서 PHP의 내장 함수를 사용하여 int 유형을 문자열로 변환하는 방법을 소개합니다. 캐스트 사용: PHP에서는 캐스트를 사용하여 정수 데이터를 문자열로 변환할 수 있습니다. 이 방법은 매우 간단합니다. 정수 데이터 앞에 (문자열)을 추가하면 문자열로 변환됩니다. 아래는 간단한 샘플 코드입니다.

See all articles