JavaScript 的入门学习案例，保证学会！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript for循环</title>

</head>

<body>

<script>

    //输出循环

    function xh() {

       var r="";

       var o="";

       //continue重新循环

        for(var w=0;w<10;w++){

           r+="何安圻我爱你:"+w+"<br>";

           document.getElementById("demo").innerHTML=r;

           if(w==3){

               alert("重新循环");

               continue;

           }

       }

        listw=["金木","佐佐木 绯世","小白发金木","黑发金木","340号","黑色死神"];

        //跳出循环

        for(k=0;k<listw.length;k++){

            document.getElementById("demo2").style.color="green";

            document.getElementById("demo2").innerHTML=o+="我叫:"+listw[k]+"<br>";

            break;

        }

    }

</script>

<p id="demo"></p>

<b id="demo2">东京食尸鬼</b>

<button onclick="xh()">点击</button>

</body>

</html>

//由于javascript的特殊性想要在html上输出循环得多定义一个空的变量然后在相加起来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript for循环</title>

</head>

<body>

<script>

    //输出循环

    function xh() {

       var r="";

       var o="";

        for(var w=0;w<10;w++){

           r+="何安圻我爱你:"+w+"<br>";

           document.getElementById("demo").innerHTML=r;

       }

       //循环列表

        listw=["金木","佐佐木 绯世","小白发金木","黑发金木","340号","黑色死神"];

        for(k=0;k<listw.length;k++){

            document.getElementById("demo2").style.color="green";

            document.getElementById("demo2").innerHTML=o+="我叫:"+listw[k]+"<br>";

        }

    }

</script>

<p id="demo"></p>

<b id="demo2">东京食尸鬼</b>

<button onclick="xh()">点击</button>

</body>

</html>

//由于javascript的特殊性想要在html上输出循环得多定义一个空的变量然后在相加起来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript的switch</title>

</head>

<body>

输入:<input id="demo" type="text">

<script>

    function Myfunction() {

        x=document.getElementById("demo");

        zhi=x.value;

        switch (zhi) {

            case zhi==100:alert("x等于100");

            break;

            case zhi>100:alert("x大于100");

            break;

            case zhi<100:alert("小于100");

            break;

        }

    }

</script>

<button onclick="Myfunction()">点击老子</button>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript while循环</title>

</head>

<body>

<p id="demo">测试</p>

<script>

    function myfunction(){

        q=0;

        w="";

        a=0;

        g="何安圻我爱你";

        while (a<10) {

            w+=g+ "<br>";

            document.getElementById("demo").innerHTML =w;

            a++;

        }

        lo=["何安圻","姐姐"];

        k=0;

        while (lo[k]){

            document.write(lo[k]);

            k++;

        }

        do{

            alert("何安圻一定是我的");

            q++;

        }while (q<6);

    }

</script>

<button onclick="myfunction()">点击</button>

</body>

</html>

//

while(条件){

    执行的程序

}

do{

    要执行的程序

}while(条件);

while循环遍历列表如上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript比较</title>

</head>

<body>

输入:<input id="demo" type="text">

<script>

    function Myfunciton() {

        x=document.getElementById("demo").value;

        if(x>10){

            alert('大于10，为True');

        }else if(x==""){

            alert("不能为空");

        } else if (x<10) {

            alert("小于10，为False");

        }else if(x==10){

            alert("等于10");

        }

    }

</script>

<button onclick="Myfunciton()">点我获取结果</button>

</body>

</html>

也是用if来比较

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript语句</title>

</head>

<body>

<h1 id="demo">哈哈</h1>

<button onclick="myFunction()">点我</button>

<script>

   function myFunction() {

       var x=document.getElementById("demo"); //可以用var或者直接创建变量

       x.innerHTML="创建了一个变量";

   }

</script>

</body>

</html>

可以用var或者直接创建变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript对象</title>

</head>

<body>

