JavaScript变量及数据类型 动态显示时间 跳板

最新推荐文章于 2022-05-11 18:21:10 发布
最新推荐文章于 2022-05-11 18:21:10 发布
阅读量331 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40791843/article/details/93192852
版权

一、 主流浏览器

 概念：有自己的内核。
  1. IE 　　　　　　　　　 内核：trident；
  2. Chrome 　　　　　　　 内核：webkit/blink；
  3. firefox 　　　　　　　　 内核：Gecko；
  4. opera　　　　　　　　 内核：presto；
  5. Safari　　　　　　　　 内核：webkit

二、JavaScript

  1. JavaScript是互联网上最流行的脚本语言，这门语言可用于Web和HTML，更可以广泛用于服务器，pc端，移动端。
  2. JavaScript脚本语言：
    　JavaScript是一种轻量级的语言；
    　JavaScript是可插入HTML页面的编程代码；
    　JavaScript插入HTML页面后，可由所有的浏览器执行；
  3. JavaScript实现：
    　1.JavaScript用法：必须用于标签 < script > < script >之间；
    　2.脚本可被放置在HTML页面中的< body > 和< head >部分中；
    　3.脚本数量无限制；
    　4.通常把脚本置放在head标签中，以便不干扰内容。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--可以通过在head标签里引入script标签-->
    <script>document.write("head引入")</script>
</head>
<body>
<!--可以通过src 来引入外部一个js文件-->
<script src="1.js"></script>
<!--可以通过在body标签里引入script标签-->
<script>document.write("body引入")</script>
</body>
</html>

1.js文件

document.write("外部引入")

在这里插入图片描述

  1. 可以在文档写入的时候添加标签；比如h1；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--可以在写文档的时候加入标签-->
    <script>document.write("<h1>h1标签</h1>")</script>
</head>
<body>

</body>
</html>
  1. 利用JavaScript来操作HTML；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<p id="pid"> Hello</p>
<script>
    document.getElementById("pid").innerHTML="Hello被script标签改变了";
</script>
</body>
</html>

可以看出，网页并没有显示Hello，而显示的是被改变；
在这里插入图片描述

  1. JavaScript语法：
    　语句之间的结束分割是分号（；），也可以不写分号，但是写上比较清晰；
    　语句的执行顺序是按照编写顺序执行的；
    　标识符：必须以字母，下划线或美元符号开始；
    　对大小写非常敏感，不可以随便改变大小写；
    　JavaScript会忽略掉很多的空格；
    　代码换行要写到 script标签之外；
    　注释（和 java 的注释一样）：
    　　单行注释：//
    　　多行注释：/**/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script>
    document.write("一次");
</script>
<script>
    document.write("两次");
</script>
<script>
    document.write("三次");
</script>
</body>
</html>

在这里插入图片描述

  1. JavaScript 声明变量
    利用var关键字来声明变量；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var i = 1;
        var j = 2;
        var m = i + j;
        document.write(m)//在浏览器页面打印输出m的值
    </script>
</head>
<body>

</body>
</html>

运行结果如下：
在这里插入图片描述

  1. JavaScript 数据类型
    　8.1. 字符串（String）
    　8.2. 数字（Number）
    　8.3. 布尔（Boolean）
    　8.4. 数组（Array）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var i = 1;
        var j = 2;
        var m = i + j;
        document.write(m)
    </script>
    <script>
        var String = "hello";//字符串
        var  i1 = 10;//数字
        var flag = true;//布尔
        //数组的定义方式1：通过中括号的方式
        var arr  = [1,2,3,4];//数组 数组里面可以存放任意类型的数据类型
        //数组的定义方式2：通过new Array，括号里面可以直接写元素的值
        var arr1 = new Array(1,2,3,4,5,6);
        //数组的定义方式3：通过new Array,括号里面先不写
        var arr2 = new Array();
        //通过数组下标赋值 动态写
        arr2[0] = 1;
        arr2[1] = 4;
        arr2[2] = 5;
        arr2[4] = 9
        //如果没有定义 arr2[3]这个元素 那么打印结果将是 undefined
        document.write(arr2[3]);//打印数组中某一个元素
    </script>
