首页 > 代码库 > JavaScript学习笔记--基础知识

JavaScript学习笔记--基础知识

2024-08-17 03:08:30   218人阅读

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="http://www.mamicode.com/i/eg_bulboff.gif";
}
else
{
element.src="http://www.mamicode.com/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=http://www.mamicode.com/=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="http://www.mamicode.com/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="http://www.mamicode.com/Submit">
</form>
</body>
</html>

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

【学习网站】W3school

JavaScript学习笔记--基础知识


联系
我们