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

最新推荐文章于 2022-03-05 14:02:20 发布
最新推荐文章于 2022-03-05 14:02:20 发布
阅读量130 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/csnd/p/11466962.html
版权 
<!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 οnclick="xh()">点击</button>
</body>
</html>

//由于javascript的特殊性想要在html上输出循环得多定义一个空的变量然后在相加起来
View Code 
<!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 οnclick="xh()">点击</button>
</body>
</html>

//由于javascript的特殊性想要在html上输出循环得多定义一个空的变量然后在相加起来
View Code 
<!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 οnclick="Myfunction()">点击老子</button>
</body>
</html>
View Code 
<!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 οnclick="myfunction()">点击</button>
</body>
</html>

//
while(条件){
    执行的程序
}

do{
    要执行的程序
}while(条件);

while循环遍历列表如上
View Code 
<!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 οnclick="Myfunciton()">点我获取结果</button>
</body>
</html>

也是用if来比较
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript语句</title>
</head>
<body>
<h1 id="demo">哈哈</h1>
<button οnclick="myFunction()">点我</button>
<script>
   function myFunction() {
       var x=document.getElementById("demo"); //可以用var或者直接创建变量
       x.innerHTML="创建了一个变量";
   }
</script>
</body>
</html>

可以用var或者直接创建变量
View Code 
<!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>
View Code 
js的代码开头和结束
<script>xxx</script>
一般js代码放在<head>js</head>

引用外部js
<script src="xxx.js"></script>

javascript对大小写敏感
View Code 
<!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>
View Code 
javascript写入到HTML输出
<script>
document.write("<h1>因为当事人的能力不足，导致她不需要你</h1>") #document.write("内容") 输出到html中
</script>

javascript 对事件作出反应
<script>
<button type="buttone" οnclick="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" οnclick="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" οnclick="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" οnclick="myFunction()">点我进行验证</button>
</body>
</html>

例子看Demo文件：
demo.html -- javascript改变样式
demo2.html -- javscript改变html
demo3.html -- javascript改变图片
demo4.html -- javascript验证输入
View Code 
<!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>
View Code 
<!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" οnclick="myuio()">点我干死iphone</button>
</body>
</html>
View Code 
<!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 οnmοuseοut="this.innerHTML=Date()">现在时间是</button> //这是一个用户从一个标签移开后触发的事件，常见的事件
事件    描述
onchange    HTML 元素改变
onclick    用户点击 HTML 元素
onmouseover    用户在一个HTML元素上移动鼠标
onmouseout    用户从一个HTML元素上移开鼠标
onkeydown    用户按下键盘按键
onload    浏览器已完成页面的加载
都可以插入js代码
</body>
</html>
View Code 
<!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 οnclick="demo()">点我</button>
</body>
</html>

浏览器按照从上到下执行，函数可以有个条件来进行触发
View Code 
<!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 οnclick="displaydate()">点我刷新当前时间</button>

</body>
</html>

运算符有：
+
-
*
%
/
+=
-=
%=
/=
*=

==
>=
!=
===
<=
<>
JavaScript的特殊性：字符串+数字将成为字符串
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript语句</title>
</head>
<body>
<h1 id="demo">哈哈</h1>
<button οnclick="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>
View Code

 

转载于:https://www.cnblogs.com/csnd/p/11466962.html

