JS.初学.案例

最新推荐文章于 2022-06-21 15:53:36 发布
VIP文章 最新推荐文章于 2022-06-21 15:53:36 发布
阅读量504 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxr686/article/details/106494897
版权

test.1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
    
            width: 100px;
            height: 100px;
            background: azure;
        }
    </style>
    <!--内联方式-->
    <script>
        // alert("hello javascript")
    </script>
    <!--外部方式-->
    <script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
     第一个javascript程序
     <hr>
     <!--行内方式-->
     <input type="button" value="点我" οnclick=alert("我被点了")>
     <!--<a href="" οnclick="alert('超链接被触发')">超链接</a>-->
     <a href="javascript:alert('超链接被触发')">超链接</a>

     <div onmouseover="alert('走开')">把鼠标移上来</div>

</body>
</html>

网页效果
在这里插入图片描述

test.2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //变量
        var name;//定义了一个变量
        //age整型变量 因为age中存放的是整数
        // alert(age);

        sex = "male";//不建议使用
        // alert(sex)
        name = "haha";//将字符串常量haha赋值给变量name
        name = "heihei";
        // alert(name);

        var age=18;//定义了一个变量age并将整数18常量赋值给age
        {
    
            // var x = 8;
            // alert(x);
            let y = 7;
            // alert(y);
        }
        // alert(x);
        // alert(y);
        // 姓名 = "lll";
        // alert(姓名);
        age = 18;
        Age = 19;
        alert(age);
    </script>
</head>
<body>

</body>
</html>

网页效果：
在这里插入图片描述

test.3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //输出信息
        // alert("heihei");
        // console.log("哈哈");
        // document.write("嘻嘻");
        //输入
        // var name=prompt("请输入你的姓名");
        // console.log(name);
        // var age=prompt("请输入你的年龄")
        //  console.log(age,typeof age);
        // age = Number(age);
        // console.log(age,typeof age);
        // console.log(age+2);
        //转义字符
        console.log("he\'ll\no world")//\n表示换行
        //这是一个单行注释
        /*
        这是多行注释
         */
    </script>
</head>
<body>

</body>
</html>

网页效果
在这里插入图片描述

test.4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            数据类型
         */
        var name = 'tom';
        var age = 18;
        var height = 180.5;
        var flag= true;
        var hobby = null;
        var date = new Date;
        var arr = new Array;
        var sex;//定义一个变量，但是没有赋值
        // console.log(typeof name);
        // console.log(typeof age);
        // console.log(typeof height);
        // console.log(typeof flag);
        // console.log(typeof hobby);//如果数据是null、Date、Array等，返回object
        // console.log(typeof date);
        // console.log(typeof  arr);
        // console.log(typeof sex);//undefined 未被定义的类型
        //
        // console.log('hello'-5);//返回NaN

        /*
           类型转换
         */
        //1、转换为number
        // var a = '12';
        // console.log(a,typeof a);
        //方式一：使用Number()
        // a = Number(a);
        // console.log(a,typeof a);
        // a = Number('12.5');
        // a = Number('12abc');

        //方式二：parseInt
        // a = parseInt('12');
        // a = parseInt('12.5');转换时会去掉小数部分
        // a =parseInt('12abc');//按照字符的顺序依次解析
        // a = parseInt('abc12');

        //方式三：parseFloat
        // a = parseFloat('12');
        // a = parseFloat('12.5');
        // a = parseFloat('12abc');
        // a = parseFloat('abc12');

        // //将数值转换为字符串
        // var a = 12;
        // a = a+'';//后接一个空字符串
        // console.log(a,typeof a);

        // //将布尔类型的值转换为数字
        // var a;
        // a = Number(false);//在js中true用1或非0表示，false用0表示
        /*
        转换为布尔
         */
        // var a = Boolean(0);
        // var a = Boolean('');
        // var a = Boolean(null);
        // var a = Boolean(undefined);
        // var a = Boolean(NaN);
        // var a = Boolean(4);
        var a = Boolean('tom');
        var name;
        name = 'tom';
        if(name){
    
            console.log(a,typeof a);
        }

        // console.log(name,typeof name);

    </script>
</head>
<body>

</body>
</html>

网页效果
在这里插入图片描述

test.5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*算术运算符：+ - * / %求余 **乘方  ++  --

比较运算符：> 、 >=、 < 、<= 、== 、===、!=

赋值运算符：=、+=、-=、*=、/=、%=

逻辑运算符：&&并且  、||或者、！非