<script>

    persion={ //创建一个对象

        "name":"何安圻", //创建一个key:value

        "now":"17",

        "school":"东莞市石竹"

    };

    document.write("姓名:",persion["name"]+"<br>");

    document.write("年龄:",persion["now"]+"<br>");

    document.write("就读学校:",persion["school"]+"<br>");

</script>

</body>

</html>

js的代码开头和结束

<script>xxx</script>

一般js代码放在<head>js</head>

引用外部js

<script src="xxx.js"></script>

javascript对大小写敏感

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript函数</title>

</head>

<body>

<script>

    document.write("我可以"); //带参数传入函数

    mdeuio("操何安圻吗");

    function mdeuio(name) { //创建一个函数，函数外的为全局函数。函数内的为局部变量，全局变量可以在局部变量访问到

        x=name;

        document.write(x);

        return 0;

    }

</script>

</body>

</html>

javascript写入到HTML输出

<script>

document.write("<h1>因为当事人的能力不足，导致她不需要你</h1>") #document.write("内容") 输出到html中

</script>

javascript 对事件作出反应

<script>

<button type="buttone" onclick="alert('Welcome!')">点击这里</buttone> #onclick事件，触发什么alert("何安圻")

</script>

javascript改变html内容

<script>

function myFunction(){

    x=document.getElmentById("demo"); //查找元素

    x.innerHTML="我草"; //改变内容

}

</script>

例子：

<!DOCTYPE html>

<html>

<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">

JavaScript 能改变 HTML 元素的内容。

</p>

<script>

function myFunction(){

x=document.getElementById("demo"); //寻找ID为demo的

x.innerHTML="因为我不够强"; //替换html

}

</script>

<button type="button" onclick="myFunction()">点击这里</button>

</body>

</html>

javascript改变样式：

<script>

x=document.getElementById("demo"); //寻找ID为demod 的

x.style.color="#ff0000"; //替换颜色

</script>

JavaScript改变图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JavaScript替换图片</title>

</head>

<>

<script>

    function myFunction() {

        x=document.getElementById('demo'); //寻找id为demo

        if (x.src.match('bulbon')){ //判断是否进行了点击

            x.src="http://pic.netbian.com/uploads/allimg/180331/182615-15224919751fac.jpg" //如果没有点击则为这张图片

        }else{

            x.src="http://pic.netbian.com/uploads/allimg/180507/211615-1525698975c9a1.jpg" //如果点击了则为这张图片

        }

    }

    </script>

<img id="demo" onclick="myFunction()" src="http://pic.netbian.com/uploads/allimg/180331/182615-15224919751fac.jpg">

</body>

</html>

javascript验证表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JavaScript验证输入</title>

</head>

<body>

<input id="demo" type="text">

<script>

    function myFunction() {

        var x=document.getElementById("demo").value; //获取id为demo，获取标签里的值

        if(x==""||isNaN(x)){ //判断是否为数字

            alert("不能输入数字以外的东西或者不输入") //如果不为则弹框

        }

    }

</script>

<button type="button" onclick="myFunction()">点我进行验证</button>

</body>

</html>

例子看Demo文件：

demo.html -- javascript改变样式

demo2.html -- javscript改变html

demo3.html -- javascript改变图片

demo4.html -- javascript验证输入

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript函数</title>

</head>

<body>

<script>

    document.write("我可以"); //带参数传入函数

    mdeuio("操何安圻吗");

    function mdeuio(name) { //创建一个函数，函数外的为全局函数。函数内的为局部变量，全局变量可以在局部变量访问到

        x=name;

        document.write(x);

        return 0;

    }

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript字符串</title>

</head>

<body>

