JavaScript 基础入门：变量、数据类型与常用 DOM 操作指南

JavaScript 变量与数据类型基础

变量是编程中用于存储信息的基本容器。

在 JavaScript 中，变量充当存储数据的容器角色。

要使用变量，首先需要进行声明操作。

声明变量的基本语法结构如下：

var 变量名

变量名 = 值;

遵循先声明后赋值的编程规范。

声明后的变量允许被重复赋予新的值。

在定义变量时，必须遵守特定的命名规范。

变量名必须以字母字符作为开头。

变量名也可以美元符号 ($) 或下划线 (_) 开头，但通常不推荐这种做法。

JavaScript 中的变量名区分大小写，因此变量 a 和 A 被视为两个完全不同的变量。

语句是构成程序的基本执行单元。

每条语句通常以分号结尾；若省略分号，JavaScript 解析器会自动判断语句的结束位置。

为了保持代码清晰和可维护性，建议养成在每个语句末尾添加分号的良好编码习惯。

理解不同的数据类型是掌握 JavaScript 的关键。

在 JavaScript 中，数据被称为值（value），其类型多样。最常见的类型是数字类型。

字符串（string）类型指的是被引号包裹的一个或多个字符序列。

数字类型包括任何数值，无论是否包含小数点，例如 68.57。

字符串类型由引号内的字符组成，支持使用单引号或双引号，例如 "hello, world"。

布尔值（Boolean）仅包含 true 或 false 两种状态，例如 true。

Undefined 表示变量未赋值或不存在；Null 表示变量被显式清空。

对象（Object）是与特定实体相关联的值集合。

函数（Function）是用于执行特定任务并返回值的代码块。

1 var a; //a为undefined
2 var a = 6; //a 为数字
3 var a = "Jason"; // a 为字符串

函数定义与调用方法

函数是 JavaScript 中实现功能复用的核心机制。

函数由一组旨在完成特定任务的 JavaScript 语句组成。

调用函数的基本语法格式如下：

function 函数名(){
  函数代码;
}

函数名();

以下是关于函数定义与调用的详细说明：

function 是用于定义函数的关键字。

"函数名" 是开发者为函数指定的标识符名称。

"函数代码" 是实际执行特定功能的代码段，需替换占位内容。

"第二个函数名" 展示了另一种调用已定义函数的方法。

1 function add2(){
2 var sun = 3 + 2;
3 alert(sun);
4 }
5 add2();//调用函数直接写函数名直接弹出函数代码

1 <input type="button" value="点击我" onclick="add2()" />
2 <!-- 单击按钮后，调用函数，onclick为点击事件 -->

网页内容输出与消息对话框

使用 document.write 方法可以直接在网页中输出内容。

document.write() 函数的作用是将内容直接写入当前 HTML 文档流。

第一种用法是将输出内容用双引号括起来，直接输出引号内的字符串内容。

document.write("I love JavaScript!");

第二种用法是通过变量来输出存储的内容。

var mystr = "hello world";
document.write(mysrt);//直接写变量名，输出变量存储的内容

第三种用法是输出多项内容，各项之间使用加号（+）进行连接。

var mystr = "hello";
document.write(mystr + "I love Java Script");//多项内容之间用+号连接

第四种用法是输出 HTML 标签，标签需用引号括起，浏览器会解析并应用这些标签。

var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");

alert 方法用于显示警告消息对话框。

在访问网站时，有时会突然弹出一个包含提示文字的小窗口。

如果不点击该窗口中的“确定”按钮，用户无法对网页进行其他操作，此功能由 alert 实现。

alert 的语法格式为：alert(字符串或变量);

var mynum = 30;
alert("hello!");
alert(mynum);

执行结果会按顺序弹出消息框，其中包含一个“确定”按钮。

使用 alert 时需注意以下几点：

1. 在用户点击对话框的“确定”按钮之前，浏览器会阻塞其他操作。

2. 消息对话框常用于程序调试阶段。

3. alert 输出的内容可以是字符串或变量，其用法与 document.write 类似。

confirm 方法用于显示确认消息对话框。

除了向用户展示信息，有时还需要从用户处获取选择信息，此时使用 confirm。

confirm 对话框通常用于让用户做出选择，例如询问“你对吗？”，弹出时包含“确定”和“取消”两个按钮。

confirm 的语法格式为：confirm(str);

参数 str 表示要在消息对话框中显示的文本；返回值类型为 Boolean。

confirm 的返回值取决于用户点击的按钮：

当用户点击“确定”按钮时，返回 true。

当用户点击“取消”按钮时，返回 false。

通过判断返回值，可以明确用户点击了哪个按钮。