weixin_30390075
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript基础——JS简单案例
m0_68794863的博客
12-04 5331
JS基础案例
JavaWeb入门学习笔记.chm
01-23
此文档为传智播客老师JavaWeb入门视频的笔记，其中包含视频中的讲解过程笔记记录以及课程中的案例源代码实现，笔记已转成CHM文档格式，方便阅读 1.此笔记为JavaWeb非常全面的教程，适合JavaWeb爱好者自学。循序渐进...
学习《JavaScript经典实例》之第1~3章
weixin_33962923的博客
03-06 150
《JavaScript经典实例》各节中的完整代码解决了常见的编程问题，并且给出了在任何浏览器中构建Web应用程序的技术。只需要将这些代码示例复制并粘贴到你自己的项目中就行了，可以快速完成工作，并且在此过程中学习JavaScript的很多知识。 第1章 JavaScript不只是简单的构件块 1.1 JavaScript对象、基本类型和字面值之间的区别 5种基本类型：字符串、数值、布尔值、n...
JavaScript 基础--- (经典案例)
热门推荐
姜皓的博客
08-01 2万+
案例一：全选练习      ** 使用复选框上面一个属性判断是否选中         - checked属性         - checked=true：选中         - checked=false：不选中     * 创建一个页面         ** 复选框和按钮             - 四个复选框表示爱好             - 还有一个复选框操作 全选和选不选，也有一...
Javascript案例学习
diaogu9242的博客
07-28 128
一、使用JS完成注册表单数据校验 1.需求分析 　　 用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样会导致服务器的压力过大，此时我们需要对用户输入 的内容进行一个校验(前端校验和后台校验)，前端校验防君子不防小人。 2.技术分析 2.1 javasscript的介绍 Java与javascript有什么区别...
JavaScript案例学习1
canglingyue的专栏
06-17 382
原文链接：http://baiyuming.top/2016/06/07/JavaScript%E5%AD%A6%E4%B9%A01/JavaScript 案例1鼠标方上显示提示信息，鼠标移开提示信息消失<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初探JavaScript</title>
Python elif-女友的节日案例
05-06
Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆于1990年代初设计，Python提供了高效的高级数据结构，还能简单有效地面...Python教学简单易懂,零基础小白也可以学会，只要你有耐心学习从入门到精通.从小白到高手
react入门实战项目-类印象笔记应用源码
08-11
上个资源记录分享了如何使用React实现一个ToDoList小Demo,通过该Demo,菜鸟们可以学会如何搭建环境，新建项目，添加组件，运行项目，简单的数据处理和交互，如何引入样式文件等内容。本篇，将记录如何使用React实现一...
值得分享和收藏的Bootstrap学习教程
09-02
这个学习教程集合了完整的知识体系，适合初学者入门以及有经验的开发者深入学习。它包括了从基本概念到高级特性的全面讲解，通过系统的学习资料帮助读者掌握Bootstrap的核心技术。 首先，我们来了解一下Bootstrap的...
Python 逻辑运算-案例2考试成绩
05-06
Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆于1990年代初设计，Python提供了高效的高级数据结构，还能简单有效地面...Python教学简单易懂,零基础小白也可以学会，只要你有耐心学习从入门到精通.从小白到高手
javascript实例自学手册:486个实例电子版(包括例子)
01-15
javascript实例自学手册:486个实例电子版(包括例子)
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
JavaScript入门小案例
weixin_30858241的博客
03-30 174
笔记： <!-- JavaScript的特点： 1.基于对象和事件驱动 JavaScript把HTML页面中的每一个元素都当做一个对象来处理，并且这些对象都具有层次关系， 像一颗倒立的树，这种关系被称为“文档对象模型（DOM）”...
JavaScript案例学习7
canglingyue的专栏
06-24 576
JavaScript 案例19Date 获取 时分秒<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Date</title> </head> <body> <script> /** * var oDate = new Date() * getHours() 获取时
DOM（二）
zhr_beyond的博客
03-05 578
DOM（二） 1.排他思想 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想 例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sale=1.0, maximum-scale=1.0, minimum
Javascript学习：综合案例6--字符串筛选
一只程序媛
06-21 759
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; h2{text-align: center;}
JS基础&案例
qq_44331253的博客
03-05 6651
目录JS基础JS的作用JS的组成JS引入常用的一些方法变量数据类型算数运算函数JS事件事件介绍常见事件事件绑定普通函数方式匿名函数方式事件使用JS的BOMBOM里面的五个对象window: 窗体对象navigator:浏览器导航对象screen:屏幕对象history:历史对象location:当前路径信息JS的DOM操作标签获取标签操作标签操作标签体 JS基础 什么是JS JS，全称JavaScript，是一种直译式脚本语言，是一种动态类型、弱类型、基于对象的脚本语言，内置支持类型。 JS语言和Java
自学JavaScript的几个例子
weixin_30498807的博客
01-19 66
　　学习了广泛使用的浏览器脚本JavaScript和HTML的DOM模型（也是用JavaScript实现），下面给出两个自己学习时的例子，具体JavaScript语法请参考W3C相关网页（http://www.w3school.com.cn/b.asp）。为了整体程序结构的清晰，编写的程序将结构（.html文件）、表现（.css文件）和表现（.js文件）分开表示。 例子1：并没有什么用处，几种J...
JavaScript学习之路 (实例一)
Litbai_zhang
09-11 210
效果 将鼠标移至复选框时，出现提示，移走回复原样 代码 如下： 效果 网页原始效果 鼠标放至复选框中效果
javascript 入门
最新发布
10-10
以下是一些入门 JavaScript 的步骤： 1. 学习基本语法：了解 JavaScript 的语法结构、变量、数据类型、运算符等基本知识。可以通过在线教程或书籍来学习。 2. 编写脚本：使用文本编辑器（如 Notepad++、Sublime ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值