<script>

    function myuio() {

        x=document.getElementById("demo");

        x.innerHTML=alert("iphone is target");

        s=125e-6;

        cars=["何安圻","不需要我","我太弱了"]; //创建一个列表

        for (i=0;i<cars.length;i++){ //遍历列表 cars.length获取列表长度

            document.write(cars[i]+"<br>");

        }

        carname="iphone"; //string类型

        carname2="iphone x";

        carname3="iphone xs";

        tu=true; //布尔类型

        jia=false; //布尔类型

        person={ //对象

            fistname:"john",

            lastname:"Dode",

            id:1

        };

        document.write(person['id']+"<br>");

        document.write(carname);

        document.write("<br>");

        document.write(carname2);

        document.write("<br>");

        document.write(carname3);

        document.write(tu +"<br>");

        document.write(jia);

        alert(s);

    }

</script>

<p id="demo">iphone is 666</p>

<button id="demos" onclick="myuio()">点我干死iphone</button>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript函数</title>

</head>

<body>

<script>

    document.write("我可以"); //带参数传入函数

    mdeuio("操何安圻吗");

    function mdeuio(name) { //创建一个函数，函数外的为全局函数。函数内的为局部变量，全局变量可以在局部变量访问到

        x=name;

        document.write(x);

        return 0;

    }

</script>

<button onmouseout="this.innerHTML=Date()">现在时间是</button> //这是一个用户从一个标签移开后触发的事件，常见的事件

事件    描述

onchange    HTML 元素改变

onclick    用户点击 HTML 元素

onmouseover    用户在一个HTML元素上移动鼠标

onmouseout    用户从一个HTML元素上移开鼠标

onkeydown    用户按下键盘按键

onload    浏览器已完成页面的加载

都可以插入js代码

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript语句</title>

</head>

<body>

<h1 id="demo">哈哈</h1>

<script>

    x=document.getElementById("demo");

    x.innerHTML="哈哈哈";

    function demo() { //funtion自定义函数

        document.write("为我")

    }

</script>

<button onclick="demo()">点我</button>

</body>

</html>

浏览器按照从上到下执行，函数可以有个条件来进行触发

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JavaScript事件</title>

</head>

<body>

<script>

    function displaydate(){

        x=document.getElementById('demo');

        x.innerHTML=Date();

        a="我叫";

        b="九世";

        d=a+b; //字符串相加

        e=50;

        w=60;

        g=58;

        g*=w;

        q="5";

        q+=5; //JavaScript的特殊性：字符串+数字将成为字符串

        alert(d);

        alert(g);

        alert(q);

    }

</script>

<h1 id="demo">当前时间</h1>

<button onclick="displaydate()">点我刷新当前时间</button>

</body>

</html>

运算符有：

+

-

*

%

/

+=

-=

%=

/=

*=

==

>=

!=

===

<=

<>

JavaScript的特殊性：字符串+数字将成为字符串

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript语句</title>

</head>

<body>

<h1 id="demo">哈哈</h1>

<button onclick="myFunction()">点我</button>

<script>

   function myFunction() {

       var x=document.getElementById("demo"); //可以用var或者直接创建变量

       var a=10;

       var b=11;

       var e=a+b;

       alert(e)

   }

</script>

</body>

</html>

JavaScript 的入门学习案例，保证学会！的更多相关文章