条件运算符：条件？表达式1：表达式2
*/
        //算术运算符
        //+ - * / %求余 **乘方  ++  --
        // var a = 5;
        // var b = 3;
        // var c = '2';
        // var d = false;
        // console.log(a+b);
        // console.log(a-b);
        // console.log(a*b);
        // console.log(a/b);
        // console.log(a%b);
        // console.log(a**b);//a的b次方
        // console.log(a-c);//当变量c为数字字符时，会自动将数字字符转换为数值
        // console.log(a+d);
        // var a = 1;
        // console.log(a++);//先使用a中的值，再让a自加减，在原值的基础上加1减1，表达式会返回变化前a的值，然后自加 a=a+1
        // console.log(a);
        // console.log(++a);//表达式返回变化后a的值，先自加减，再返回值
        // console.log(a);
        // var a = 1;
        // var b = 2;
        // console.log(a++ + b++);
        // console.log(a,b);
        // console.log(a++ + ++b);
        // console.log(a,b);
        // console.log(++a + b++);
        //2.比较运算符
        // var a = 1;
        // var b = true;
        // console.log(a>b);
        // console.log(a<b);
        // console.log(a>=b);
        // console.log(a<=b);//返回值是boolean值
        // console.log(a+b);
        // console.log(a==b);//在js中true表示1，false表示0
        //3.赋值运算符
        // var a = 8;
        // a+=2;//a=a+2
        // a-=2;//a=a-2
        // console.log(a);

        //4.逻辑运算符
        var x = true;
        var y = false;
        // console.log(x && y);//&&并且运算符，两边为真才为真，一边为假就是假
        // console.log(x || y);//||两边为假才为假，一边为真就是真
        //逻辑运算的短路问题
        a = 0;
        b = 5;
        console.log(a && b);
        console.log(a || b);

        //5.条件运算符
        console.log(a>b?a+b:a-b);
    </script>
</head>
<body>

</body>
</html>

网页效果
在这里插入图片描述

