JavaScript学习笔记--基础知识

1. javaScript能做什么?

(1)写入HTML输出

document.write("<h1>This is a heading</h1>");

注意:只能在HTML输出中使用document.write。如果在文档加载后使用该方法,会覆盖整个文档。

(2)对事件作出反应

<button type="button" onclick="alert(‘welcome!‘)">点击这里</button>

(3)改变HTML内容

x=document.getElementById("demo");

x.innerHTML="Hello JavaScript";

(4)改变HTML元素的属性(HTML图像)

function changeImage()

{

element=document.getElementById(‘myimage‘)

if (element.src.match("bulbon"))

{

element.src="/i/eg_bulboff.gif";

}

else

{

element.src="/i/eg_bulbon.gif";

}

}

(5)改变HTML样式

x=document.getElementById("demo");

x.style.color="#ff0000"

(6)验证输入

2. javaScript脚本加载的位置

(1)HTML页面的<body>和<head>部分中

注意,HTML中的脚本必须位于<script>与</script>之间

(2)将脚本保存到外部文件中

如需使用外部文件,请在<script>标签的“src”属性中设置该.js文件

外部脚本不能包含<script>标签。

3. javaScript语句的注意点

(1)对大小写敏感

(2)自动忽略多余的空格

(3)在文本字符串中使用反斜杠对代码行进行换行

(4)单行注释(//)多行注释(/* */)

4. javaScript变量的注意点

(1)对大小写敏感

(2)必须以字母开头,但是也可以以$和_开头

(3)通过“var”来申明变量

5. javaScript数据类型

(1)javaScript拥有动态类型

(2)字符串:单引号或者双引号

(3)数字:带小数点和不带小数点,科学计数法

(4)布尔类型:ture false

(5)数组:var cars=new Array();

(6)对象:由花括号分隔,。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

对象属性有两种寻址方式:

name=person.lastname;

name=person["lastname"];

6. javaScript对象

属性是与对象相关的值。

方法是能够在对象上执行的动作。

(1)创建 javaScript对象

JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。

你也可以创建自己的对象。

person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";

(2)访问对象的属性

objectNamepropertyName

var message="Hello World!"; var x=message.length;

(3)访问对象的方法

objectNamemethodNamevar message="Hello world!"; var x=message.toUpperCase();

7. javaScript函数

(1)函数语法
function functionname()
{
这里是要执行的代码
}
(2)带参数的函数
function myFunction(var1,var2)
{
这里是要执行的代码
}
(3)带有返回值的函数
function myFunction()
{
var x=5;
return x;
}
若仅仅希望退出函数时 ,也可使用 return 语句
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}

8. javaScript运算符

(1)算术运算符:+ - * / % ++ --

(2)赋值运算符:= += -= *= /= %=

(3)比较运算符:

(4)逻辑运算符

(5)条件运算符:

9. javaScript判断语句

  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

for/in - 循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
运行结果:JohnDoe25

10. javaScript错误-Throw、Try和Catch

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

(1)JavaScript 测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
(2)Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是:创建或抛出异常(exception)。
如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>

11. javaScript表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有:
● 用户是否已填写表单中的必填项目?
● 用户输入的邮件地址是否合法?
● 用户是否已输入合法的日期?
● 用户是否在数据域 (numeric field) 中输入了文本?

(1)必填(或必选)项目
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>

(2)E-mail验证
意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>

说明:
with(field){};设定作用域
focus() 方法用于给予该元素焦点。这样用户不必点击它,就能编辑显示的文本了。

【学习网站】W3school

时间: 2024-10-10 09:39:42

JavaScript学习笔记--基础知识的相关文章

hadoop学习笔记——基础知识及安装

1.核心 HDFS  分布式文件系统    主从结构,一个namenoe和多个datanode, 分别对应独立的物理机器 1) NameNode是主服务器,管理文件系统的命名空间和客户端对文件的访问操作.NameNode执行文件系统的命名空间操作,比如打开关闭重命名文件或者目录等,它也负责数据块到具体DataNode的映射 2)集群中的DataNode管理存储的数据.负责处理文件系统客户端的文件读写请求,并在NameNode的统一调度下进行数据块的创建删除和复制工作. 3)NameNode是所有