<script type="text/javascript">
  var mymessage=confirm("你喜欢JavaScript吗?");
  if(mymessage==true){
    document.write("很好,加油!"); 
  }else{
    document.write("JS功能强大，要学习噢!");
  }
</script>

prompt 方法用于显示提问消息对话框。

当不仅需要用户回答 Yes/No，而是希望获得更具体的响应时，可以使用 prompt。

prompt 弹出的消息对话框包含“确定”按钮、“取消”按钮以及一个文本输入框。

prompt 的语法格式如下：

prompt(str1,str2);

参数说明如下：

str1 是要显示在消息对话框中的文本，该文本不可由用户修改。

str2 是文本框中的默认内容，用户可以进行修改。

prompt 的返回值规则如下：

1. 若点击“确定”按钮，文本框中的内容将作为函数返回值返回。

2. 若点击“取消”按钮，将返回 null。

function rec(){
  var score; //score变量，用来存储用户输入的成绩值。
  score = prompt("请输入你的成绩","90");
  if(score>=90){
    document.write("你很棒!");
  }else if(score>=75){
    document.write("不错吆!");
  }else if(score>=60){
    document.write("要加油!");
  }else{
    document.write("要努力了!");
  };
} ;

<script>
    var myName = prompt("输入您的名字");
     if(myName != null && myName != ""){
      document.write("welcom to" + myName);
    }else{
      document.write("welcom to my friend");
    }
</script>

窗口控制与 DOM 操作技巧

window.open 方法用于打开新的浏览器窗口。

打开新窗口的语法格式为：

window.open([URL], [窗口名称], [参数字符串])

参数说明如下：

URL 是可选参数，指定窗口中要显示的网页网址或路径。若省略或为空字符串，窗口不显示任何文档。

窗口名称是可选参数，用于指定被打开窗口的名称。

1. 该名称由字母、数字和下划线字符组成。

2. 窗口名称也可指定为逗号分隔的特征列表，声明窗口行为。

可以是 "_top"、"_blank"、"_selft"、"_parent" 等特定值。

_blank 表示在新窗口中显示目标网页。

_selft 表示在当前窗口中显示目标网页。

_parent 表示在框架网页中当前整个窗口位置显示目标网页。

_top 表示在框架网页中上部窗口显示目标网页。

3. 相同 name 的窗口只能创建一个，若要创建多个窗口，name 必须不同。

4. name 字符串中不能包含空格。

参数字符串是可选参数，用于设置窗口的具体属性，各参数间用逗号分隔。

参数表包含以下属性：

top Number 窗口顶部距离屏幕顶部的像素数 left Number 窗口左端距离屏幕左端的像素数 width Number 窗口的宽度 height Number 窗口的高度 menubar yes,no 窗口是否显示菜单 toolbar yes,no 窗口是否显示工具条 scrollbars yes,no 窗口是否显示滚动条 status yes,no 窗口是否显示状态栏

<script type="text/javascript">
   window.open('http://','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
 </script>

window.close 方法用于关闭浏览器窗口。

close() 方法的作用是关闭窗口。

具体用法示例如下：

1 window.close();//关闭本窗口
2 <窗口对象>.close();//关闭指定的窗口

例如：关闭通过代码新建的窗口。

1 <script type="text/javascript">
2   var mywin=window.open('https://www.jb51.net'); //将新打的窗口对象，存储在变量mywin中
3   mywin.close();
4 </script>

innerHTML 属性用于获取或替换 HTML 元素的内容。

该属性允许动态修改 HTML 元素内部的 HTML 内容。

innerHTML 的语法格式为：

 Object.innerHTML

Object 是通过 document.getElementById("ID") 等方法获取的元素对象。

<h2 id="con">javascript</H2>

<script type="text/javascript">
　　var mychar=document.getElementById("con");
　　document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
　　mychar.innerHTML="hello world"
　　document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>

通过修改 style 属性可以动态改变 HTML 元素的样式。

修改样式的语法格式为：

Object.style.property=new style;

注意：Object 是通过 document.getElementById("id") 获取的元素对象。

<h2 id="con">I love JavaScript</h2>

<script type="text/javascript">
  var mychar= document.getElementById("con");
  mychar.style.color="red";
  mychar.style.background="#ccc";
  mychar.style.width="300px";
</script>

利用 display 属性可以控制元素的显示和隐藏。

display 属性的语法格式为：

Object.style.display = value

value 的可能取值如下：

none 表示此元素不会被显示（即隐藏）。

block 表示此元素将显示为块级元素（即显示）。

mychar.style.display = "block"

className 属性用于设置或返回元素的 class 属性。

object.className = classname

其作用包括：1. 获取元素的 class 属性；2. 为网页内的某个元素指定 CSS 样式以更改外观。

p2.className = "two";

以上关于 JavaScript 基础的内容供参考，希望能帮助初学者入门。