《javascript从入门到精通》第一篇,基础知识

时间:2021-10-07 04:20:25

前言

我并不是专业做web的,这部分博客是记录我的学习过程。所以这几篇文章比较适合新手入门与达到普通项目的水平。我先把www.w3cshcool.com上边的html,css,div,js部分看完之后,开始看《javascript从入门到精通》,这几篇文章用来记录相对常用的部分,后续会继续添加与修改,感谢您的阅读。

第一章 初识javascript

这一章没鸟用,过。

第二章 javascript基础

这一章,讲一些js的数据类型;运算符;表达式;都是些基础的东西,没鸟用,过。

第三章 流程控制

这一章,讲一些逻辑判断,循环,选择,if,switch,while,continue,break等,都是些基础的东西,没鸟用,过。

第四章 函数

这一章讲函数的调用,嵌套,递归,这部分有点用的。相关代码记录下。

4.2函数调用

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>函数的简单应用</title>
<script type= "text/javascript">
function print(statement1,statement2,statement3)
{
alert(statement1+statement2+statement3);
}
</script>
</head>
<body>
<script type="text/javascript">
print("今天","中午","不吃饭!");
</script>
</body>
</html>

运行结果:

《javascript从入门到精通》第一篇,基础知识《javascript从入门到精通》第一篇,基础知识

4.2.2事件响应中调用函数

当用户点击某个按钮或选中某个复选框时触发事件。

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>事件响应中调用函数</title>
<script type= "text/javascript">
function test()
{
alert("test");
}

</script>
</head>
<body>
<form action="" method="post" name="form1">
<input type="button" value="提交" onclick="test();">
</form>
</body>
</html>
《javascript从入门到精通》第一篇,基础知识

4.2.3 通过链接调用函数

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title> 通过链接调用函数</title>
<script type= "text/javascript">
function test()
{
alert("我喜欢javascript");
}
</script>
</head>
<body>
<a href="javascript:test();">test</a>
</body>
</html>
《javascript从入门到精通》第一篇,基础知识

4.5嵌套函数

在函数内部再定义一个函数,可以使内部函数使用外部函数的参数与函数的全局变量,,,

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>嵌套函数的应用</title>
<script type= "text/javascript">
var outter=10;//定义全局变量
function add(number1,number2)//定义外部函数
{
function inneradd(){//定义内部函数
alert("参数的和为:"+(number1+number2+outter));
}
return inneradd();//调用内部函数
}
</script>
</head>
<body>
<script>
add(10,10); //调用外部函数
</script>
</body>
</html>
《javascript从入门到精通》第一篇,基础知识

4.6递归函数

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>递归函数</title>
<script type= "text/javascript">
function f(num){
if(num<=1)
return 1;
else
return f(num-1)*num;
}
</script>
</head>
<body>
<script>
alert("10!的结果是:"+ f(10));
</script>
</body>
</html>

《javascript从入门到精通》第一篇,基础知识


第五章 javascript对象与函数

Object对象;String对象;Date对象;Event对象;FileSystemObject对象;Drive对象;File对象;数组,,,,,


第六章 字符串与数值处理对象

6.1字符串对象

6.1.1 match方法

str.match():匹配字符串

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>match方法</title>
<script type= "text/javascript">

</script>
</head>
<body>
<script>
var str="Hello world!"
document.write(str.match("world") + "<br/>")
document.write(str.match("World") + "<br/>")
document.write(str.match("worlld") + "<br/>")
document.write(str.match("world!") + "<br/>")
</script>
</body>
</html>
《javascript从入门到精通》第一篇,基础知识
6.1.2 search方法

6.1.3 replace方法

在字符串中找到某一特定字符,用其他字符来代替。

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>replace方法</title>
<script type= "text/javascript">
</script>
</head>
<body>
<script>
var str="Hello world!"
document.write(str.replace("world","ggh"));
</script>
</body>
</html>
《javascript从入门到精通》第一篇,基础知识


第七章 正则表达式

又臭又长,略了。


第八章 程序调试与错误处理

8.2 处理异常

1,使用onerror事件,可以在window对象或者图像对象上触发;2,try...catch...finally模型

8.2.2 触发onerror事件处理异常

页面出现异常时,将触发onerror事件,该事件在window对象上触发。

语法:<script language="javascript">

window.onerror=function(){

alert("您调用的函数不存在");

return true;

}

</script>

window.onerror:触发onerror事件

如果在onerror事件处理函数中没有使用return true 语句,在弹出错误提示对话框后,浏览器的错误报告也会显示出来,为了隐藏此错误报告,函数需要返回true。

图像对象触发onerror事件:

语法:<script language="javascript">

document.images[0].onerror=function(){

alert("您调用的图像不存在");

return ture;

}

</script>

document.images[0]:页面中第一个图像

可提供三种信息确定异常的具体情况:

ms:异常信息

Url:获取发生异常的文件的绝对路径

Line:发生异常的文件的行号

示例代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>onerror事件</title>
<script language="javascript">
window.onerror=function(ms,Url,Line){
alert("您调用的函数不存在\n"+ms+"\n"+Url+"\n"+Line+"\n");
return true;
}
function ImgLoad(){
document.images[0].onerror=function(){
alert("您调用的图像并不存在\n");
return true;
};
document.images[0].src="test.gif";
}
</script>

</head>
<body onload="ImgLoad()">
<script language="javascript">
onHave(); //调用并不存在的onHave函数
</script>
<img/>
</body>
</html>


8.2.3 使用try...catch..finally处理异常

语法:<script language="javascript">

try{

somestatements;

}

catch(exception e){

somestatements;

}

finally{

somestatements;

}

</script>

try:捕获异常关键字

catch:捕获异常关键字

finally:最终一定会被处理的区块的关键字

javascript与java不同,try catch finally只能有一个catch语句,因为javascript语言中无法指定出现异常的类型。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>onerror事件</title>
<script language="javascript">
try{
document.forms.input.length;
}
catch(exception)
{
alert("运行时有异常发生");
}
finally
{
alert("结束try catch finally语句")
}
</script>

</head>
<body onload="ImgLoad()">
<script language="javascript">
onHave(); //调用并不存在的onHave函数
</script>
<img/>
</body>
</html>
《javascript从入门到精通》第一篇,基础知识 《javascript从入门到精通》第一篇,基础知识
 

8.3 javascript语言调试技巧

1,使用alert(“xxx”)语句进行调试

2,使用document.write("xxxx")进行调试

3,使用throw抛出异常


下边是第二篇  javascript核心技术。


如果您觉得有用,欢迎打赏,仅接受一元以下金额,谢谢支持,我准备用来买路虎!

《javascript从入门到精通》第一篇,基础知识《javascript从入门到精通》第一篇,基础知识