SQLServer学习笔记&lt;&gt;.基础知识,一些基本命令,单表查询(null top用法,with ties附加属性,over开窗函数),排名函数

Sqlserver基础知识 (1)创建数据库 创建数据库有两种方式,手动创建和编写sql脚本创建,在这里我采用脚本的方式创建一个名称为TSQLFundamentals2008的数据库.脚本如下:   同时往数据库表插入一些数据,用户后续对数据库的sql的练习.在这里有需要的可以下载相应的脚本进行数据库的初始化.我放到百度云上面,请戳 我:http://yun.baidu.com/share/link?shareid=3635107613&uk=2971209779,提供了<Sqlserver

设计模式学习笔记-基础知识篇

1. 设计模式的重要性 1.1 设计模式解决的是在软件过程中如何来实现具体的软件功能.实现同一个功能的方法有很多,哪个设计容易扩展,容易复用,松耦合,可维护?设计模式指导我们找到最优方案. 1.2 设计中往往会存在设计缺陷,这些缺陷包括: 僵化性:难以对软件进行改动,即使在功能上来看是很小的改动 脆弱性:在进行很小的改动时,可能导致很多地方出现问题 顽固性:要把系统中某些通用的功能分离出来的努力和风险非常巨大 粘滞性:当面临改动时,改动的方案有很多,一些会保持设计,一些会破坏设计,当采用保持设计

Validform 学习笔记---基础知识整理

面对表单的验证,自己写大量的js毕竟不是一个明智的做法.不仅仅是代码很长而且不便于梳理.Validform就是一款开源的第三方验证js的控件,通过添加相应的js以及css能够有效的验证表单,维护起来也很方便.这篇文章就是针对我对validform的理解真理的一篇validform的使用文档.Validform官网 1.js和css的引用: 这里引用官网下载中的一下css: (文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的

php学习笔记——基础知识(1)

1.PHP 脚本在服务器上执行,然后向浏览器发送回纯 HTML 结果. 2.基础 PHP 语法 1)PHP 脚本可放置于文档中的任何位置. 2)PHP 脚本以 <?php 开头,以 ?> 结尾. 3)PHP 文件的默认文件扩展名是 ".php". 4)PHP 文件通常包含 HTML 标签以及一些 PHP 脚本代码. 5)PHP 支持三种注释: // 这是单行注释 # 这也是单行注释 /* 这是多行注释块 它横跨了 多行 */ 6)PHP 语句以分号结尾(;).PHP 代码块

DNS与BIND学习笔记-基础知识及配置详解

转自 http://blog.chinaunix.net/uid-14825809-id-333591.html 标签:DNS 多线 智能 服务器 bind 一直想系统的学习和了解DNS的原理,包括看相关的rfc文件,一看和dns相关的rfc文件,妈呀,居然有86个之多.能看多少是多少吧.先把DNS的原理研究透彻了.在看rfc文件我想会事半功倍的:) 1. ICANN是干什么的?和他的一些相关资讯? ICANN全称是叫:Internet Corporation for Assigned Name

JavaScript学习笔记——基本知识

1>JavaScript的放置和注释 1.输出工具 A.alert(); B.document.write(); C.prompt("",""); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

Redux学习笔记-基础知识

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #404040 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "

正则表达式学习笔记——基础知识

一.正则表达式-简介 1. 概念 正则表达式,描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 2. 特点 (1) 灵活性.逻辑性和功能性非常的强: (2)可以迅速地用极简单的方式达到字符串的复杂控制. (3)对于刚接触的人来说,比较晦涩难懂. 由于正则表达式主要应用对象是文本,因此它在各种文本编辑器场合都有应用,小到著名编辑器EditPlus,大到Microsoft Word.Visual Studio等大型编辑器,都可