</head>
<body>

</body>
</html>

数组可以动态扩容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //数组自动扩容
        var arr = new Array(4);
        arr[0] = 1;
        arr[1] = 2;
        arr[2] = 3;
        arr[3] = 4;
        arr[4] = 5;
        arr[5] = 6;
        console.log(arr[4]);
        console.log(arr[5]);
        console.log("==========================");
        //数组里面可以放数据类型不一致的元素

        var arr1 = new Array(1,2,3,4,"bing");
        console.log(arr1);
        console.log("==========================");
        var str = "a b c d e f g";
        var arr2 = str.split(" ");
        console.log(arr2);
        console.log("==========================");
        //join通过指定的连接符 重新将数组排成字符串
        str = arr2.join("-");//a-b-c-d-e-f-g
        console.log(str);
        console.log("==========================");
        arr2[2] = 10;
        console.log(arr2);
        console.log("==========================");
        var num = "4 3 1 5 6 3 2";
        var arr3 = num.split(" ");
        //排序 默认升序
        arr3.sort();
        console.log(arr3);
        console.log("==========================");
        //向数组最后位添加 元素
        arr3.push(7);
        console.log(arr3);


    </script>
</head>
<body>

</body>
</html>

8.5. 对象（Object）;
　 　8.6. 空（null）;

var i2 = null;//输出为 null

在这里插入图片描述
　　 　8.7. 未定义;
　　 　8.8. 可以通过赋值为null 的方式清除变量;

  1. JavaScript 运算符
    　9.1 算数运算符：+ 、-、 * 、%、/、++、- -
    　9.2 赋值运算符：=、+=、-=、* =、%=、/=
    　9.3 字符串操作：
    　9.4 比较运算符： ==、 =、！=、！、>、<、>=、<=
    　===：数据类型与内容都相同，则返回true；
    　==：内容相同就返回true，与数据类型无关；
    　! =：比较内容；
    　! == ：比较内容和数据类型；
    　9.5 逻辑运算符：&&、||、！
    　9.6 条件运算符：例如， x < 10? " x比10小" : “x比10 大”
  2. 循环语句
    　10.1 for循环
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        var arr = [1,2,3,4,5,6];
        var j;
        //类似于java里面的加强for循环
        for (j in arr) {
            document.write(arr[j]+"<br>");
        }
    </script>
</body>
</html>

在这里插入图片描述
　　 　10.2 while 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        var i = 1;
        while (i < 10){
            document.write("i = "+i +"<br/>");
            i++;
        }
    </script>
</body>
</html>

在这里插入图片描述

  1. 跳转语句：break return continue；
  2. JavaScript的4中输出方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //4种输出方式
        //1.弹窗(浏览器事件)
        window.alert("hello");
        //2.括号内写html语言(文档对象事件)
        document.write("<h1>郝一凡</h1>");
        //3.控制台输出(调试语法)
        console.log("hello wrold!")
        //4.写在网页上
        document.getElementById("abc").innerHTML = "哈哈哈";
    </script>
</head>
<body>
<div id="abc">

</div>
</body>
</html>
  1. 循环打印输出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //函数
        function study() {
            for (var i = 1;i < 5;i ++){
                document.write("<h1>"+ "JavaScript" + i+"</h1>");
            }
        }
        function add(a,b) {
            return alert(a+b);
        }
        function nums(n) {
            for(var i = 0;i < n;i++){
                document.write("<h1>"+ "JavaScript" + i+"</h1>")
            }
        }
    </script>
</head>
<body>
<button type="button" value="按钮" onclick="study()">按钮</button>
<button type="button" onclick="add(parseInt(prompt('请输入第一个数字','')),parseInt(prompt('请输入第二个数字')))">按钮2</button>
<!--prompt('请输入循环次数','') 将字符串自动转化成数字-->
<button onclick="nums(prompt('请输入循环次数',''))">按钮3</button>
</body>
</html>
  1. 跳板
    1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.location.href = "index2.html";
    </script>