记JavaScript的入门学习（二）
2016年11月25号,利用上午时间学习了JavaScript的数据类型和变量,下午就该去图书馆泡书了. 看完变量的本章节,发现我可能不能一天结束,那我就利用上午和晚上九点回来的时间完成吧.把心态调整 ...
javascript的入门学习
目录 JavaScript的学习什么是javascript,如下简称JS 正式使用js js的两种引入方式 head标签与body标签的区别 js定义变量可以分为如下四种类型: 有3种特殊的数据类 ...
记JavaScript的入门学习（三）
2016.12.6晚上十点半完成JavaScript的第二章学习,看了点第三章的开头总述,都说原生js每一个知识点都可以分分钟钟让你放弃,而我在努力探索着.月末的时候就回家放假了,希望在家也可以有个小 ...
记JavaScript的入门学习（一）
2016年11月20日算是每天都会利用点时间去思考,去学习,接下来便是我学习JavaScript的前前后后,希望早日学完JavaScript和jQuery 之前学校毕业设计选择了一个如下图的题目希望 ...
SpringMVC入门学习案例笔记
一.数据库环境用mysql,数据库建表语句如下: /* SQLyog v10.2 MySQL - 5.1.72-community : Database - mybatis ************* ...
【总结整理】javascript基础入门学习（慕课网学习）
https://www.imooc.com/learn/36 注意: javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script ...
第一百一十九节，JavaScript事件入门
JavaScript事件入门学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...
JavaScript入门学习之二——函数
在前一章中讲了JavaScript的入门语法,在这一章要看看函数的使用. 函数的定义 JavaScript中的函数和Python中的非常类似,只不过定义的方式有些不同,下面看看是怎么定义的 //定义普 ...
第15.37节 PyQt(Python+Qt)入门学习：containers容器类部件QMdiArea多文档界面部件详解及编程开发案例
专栏:Python基础教程目录专栏:使用PyQt开发图形界面Python应用专栏:PyQt入门学习老猿Python博文目录一.引言老猿在前期学习PyQt相关知识时,对每个组件的属性及方法都研 ...

随机推荐

Asp.Net Core WebAPI中启用XML格式数据支持
因为XML是一种非常常用的数据格式,所以Asp.Net core提供了非常便利的方式来添加对XML格式的支持只需要在IOC注册Controller服务的后面跟上.AddXmlDataContract ...
使用wireshark 抓取 http https tcp ip 协议进行学习
使用wireshark 抓取 http https tcp ip 协议进行学习前言本节使用wireshark工具抓包学习tcp ip http 协议 1. tcp 1.1 tcp三次握手在wire ...
docker配置私有镜像仓库-registry和hyper/docker-registry-web
1.前言️ Docker hub是远程仓库,是国外的,push pull速度特别慢,尤其是网速不好的时候,页面都点不进去,官网但是可以配置阿里云镜像加速哦: 因此搭建一个私有的镜像仓库用于管理我们 ...
asp.net core 实现支持自定义 Content-Type
asp.net core 实现支持自定义 Content-Type Intro 我们最近有一个原本是内网的服务要上公网,在公网上有一层 Cloudflare 作为网站的公网流量提供者,CloudFla ...
关于HDFS存储元数据的NameNode持久化存储
NameNode持久化场景引入: 问题:NameNode宕机,导致内存中的文件元数据丢失怎么办?我们知道元数据是存储来内存中的,所以一旦宕机,内存数据是会丢失的,因此为了避免数据丢失,HDFS中出现了 ...
PTE 准备之 Repeat sentence
Repeat sentence After listening to a sentence ,repeat the sentence 3-9 seconds 15 seconds Strategies ...
redis雪崩,穿透,击穿
缓存雪崩:同一时间大量key到过期时间失效,可在设置失效时间时加随机数,如果直接修改数据库,那么一定会有不一致,通过失效时间去反复刷新缩短不一致的时间, 为了避免数据一直存在,一定要设置过期时间如果通 ...
Hi3559AV100 NNIE开发（7） Ruyistudio 输出mobileface_func.wk与板载运行mobileface_chip.wk输出中间层数据对比
前面随笔讲了关于NNIE的整个开发流程,并给出了Hi3559AV100 NNIE开发(5)mobilefacenet.wk仿真成功量化及与CNN_convert_bin_and_print_featu ...
通俗易懂，android是如何管理内存的
封面来源:https://medium.com/android-news/android-performance-patterns-rescue-tips-8c1e4c7cb1f0 前言很高兴遇见你 ...
Python 网络编程 C/S建立Socket连接
分为客户端和服务端服务端 server.py 客户端 1 #coding=utf-8 2 import socket 3 4 client = socket.socket() #生成socket连接 ...

JavaScript 的入门学习案例，保证学会！

JavaScript 的入门学习案例，保证学会！的更多相关文章

随机推荐

热门专题