本文详细讲解了JavaScript的入门概念、事件处理机制、常用对象（如Window和Date）以及DOM技术的运用。通过实例展示了如何在HTML中实现交互功能和动态内容管理。
大家好，小编来为大家解答以下问题，javascript语言入门教程，js语言入门教程下载，现在让我们一起来看看吧！
目录
一、JavaScript入门
-
什么是JavaScript
一种不需要编译，直接嵌入HTTP页面中的，把静态页面转变成支持用户交互并相应应用事件的动态页面。经常用于进行数据验证，控制浏览器，生成时钟，日历和时间戳文档等
-
特点
- 解释性
- 基于对象
- 事件驱动 可以直接对客户端的输入做出响应，无需经过服务器
- 安全性
- 跨平台
-
语法
- JavaScript区分大小写
- 每行结尾的分号可有可无
- 变量示弱变量 意味着在定义变量时，只是用var运算符，就可以将变量初始化为任意值Python中的所有运算符号。
var username="mrsoft"; var age=20;
- 使用大括号标记代码块
- 注释
-
关键字
类比 java 的关键字
-
数据类型
-
数值型
-
整型
-
浮点型
-
-
字符型
-
单引号字符型变量
-
双引号字符型变量
与java不同，JavaScript没有char类型，要表示单个字符，必须使用长度为1的字符串
-
-
布尔型
-
转义字符
转义字符 描述 转义字符 描述 \b 退格 \n 换行 \f 换页 \t Tab符 \r 回车符 \ ' 单引号 \ " 双引号 \\ 反斜杠 \nn 十六进制代码nn表示的字符 \unnnn 十六进制代码nnnn表示的Unicode字符 \0nnn 八进制代码nnn表示的字符 -
空值
-
未定义值
如，NaN
-
-
变量定义以及使用
-
变量声明
使用var关键字声明变量
-
变量作用域
-
局部变量
-
全局变量
-
-
-
运算符的应用
类比java即可
-
流程控制语句
if，switch，for，while，do while，break，continue
-
函数
定义格式：
function functionName(参数1,参数2){ 函数体 }
二、事件处理
以HTML中事件处理为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>java</title>
< language="java">
alert("您好！\r欢迎来到网站！");
function check_name(){
var str = form1.realName.value;
if (str == ""){
alert("请输入真实姓名!");form1.realName.focus();return;
}else{
var objExp = /[\u4E00-\u9FA5]{2,}/; //创建RegExp对象，用于判断输入的是否为汉字
if(objExp.test(str) == true){
alert("正确");
}
else{
alert("错误");
}
}
}
</>
</head>
<body>
<form name="form1" method="post" action="">
请输入真实姓名：<input name="realName" type="text" id="realName" size="40">
<br><br>
<input name="Button" type="button" class="btn_grey" value="检测" onclick="check_name()">
</form>
</body>
</html>
三、常用对象
-
Window对象
浏览器窗口对象，是所有对象的顶级对象，直接使用“对象名.成员”的格式访问其属性或方法。
Window 对象：Window 对象
-
String对象
-
Date对象
更多JS对象，见：JavaScript 教程
四、DOM技术
DOM技术完整内容见：HTML DOM 教程 | 菜鸟教程
演示案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发表评论</title>
<link rel="stylesheet" href="style.css">
< language="JavaScript">
//发表内容
function addElement() {
var person = document.createTextNode(form1.person.value);//创建代表评论人的TextNode节点
var content = document.createTextNode(form1.content.value);//创建代表评论内容的TextNode节点
//创建td类型的Element节点
var td_person = document.createElement("td");
var td_content = document.createElement("td");
var tr = document.createElement("tr"); //创建一个tr类型的Element节点
var tbody = document.createElement("tbody"); //创建一个tbody类型的Element节点
//将TextNode节点加入td类型的节点中
td_person.appendChild(person);//添加评论人
td_content.appendChild(content);//添加评论内容
//将td类型的节点添加到tr节点中
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr); //将tr节点加入tbody中
var tComment = document.getElementById("comment"); //获取table对象
tComment.appendChild(tbody); //将节点tbody加入节点尾部
form1.person.value=""; //清空“评论人”文本框
form1.content.value=""; //清空“评论内容”文本框
}
//删除第一条评论
function deleteFirstE(){
var tComment = document.getElementById("comment"); //获取table对象
if(tComment.rows.length>1){
tComment.deleteRow(1); //删除表格的第二行，即第一行评论
}
}
//删除第二条评论
function deleteLastE(){
var tComment = document.getElementById("comment"); //获取table对象
if(tComment.rows.length>1){
tComment.deleteRow(tComment.rows.length-1); //删除表格的最后一行，即最后一条评论
}
}
</>
</head>
<body>
<table width="600" height="70" border="0" align="center" cellpadding="0" cellspacing="1" bordercolorlight="#FF9933" bordercolordark="#FFFFFF" bgcolor="#666666">
<tr>
<td width="14%" align="center" bgcolor="#FFFFFF"><img src="head.jpg" width="70" height="74"></td>
<td width="86%" align="left" bgcolor="#FFFFFF">人生若真如一场大梦，这个梦倒也很有趣的。在这个大梦里，一定还有长长短短，深深浅浅，
肥肥瘦瘦、甜甜苦苦，无数的小梦。有些已经随着日影飞去；有些还远着哩……</td>
</tr>
</table>
<br>
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"
bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
<tr>
<td width="18%" height="27" align="center" bgcolor="#d2691e">评论人</td>
<td width="82%" align="center" bgcolor="#d2691e">评论内容</td>
</tr>
</table>
<form name="form1" method="post" action="">
<table width="600" height="122" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="119" height="14"> </td>
<td width="481"> </td>
</tr>
<tr>
<td height="27" align="center">评论人：</td>
<td><input name="person" type="text" id="perosn" size="40"></td>
</tr>
<tr>
<td align="center">评论内容：</td>
<td><textarea name="content" cols="60" rows="6" id="content"></textarea></td>
</tr>
<tr>
<td height="40"> </td>
<td>
<input name="Button" type="button" class="btn_grey" value="发表" onclick="addElement()">
<input name="Reset" type="reset" class="btn_grey" value="重置">
<input name="Button" type="button" class="btn_grey" value="删除第一条评论" onclick="deleteFirstE">
<input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onclick="deleteLastE">
</td>
</tr>
</table>
</form>
</body>
</html>相应的style.css文件：
<!--
body{
font-size: 9pt;
margin-left:0px;
SCROLLBAR-FACE-COLOR: #E5BB93;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #fcfcfc; COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #ececec;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #ececec;
SCROLLBAR-DARKSHADOW-COLOR: #999966;
BACKGROUND-COLOR: #fcfcfc;
font-family: 华文隶书;
}
a:hover {
font-size: 9pt; color: #FF6600;
}
a {
font-size: 9pt; text-decoration: none; color: #676767;
noline:expression(this.onfocus=this.blur);
}
td{
font-size: 12pt; color: #000000;
padding:5px;
}
.btn_grey {
font-family: "黑体"; font-size: 9pt;color: #333333;
background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
input{
font-family: 华文行楷;
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
hr{
border-style:solid;
height:1px;
color:#CCCCCC;
}
-->
<meta http-equiv="Content-Type" content="text/html; charset=GBK">最终效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
