第二章 JavaScript基础指令

最新推荐文章于 2023-03-16 20:44:23 发布

weixin_30527323

最新推荐文章于 2023-03-16 20:44:23 发布

阅读量108

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/my-program-life/p/11178118.html

版权

一、常见数据类型

1、数字数据类型

数字数据类型处理数字

主要用途：数字不仅被用于像计算器之类的事情，还被用于检测屏幕尺寸、移动页面上元素的位置、

　　　　　设置元素完成淡入特效所需要的时间等任务。

示例1

 var price = 5;
 var quantity = 14;
 var total = price * quantity;

2、字符串数据类型

字符串数据类型包含字母和其他字符。

注意：字符串可以使用单引号或双引号，但是起始引号必须和结尾引号相匹配。

主要用途：通常用于向页面添加新的内容，字符串可以包含HTML标记。

示例2

  var username = 'Molly';
  var message = 'See our upcoming range';

示例3

var title; 
var message;
//在字符串中使用引号
title = "Molly's Special Offers";
//在字符串中使用HTML标签
message = '<a href=\"sale.html\">25% off!</a>';

3、布尔数据类型

布尔数据类型只能是true或false中的一个。

示例4

var inStock;
var shipping;
inStock = true;
shipping = false;

在检测应该运行哪部分代码时，布尔数据类型非常有用。

4、其他数据类型

（数组、对象、undefined、null）将在后面介绍。

二、变量

1、作用：变量用来存储信息。

2、变量必须先声明后使用，声明的过程包括创建变量和命名变量

创建变量：使用var关键字。

命名变量（标识符）：如果变量名不止一个单词，则通常写成camelCase的形式。

3、变量命名的规则

（1）名字必须以字母、美元符号（$）或下划线（_）开头，不能以数字开头。

（2）在变量命名的过程中，不能使用除字母、数字、美元符号（$）或下划线（_）以外的字符。

（3）不能使用关键字或保留字来命名变量。

（4）所有变量对大小写敏感。

（5）使用的变量名要能够描述出变量中存储的信息的类型，即要做到“见名知意”。

（6）如果变量名由超过一个单词组成，则第一个单词使用小写字母，后面的每个单词的首字母都要用大写字母。

4、注意：在JavaScript中，声明变量不需要具体指明变量的类型，只需要使用var关键字即可。

三、JavaScript基础指令示例

example.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript基础指令</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #form{
            border: 10px solid red;
        }
        h1{
            font: normal bold 30px '黑体';
            color: blueviolet;
            margin-left: 40px;
        }
        tr,td{
            border: 5px solid blue;
            text-align: center;
            background-color: aqua;
        }


    </style>
</head>

<body>
    <h1>Elderflower</h1>
    <div id="content">
        <div id="greeting" class="message">
            Hello!
        </div>
        <table id="form">
            <tr>
                <td>Custom sign:</td>
                <td id="userSign"></td>
            </tr>
            <tr>
                <td>Total tiles:</td>
                <td id="tiles"></td>
            </tr>
            <tr>
                <td>Subtotal:</td>
                <td id="subTotal">$</td>
            </tr>
            <tr>
                <td>Shipping:</td>
                <td id="shipping">$</td>
            </tr>
            <tr>
                <td>Grandtotal:</td>
                <td id="grandTotal">$</td>
            </tr>
        </table>
        <a href="#" class="action">Pay Now</a>
    </div>
    <script src="js/example.js"></script>
</body>

</html>

example.js

//创建欢迎信息的变量
var greeting = 'Howdy ';
var name = 'Molly';
var message = ', please check your order:';
//将上述三个变量连接在一起构建欢迎信息
var welcome = greeting + name + message;

//创建标牌的详细信息
var sign = 'Montague House';
//标牌中包含字符的个数
var tiles = sign.length;
var subTotal = tiles * 5;
//运费
var shipping = 7;
var grandTotal = subTotal + shipping;

//以下为修改相关的内容

var el = document.getElementById('greeting');
el.textContent = welcome;

var elSign = document.getElementById('userSign');
elSign.textContent = sign;

var elTiles = document.getElementById('tiles');
elTiles.textContent = tiles;

var elSubTotal = document.getElementById('subTotal');
elSubTotal.textContent = '$' + subTotal;

var elShipping = document.getElementById('shipping');
elShipping.textContent = '$' + shipping;

var elGrandTotal = document.getElementById('grandTotal');
elGrandTotal.textContent = '$' + grandTotal;

运行结果如下：

转载于:https://www.cnblogs.com/my-program-life/p/11178118.html

weixin_30527323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二章 JavaScript基础指令

一、常见数据类型1、数字数据类型数字数据类型处理数字主要用途：数字不仅被用于像计算器之类的事情，还被用于检测屏幕尺寸、移动页面上元素的位置、　　　　　设置元素完成淡入特效所需要的时间等任务。示例1 var price = 5; var quantity = 14; var total = price * quantity;2、字符串数据类型字符...
复制链接

扫一扫