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相关知识时,对每个组件的属性及方法都研 ...

随机推荐

CMU数据库（15-445）Lab3- QUERY EXECUTION
Lab3 - QUERY EXECUTION 实验三是添加对在数据库系统中执行查询的支持.您将实现负责获取查询计划节点并执行它们的executor.您将创建执行下列操作的executor Access ...
C# 基础 - 堆栈跟踪使用
使用一:可用于捕获报错时. using System.Diagnostics; ... StackTrace st = new StackTrace(true); string stackIndent ...
Go语言学习笔记——Go语言的make的理解
实例:https://tour.go-zh.org/moretypes/10 谢大<Go Web编程>书中的讲解https://github.com/astaxie/build-web-a ...
使用jhipster 加速java web开发
jhipster,中文释义: Java 热爱者! JHipster is a development platform to quickly generate, develop, & depl ...
POJ1979_Red and Black(JAVA语言)
思路:bfs裸题. 对这种迷宫问题的bfs,我们把坐标点用一个class来存储,并放入队列进行求解. //一直接收不了输入,找了一个多小时的问题,居然是行和列搞反了ORZ Red and Black ...
MySQL数据库与python交互
1.安装引入模块安装mysql模块 pip install PyMySQL; 文件中引入模块 import pymysql 2.认识Connection对象用于建立与数据库的连接创建对象:调用c ...
Spring笔记（三）
Spring AOP 一.AOP(概念) 1. 什么是AOP 面向切面编程(方面),利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各个部分之间的耦合度降低,提高程序的可重用性,同时提高了 ...
面向前端开发人员的VSCode自动化插件
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://blog.bitsrc.io/vscode-automations-for-fro ...
使用Drone构建Docker映像
使用Drone构建Docker映像实践所用软件: Git Gogs Drone Docker 私有镜像仓库实践链接:https://www.katacoda.com/courses/cicd/bu ...
全网最详细的Linux命令系列-cd命令
Linux cd 命令可以说是Linux中最基本的命令语句,其他的命令语句要进行操作,都是建立在使用 cd 命令上的. 所以,学习Linux 常用命令,首先就要学好 cd 命令的使用方法技巧. 命令格 ...

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

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

随机推荐

热门专题