目录

一、变量

1.概念

2.命名规则

3.定义方式

4.变量的语法细节

二、 document对象

一、变量

1.概念

在程序运行期间，随时可能产生—些临时数据，应用程序会将这些数据保存在一些内存单元中。变量就是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。

2.命名规则

  • 由字母、数字、下划线和美元符号（$）组成
  • 严格区分大小写
  • 必须以字母或下划线开头，不能以数字开头
  • 不能有空格、加、减等特殊符号
  • 不能是关键字、保留字
  • 要尽量做到“见其名知其意”
  • 建议遵循驼峰命名法，首字母小写，后面的单词首字母大写

3.定义方式

var  变量名;      //js是一种弱类型脚本语言，对类型的要求不严格，(ES5中)所有变量的定义都用var

  • 声明单个变量：var temp;
  • 声明多个变量：var a,b,c;
  • 声明变量的同时给变量赋值：var i=2,j=10；
  • 作为循环的一部分：for(var i=0;i<10;i++){ }
  • 多次声明同一个变量（相当于对变量重新赋值）：var a=1;     var a=10;     则a的值为10

例1： 

<script>
    var k = 5050;
    var f = 3.1415;
    var t = "西安市"

    console.log("k=", k);
    console.log("f=", f);
    console.log("t=" + t);
    
    console.info("早睡早起")
    console.error("长头发")
</script>

javascript变量交换 javascript中,变量的定义_java

例2:(交换两个变量的值)

var temp;
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1;
apple1 = apple2;
apple2 = temp;
console.log(apple1); // 输出结果：红苹果
console.log(apple2); // 输出结果：青苹果

javascript变量交换 javascript中,变量的定义_赋值_02

为什么两个数据交换时需要一个中间变量？答：如果直接交换，一个变量会被覆盖。

4.变量的语法细节

①只声明变量，不给变量赋值，输出变量显示undefined(未定义的数据类型)

var id;
    console.log(id);

javascript变量交换 javascript中,变量的定义_开发语言_03

   

②未声明变量，直接输出变量，则报错

console.log(phone);

javascript变量交换 javascript中,变量的定义_java_04

  

③不声明变量，直接给变量赋值是允许的，这是JavaScript的特性

uname = "toufa";
    console.log(uname);

javascript变量交换 javascript中,变量的定义_javascript变量交换_05

 

二、 document对象

文档对象，代表了整个页面。通过该对象可以获取页面中的标签。

方法

说明

document.getElementById(id)

返回对拥有指定id名的第一个对象的引用(简单理解为获取指定id名的标签)

document.getElementsByName(name)

返回带有指定name属性名的对象集合(简单理解为获取指定name名的标签)

document.getElementsByTagName(标签名)

返回带有指定标签名的对象集合(简单理解为获取标签名）

document.getElementsByClassName(class)

返回带有指定类名的对象集合(简单理解为获取指定class名的标签)

document.getElementById()例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript">
    function getInput(){
        var t = document.getElementById('pt').value;  //获取页面中id为pt的文本框的值
        console.log("文本框的值是：",t);
    }
</script>
<body>
    <input type="text" id="pt" >
    <button onclick="getInput()">获取文本框的值</button>
</body>
</html>

javascript变量交换 javascript中,变量的定义_java_06

 document.getElementsByName()例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript">
    function getSex(){
        var sex = document.getElementsByName('gender'); //通过name属性获取标签,返回值是数组
        // console.log("长度：",sex.length)
        console.log("性别：",sex[0].value)
    }
</script>
<body>
    <input type="radio" value="男" name="gender">男
    <input type="radio" value="女" name="gender">女 
    <button onclick="getSex()">性别</button>
</body>
</html>

javascript变量交换 javascript中,变量的定义_javascript变量交换_07