</head>
<body>

</body>
</html>

2

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script>
          window.location.href = "index3.html";
      </script>
  </head>
  <body>
  
  </body>
  </html>

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script>
           window.location.href = "https:\\www.baidu.com";
       </script>
   </head>
   <body>
   
   </body>
   </html>
  1. BOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1() {
            //innerHTML 修改 html的标签有用
            document.getElementById("a").innerHTML = "<h1>你好啊</h1>"
        }
        function f2() {
            //innerText 修改 html标签没有用
            document.getElementById("a").innerText = "<h1>你好啊</h1>"
        }
    </script>
</head>
<body>
<div id="a">

</div>
<input type="button" onclick="f1()" value="显示">
<input type="button" onclick="f2()" value="隐藏">

</body>
</html>
  1. window对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //与 alert(""); 等价
        //所有函数都属于 window. 默认省略
        window.alert("");
        window.location.href = "https:\\www.baidu.com";
        window.history.back();//后退
        window.history.forward();//转发
        window.history.go();//前进
    </script>
</head>
<body>
<a href="javascript:location = 'https:\\www.baidu.com'">百度一下</a>

</body>
</html>
  1. 加载事件（onload）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function begin() {
            document.write('哈哈哈');
        }
    </script>
</head>
<!--网页加载完成执行begin（）函数-->
<body onload="begin()">

</body>
</html>
  1. 动态显示时间
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getDate() {
            var day = new Date();
            var h = day.getHours();
            var m = day.getMinutes();
            var s = day.getSeconds();
            setTimeout(getDate,1000);
            document.getElementById("time").innerText ="北京时间 "+ h +":" + m+":"+s;
        }


    </script>
</head>
<body>
<div id="time">
    <input type="button" onclick="getDate()" value="按钮">

</div>