test.6.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用Match对象进行数学运算，用法：Match.方法名(参数
        // 1.绝对值)
        console.log(Math.abs(-5));
        //2.幂运算
        console.log(Math.pow(2,4));
        //3.四舍五入
        console.log(Math.round(123.556));//在js中不可以指定四舍五入第几位
        //4.向上取整，向下取整
        console.log(Math.ceil(3.5));//取大于等于3.5的最小整数
        console.log(Math.floor(3.5));//取大于等于3.5的最大整数
        //5.生成一个[0.0，1]之间的随机数
        console.log(Math.random());//以当前系统时间为随机数种子
        //6.最大值，最小值
        console.log(Math.max(1,2,3,4,5));
        console.log(Math.min(1,2,3,4,5));
        //7.圆周率的值
        console.log(Math.PI);
    </script>
</head>
<body>

</body>
</html>

网页效果
在这里插入图片描述

test.7.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age = 25;
        if(age>=60)
        {
    
            console.log('老年');
        }
        else if(age>=30)
        {
    
            console.log('中年');
        }
        else if(age>=16)
        {
    
            console.log('少年');
        }
        else
        {
    
            console.log('童年');
        }
        var day = '星期一';
        switch (day) {
    
            case '星期一': {
    
                console.log('吃包子');
                break;
            }
            case '星期二': {
    
                console.log('吃包子');
                break;
            }
            case '星期三': {
    
                console.log('吃包子');
                break;
            }
        }
    </script>
</head>
<body>

</body>
</html>

网页效果
在这里插入图片描述

test.8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var i = 1;
        var sum = 0;
        while(i<100)
        {
    
            sum+=i;
            i++;
        }
        console.log(sum);

        //do...while
        var i =1;
        var sum = 0;
        do
        {
    
            sum+=i;
            i++;
        }while (i<101);
        console.log(sum);

        //for
        var sum = 0;
        for(var i = 1;i<-100;i++)
            if(i%7!=0);
                sum+=i;
        console.log(sum);

        //for...in对集合进行遍历
        var str ='welcome';//将字符串看作是由多个字符组成的集合
        for(var index in str)
        {
    
            // console.log(c);//输出了str索引
            console.log(str[index]);
        }
        // s ='abc';
        // document.write(s[0]);
        // document.write(s[1]);
        // document.write(s[2]);

        //break continue
        for(var i =1;i<=10;i++)
        {
    
            if(i%2==0)
                break;
            console.log(i);
        }

    </script>
</head>
<body>

</body>
</html>

网页效果
在这里插入图片描述

test.9.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = new Array();
        // arr[0] = 12;
        // arr[1] = 13;
        // console.log(arr.length);
        // console.log(arr[0]);
        // console.log(arr[1]);



        // var nums = new Array();
        // for(var i=1;i<=100;i++)
        //     if(i%3==0)
        //         nums[nums.length] = i;
        //
        //
        // console.log(nums);
        // console.log(nums.length);

        // var arr = ['tom', 'jack','alice','mike','admin'];
        //
        // console.log(arr);
        // arr.sort();
        // console.log(arr);

        var arr = ['tom', 'jack','alice','mike','admin','jack'];
        console.log(arr);
        arr.reverse();
        console.log(arr);
        console.log(arr.join('*'));
        console.log(arr.indexOf('jack'));
        console.log(arr.lastIndexOf('jack'));
        console.log(arr.slice(1,4))
        console.log(arr.toString());







    </script>
</head>
<body>

</body>
</html>

网页效果
在这里插入图片描述

test.10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = new Array();
        // arr[0] = new Array();
        // arr[1] = new Array();
        // arr[0][0]=12;
        // arr[0][1]=9;
        // arr[1][0]=10;
        // console.log(arr);

        var arr = [
            [1,2,3],
            [4,5,6],
            [7,8,9],
        ];

        for(var i=0;i<arr.length;i++)
        {
    
            //循环输出每行的4个元素
            for(var j=0;j<arr[i].length;j++)
                document.write(arr[i][j]+'&nbsp;&nbsp;');
            //输出每行的换行
            document.write('<br>')
        }


    </script>
</head>
<body>

</body>
</html>

网页效果
在这里插入图片描述

test.11.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
          自定义函数
         */
        //1.定义函数
        function show() {
    
            console.log('嘿嘿');
        }
        function clac(num1,num2,num3) {
      //形式参数
            // console.log(num1,num2,num3);
            var sum = num1+num2+num3;
            return sum;
        }

        //2.调用函数  有2个功能  1、返回值  2、执行函数体为目的实现某一功能
        // show();
        var result = clac(1,2,3);//实际参数
        // console.log(result);
        //3.变量的作用域
        var c = 6;//全局变量
        // function fn() {
    
        //     var a = 5;//局部变量
        //     console.log(a);
        //     console.log(c);
        // }//定义函数
        // fn();//调用函数
        function fn() {
    
            if(true) {
    
                var a = 5;//局部变量
                // let a = 5;//块级变量
                console.log(a);
            }
            console.log(a);
        }

        fn();



        {
    
            var d = 2;//全局变量
            let x = 4;
            console.log(x);
        }
        console.log(d);
        console.log(c);



    </script>
</head>
<body>

</body>
</html>

网页效果
在这里插入图片描述

test.12.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1()
        {
    
            console.log('1111');
        }
        // f1();
        //当单机窗口时执行f1函数
        // window.onclick = f1;
        /*
            函数本身也是一种数据类型
            数据类型:string、number、boolean、null、undefined、function
         */
        // console.log(typeof f1);
        var a = f1;
        // console.log(typeof a);
        // a();

    //    将一个函数作为另一个函数的参数
        function f2(x,y) {
    
            console.log(x);
            y();
        }
        f2(1,f1);//当f1这个函数作为实际参数时࿰
最低0.47元/天 解锁文章
yxr686
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.js的入门练习案例
01-02
vue.js的入门练习案例 适用于后端程序员初学vue的练习 具体的文件可以参考博主的文章 博主首页：https://blog.csdn.net/weixin_43333483?spm=1011.2415.3001.5343 上述代码文件包含以下博客的练习代码 【Vue】一、...
java list 深拷贝_程序员：Java对象流、字节流、文件流的Serializable和深拷贝
weixin_39900206的博客
11-10 141
流在Java中是指计算中流动的缓冲区，从外部设备流向中央处理器的数据流成为“输入流”，反之成为“输出流”。字符流和字节流的主要区别：1.字节流读取的时候，读到一个字节就返回一个字节；字符流使用了字节流读到一个或多个字节(中文对应的字节数是两个，在UTF-8码表中是3个字节)时。先去查指定的编码表，将查到的字符返回。2.字节流可以处理所有类型数据，如：图片，MP3，AVI视频文件，而字符流只能处理字...
http://stateofbeing.org/cl.html 7777
cuichuan8699的博客
07-13 239
We have something for Those who likes fashion And for a number of various factors, too Ladies love to wear desig...
关于如何从list中查找需要的匹配的数据
horace7777的专栏
02-13 3420
大家都知道erlang常用list来存储数据比如: [{name,"Horace"},{sex,"Male"},{live,"CD"}]这种key-value来存储一个人的信息， 那么我们如何能快速的从一个list中找到需要的信息呢，我们有2个函数可以使用帮助: 1:proplists:get_value Info = [{name,"Horace"},{sex,"Male"},{l
redis
w123456hp的博客
06-21 419
redis
互联网最常用的密码和中国人最常用的密码 看看你的密码在不在里面
Rainman的专栏
11-09 1万+
如果你是黑客，可以先把这些密码试一遍再寻求技术破解，免得浪费时间如果你的密码是下列中的一个，抓紧改一下吧，上面的黑客马上就要破解你的密码了 呵呵 全球最常用的密码TOP 500： NOTop 1-100Top 101–200Top 201–300Top 301–400Top 401–5001123456porschefir
必须掌握的案例.zip
11-03
js初学者必须掌握的案例,里面涵盖了基本的js效果,一些平常的小工具,如倒计时,进度条,拖拽,轮播图,敏感词过滤等等
node.js学习案例
09-06
适合初学者学习node.js,就根据案例做了一个node.js的案例，供大家学习和指导，使用时请先安装下载使用mongodb数据库
chmod 777 到底是啥 ???看完这个你就完全懂了！
热门推荐
人间世
02-19 5万+
0X00 前言 可能对于Linux新手而言，很不解的一件事就是： 有时在访问文件xxx时，总是出现权限问题，但是上网一查，大佬们直接一句话： chmod 777 xxx 完事！ 相信你当时的心情是这样的： 我勒个神奇 然后之后遇到权限就照葫芦画瓢的chmod 777，也算是美滋滋。 不过，作为一个打破砂锅的程序猿怎么能就知道chmod 777！ 当然提到chmod，我们一定先说清楚Linux的用...
java反射机制
m0_51374762的博客
02-20 273
反射机制 （1）反射机制有什么用？ 通过java语言中的反射机制，可以操作字节码文件（class文件） 有点类似于黑客（可以读和改写字节码文件） （2）反射机制的相关类在哪个包下？ java.lang.reflect.*; （3）反射机制相关的重要的类有哪些？ java.lang.Class: public class User{ //Field int no; //Constructor public User(){ } publ
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
JS基础案例
December_shi的博客
09-23 1560
案例 目录 打印直角三角形 用函数求两个数的和 数组求和 九九乘法表 输出60分以上的数 目将数组B添加到数组A中 将所有大于等于20且小于等于60的数字成2 数组存储成绩，计算平均成绩 定义数组，找出最大数 控制台打印，每个后面添加’‘完成’’ 定义函数，获取数组中最小值 定义数组，找出数组中最大数连同下标一起输出 评委打分机制 打印等腰三角形 输出1-100所有素数 冒泡排序 1. 打印直角三角形 <script> for (var i =1;i < 1
工具类的讲解
m0_52625686的博客
12-22 415
教你三分钟学会工具类的搭建
js初识＋简单案例
dsdyy的博客
07-07 57
表单提交的缺点: (1) 表单提交默认跳转 (2) 数据传输过程中 网速较慢时 用户体验极差 (3) 无法判断提交的数据格式是否正确 所以js最初是用来做提交验证的 十天成型 (JS弱类型的语言) JavaScript 是一种直译型，弱类型的脚本语言。它是一个轻量级，但功能强大的编程语言。js需要靠事件驱动，依靠其他语言，js必须在html中被引用 弱： 1.变量在声明的时候不区分数据类型 2.数字不分整型和浮点型 3.undefined在其他语言不存在，变量一般要求声明即赋值 4.结尾可以不写分号
JavaScript的基本使用，使用一个小案例快速入门JavaScript
她的坏机器人
09-08 236
JavaScript常用语法 声明变量 var a = 10; var b = "hello"; var c = true; var array = [1, 2, 3]; var student = {id:1, name:"张三", age=21}; 变量符 var a = true; var b = false; a === b // 判断两个变量的值和类型是否相等 a == b // 判断两个变量的值是否相等 a && b // 逻辑与 a || b // 逻辑或 a ! // 逻辑
JS初学者必备的几个经典案例（一）！！！
ak364877的博客
11-18 748
一：选中复选框按钮可用 和 倒计时10秒后按钮可用 这是倒计时10秒后按钮可用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=...
超详细JavaScript入门基础+练手小案例
weixin_55643605的博客
10-28 2327
一.什么是JavaScript 它是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的 动态效果，用户交互及前后端的数据传输等。 它由下列三部分组成： 1.核心语法：规范JavaScript的基本语法。 2.BOM：提供了一系列操作浏览器的方法。 3.DOM：提供了一系列操作文档的方法。 二.使用方法 将JavaScript嵌入页面有以下三种方式： 1.元素绑定事件 事件：指用户的行为（单击，双击等）。 事件处理：元素监听事件，并在事件发生后自动执行事件过程
ORACLE数据库新建表时,报ORA-00906:缺失左括号
jrd7777的博客
05-21 1万+
JS基础小案例
xlecho的博客
03-28 1万+
title: JS基础小案例 date: 2015-12-19 10:28:40 categories: 前端基础总结 tags: 前端 xl_echo编辑整理，欢迎转载，转载请声明文章来源。更多案例、资料请联系QQ：1280023003 图片轮播小案例： &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" ...
three.js 案列 下载
最新发布
07-30
这些案例对于初学者来说是非常有用的，因为它们提供了三维渲染方面的基础知识，以及如何使用Three.js库来创建各种效果和交互。您可以通过查看这些案例代码来了解如何构建和修改自己的项目。 总之，下载Three.js案例...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值