</body>
</html>
小白葫芦
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解JavaScript的变量和数据类型
10-23
主要介绍了详解JavaScript的变量和数据类型，需要的朋友可以参考下
JavaScript用法，显示数据，注释，变量，数据类型，动态类型，比较运算符；
Q53100的博客
09-13 280
在HTML页面的脚本必须写在scrip标签之间，可以放在head，body之间都是可以的，放在最后也可以，对位置要求不严格。 html文档中可以不限多次放于scrip标签通常放入body标签内，或者最后，是页面更加简洁
JavaScript中变量的数据类型
tcx19950210的博客
03-15 881
JavaScript是弱类型编程语言,定义变量都使用 var 定义,与 Java 这种强类型语言有区别.在定义后可以通过 typeof) 来获取JavaScript中变量的数据类型.// Number 通过数字字面量赋值  // Number 通过表达式字面量赋值// String 通过字符串字面量赋值// Array  通过数组字面量赋值 // Object 通过对象字面量赋值...
简单介绍JavaScript的变量和数据类型
10-24
主要介绍了简单介绍JavaScript的变量和数据类型,是JS入门中的基础知识,需要的朋友可以参考下
关于JavaScript的变量的数据类型的判断方法
10-23
主要介绍了关于JavaScript的变量的数据类型的判断方法,JS是一种弱类型语言,其数据类型的相关特性有时也受到不少开发者的诟病,需要的朋友可以参考下
JavaScript笔记整理（变量、数据类型、基本数据类型转换、弹出框）
Java码农ing的博客
11-14 524
关键字 和 保留字的概念: 关键字 ： 编程语言已经事先定义好的，具有特殊含义 java:public 、class 、void 、main、static 等 js:funcation、return 、 object等 保留字： 编程语言中目前还没有使用，但是以后可能会使用的单词 比如 Java中的goto语句 标识符 什么是标识符？ 答： java中：标识符就是用于给包名、...
JavaScript中的变量及数据类型
知然的专栏
03-20 8381
JavaScript是一种弱类型的语言，变量名、操作符和方法名都区分大小写。 1、变量定义     在JavaScript中，使用var来定义任何类型的变量，每一个变量只是用于保存数据的占位符。     var temp; //这句代码定义了一个变量，但其类型是未知的，可以存放任何类型的值，没有初始化的时候，test中存储是undefined。 var temp=2;
JavaScript中变量声明以及数据类型
dgls50457的博客
04-21 600
JavaScript变量 变量名必须以字母或下划线（"_"）开头 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做） 变量名称对大小写敏感（y 和 Y 是不同的变量） 变量可以包含数字、从 A 至 Z 的大小写字母 提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。 Var a; “var” － 用于声明变量的关键字 “...
JavaScript 变量和数据类型
zhzijun的博客
09-13 208
JavaScript是弱类型脚本语言，使用变量之前，可以无需定义，当使用某个变量的时候直接使用即可。 主要分为以下两种定义方式: 隐式定义： 直接给变量赋值 显示定义： 使用var关键字定义变量 <script type="text/javascript"> var a,b,c;//可以一次性定义多个变量,注意要用逗号隔开 var l,j="abc",k=0;//定义变量时可以为变量指定初始值 <script> 变量的名称需要遵循以下规则： 首字母必须是字母（大
JavaScript获取变量数据类型
黑马程序员官方博客
05-11 9550
JavaScript前文回顾： 认识JavaScript到初体验 JavaScript 注释以及输入输出语句 JavaScript变量的使用、语法扩展、命名规范 JavaScript数据类型简介以及简单的数据类型 一、获取变量数据类型 1.1 获取检测变量的数据类型 typeof 可用来获取检测变量的数据类型 var num = 18; console.log(typeof num) // 结果 number 不同类型的返回值 1.2 字面量 字面量是在源代码中一..
js变量的声明、类型、以及使用
racy696的博客
08-21 508
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js的变量</title> <!-- 作者：李瑞琦 时间：2017-08-21 描述：js变量的声明、类型、以及使用 -->
js变量，数据类型，日期与时间
Iam_am_lbj的博客
08-29 1423
变量 JavaScript中声明变量使用关键字var JavaScript中可先声明后赋值 在一个HTML文档使用script标签嵌入多个JS语句的时候，这几个语句相通的 数据类型（概要） 掌握常用的数据类型 使用typeof运算符查询数据类型 数据类型包括：字符串，数字，布尔，数组，对象，Null，undefined 字符串 可使用“+”进行字符串连接 JavaScript中常...
JavaScript有哪些数据类型和常用方法
weixin_34161083的博客
01-19 3831
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【 JavaScript有哪些数据类型和常用方法】 1.背景介绍： JavaScript：是脚本语言。是一种轻量级的编程语言。它是可插入HTML页面的编程代...
JS学习之获取变量数据类型
weixin_44079801的博客
06-26 262
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取变量数据类型</title> <script> var num=109, str1='pink', flag=true; console.log(typeof num); console.log(typeof str1); console.log(
js中变量的数据类型及其检测
小彩虹的博客
01-22 845
js中变量的数据类型及其检测 一、变量的数据类型检测 变量类型检测使用   typeof(变量)； &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt
javascript-变量的命名-数据类型-注释
pyhui的技术博客
06-03 229
习题 变量的定义 通过var关键词，来声明一个变量（定义一个变量） 例如： var iNum = 123; var sName = "李雷"; 一行可定义多个变量 var iNum=123,sName="李雷"; 说明 javascript是一个弱类型语言 变量被赋予什么值，该变量就属于什么数据类型 变量的命名 ...
javascript 查看变量类型
sayyy的专栏
08-21 7278
console.log(Object.prototype.toString.call(1)); console.log(Object.prototype.toString.call(3.14)); console.log(Object.prototype.toString.call('a')); console.log(Object.prototype.toString.call(true)); console.log(Object.prototype.toString.call([1,2,3])); co
javascript数据类型 -JavaScript优势简介及数据类型
最新发布
11-25
JavaScript支持许多数据类型，包括变量、运算符、控制语句、函数、对象、数组、字符串、数学、布尔值、全局变量、日期和数字等。这些数据类型使开发者能够处理各种数据和逻辑操作，使网页具有更多的交互性和动态性。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值