Javascript基础入门
来源：互联网 发布：数据治理体系框架 编辑：程序博客网 时间：2024/06/06 08:27
这一个部分的内容基本上就是对于js的一些基础知识，做出了一个相应的汇总和说明，有的时候，基础的东西都是比较类似的，所以要学会如何很好的去区分它们。作为基础篇，是一个很好的入门，例子也都是很简单基础的。
1.关于js
由来
能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。
Js、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 css
简介
JS即Javascript，Javascript是一种由Netscape的LiveScript发展而来的脚本语言(描述语言)，主要目的是为了解决服务器终端语言，比如Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
优点
js使网页增加互动性。
js使有规律地重复的HTML文段简化，减少下载时间
js能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。
2.js的基础语法
简单hello js
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript</title><script type="text/javascript"> alert("hello,JavaScript!"); document.write("hello,JavaScript!");</script></head><body></body></html>js的引入方式：内部和外部
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript引入方式</title><!-- 1.首先执行 --><script type="text/javascript">alert("head");</script></head><body><!-- 2.执行从外部引入的js --><!-- <script type="text/javascript" src="myJs.js" charset="gbk"></script> --><script type="text/javascript" src="myJs.js"></script><!-- 3.执行body的js --><script type="text/javascript">alert("body");</script></body></html>外部的myJs.js可以直接写js
alert("外部引入的");js的基本数据类型：
数值类型、字符串类型、布尔类型、变量置空、表示变量不含有值
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript基本数据类型</title></head><body><script type="text/javascript"> var a=1; document.write("数值类型a="+a+"<br/>"); var b=1.2; document.write("数值类型b="+b+"<br/>"); var c='我是人'; document.write("字符串类型c="+c+"<br/>"); var d=false; document.write("布尔类型d="+d+"<br/>"); var e; // 表示变量不含有值 document.write("e="+e+"<br/>"); var f="你好"; document.write("f="+f+"<br/>"); f=null; // 变量置空 document.write("f="+f+"<br/>");</script></body></html>ps:js中的运算符、选择和循环语句都是和java是一样的，不再赘述。
3.js函数
这一点其实也是和之前的语法也是差不多的
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript函数的使用</title></head><body><script type="text/javascript"><!-- 函数的定义 --> function fun1(){ alert("我的第一个方法"); } //有参 function fun2(param1){ alert(param1); } function fun3(param1,param2){ alert(param1+" "+param2); } //有返回值 function fun4(param1,param2){ return param1+" "+param2; } fun1(); //函数的调用 // fun2("hello"); // fun3("hello","function"); var result=fun4("hello","function"); alert(result);</script></body></html>4.js操作dom
既然是对于dom节点的操作，那么什么是dom呢？
DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。
其实这里可以理解为对于html或者是xml文档的表示和处理的方法。
js对于dom节点的操作可以大致分为以下几种;
js处理dom事件、js操作dom节点、js修改dom节点的css样式
下面的5，6,7节将会对这3种操作做出简单的介绍。
5.js处理dom操作
一般就是对于用户的点击等这样的事件做出响应
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript处理DOM事件</title><script type="text/javascript"> function func(){ alert("我被点击了"); }</script></head><body><input type="button" value="点我试试" onclick="func()"/> <!-- 用户点击按钮的时候，调用函数func() --></body></html>6.js处理dom节点
这里就是说对于dom节点的增加、删除和修改。
JavaScript修改DOM节点
JavaScript增加DOM节点
JavaScript删除DOM节点
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript修改DOM节点</title><script type="text/javascript">function modifyDOM(){ //如果是容器的话，需要用.innerHTML去设置 document.getElementById("info").innerHTML="用户名："; //如果不是容器的话，需要用.value去设置 document.getElementById("userName").value="helen"; }function addDOM(){ var para=document.createElement("p"); //1.创建一个标记 var node=document.createTextNode("...前..."); //2.创建一个文本 var para2=document.createElement("p"); var node2=document.createTextNode("...后..."); para.appendChild(node); //3.把文本放在相应的标记中 para2.appendChild(node2); var parent=document.getElementById("parent");//4.找到要插入的父节点和子节点 var son1=document.getElementById("son1");//4.找到要插入的父节点和子节点 parent.insertBefore(para, son1);//5.将新建的节点插入（如果在已经存在的节点前面插入的话） parent.appendChild(para2);//默认直接将节点插入到尾部}function removeDOM(){ var parent=document.getElementById("parent");//获得节点 var son1=document.getElementById("son1"); parent.removeChild(son1);//删}</script></head><body><div id="parent"> <div id="son1"> <font id="info">信息：</font> <input type="text" id="userName" name="userName"/> </div></div><br><input type="button" value="修改DOM节点" onclick="modifyDOM()"/><input type="button" value="添加DOM节点" onclick="addDOM()"/><input type="button" value="删除DOM节点" onclick="removeDOM()"/></body></html>7.js修改dom节点的css样式
修改相应的属性和前面的类似，都是需要先获得他的相应的属性，然后进行重新设置
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript修改DOM节点CSS样式</title><script type="text/javascript"> function modifyDOMCSS(){ //1.需要得到修改的哪一个getElementById //2.得到p中的style属性 //3.得到style属性中的color document.getElementById("change").style.color="red"; }</script></head><body><p id="change">我是一段文字</p><input type="button" value="修改DOM节点样式" onclick="modifyDOMCSS()"/></body></html>8.js属性
JS是面向对象与原型，而java是面向对象的
这里介绍两种，分别是：
1.js的属性和方法的增加和删除
2.js的构造方法
1.js的属性和方法的增加和删除
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript对象</title></head><body><script type="text/javascript"> //定义了一个函数 function speak(something){ alert(something); } var p=new Object(); //1.js对象的实例化 //添加 p.name="helen"; // 2.动态的添加属性 p.func=speak; // 2.动态的添加方法 alert(p.name); p.func("Hello,我是调用方法");//调用方法 //删除（方法1） delete p.name; //3.删除属性 alert(p.name); //此时是undefined delete p.func; //3.删除方法 p.func("Hello,我是调用方法");//此时就会报错 //删除（方法2） p.name=undefined; p.func=undefined; alert(p.name); p.func("Hello,我是调用方法");</script></body></html>2.js的构造方法
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript对象</title></head><body><script type="text/javascript">//构造函数function person(name,age){ this.name2=name; this.age2=age; //在构造函数内部定义了一个新的方法 function speak(something){ alert(something); } this.func=speak;}var p1=new person("helen",18);alert(p1.name2);p1.func("构造函数内部定义新的方法 被调用了");</script></body></html>9.js字符串对象
js中对于字符串的方法和java差不多的
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript字符串对象</title></head><body><script type="text/javascript"> var s1="实例化字符串方式一"; var s2=new String("实例化字符串abc方式二"); document.write(s1+"<br/>"); document.write(s2+"<br/>"); document.write(s2+" 的长度是："+s2.length+" <br/>"); document.write(s2.indexOf("abc", 0)+"<br/>"); document.write(s2.replace("abc", "js")+"<br/>");</script></body></html>10.js日期对象
一些简单的日期函数
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript日期对象</title></head><body><script type="text/javascript"> /* 1，日期对象实例化 2，getTime()方法，返回 1970 年 1 月 1 日至今的毫秒数 3，getFullYear() 从 Date 对象以四位数字返回年份。 4，getMonth() 从 Date 对象返回月份 (0 ~ 11)。 5，getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) 6，getHours() 返回 Date 对象的小时 (0 ~ 23)。 7，getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 8，getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 9，getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 */ var date=new Date(); document.write(date.getTime()+"<br/>"); document.write(date.getFullYear()+"<br/>"); document.write((date.getMonth()+1)+"<br/>"); document.write(date.getDate()+"<br/>"); var today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"; document.write(today+"<br/>"); document.write(date.getHours()+"<br/>"); document.write(date.getMinutes()+"<br/>"); document.write(date.getSeconds()+"<br/>"); today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); document.write(today+"<br/>"); var day=date.getDay(); var week; switch(day){ case 0:week="星期日";break; case 1:week="星期一";break; case 2:week="星期二";break; case 3:week="星期三";break; case 4:week="星期四";break; case 5:week="星期五";break; case 6:week="星期六";break; } document.write(week+"<br/>"); today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); document.write(today+"<br/>");</script></body></html>11.js数组
数组中的一些简单方法的使用
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript数组</title></head><body><script type="text/javascript"> /* 1，数组的声明； 2，数组的遍历； 3，数组元素排序 sort()方法； 4，数组元素组合成字符串 join()方法； 5，合并数组元素 concat()方法； 6，颠倒数组元素 reverse()方法； */ var arr=new Array(); var arr2=new Array(3); arr[0]="jack"; arr[1]="marry"; arr[2]="tom"; arr[3]="lucy"; arr[4]="june"; arr2[0]=2; arr2[1]=1; arr2[2]=5; for(var i=0;i<arr.length;i++){ document.write(arr[i]+"<br/>"); } document.write("<hr/>"); var o; //这个里面的o 其实输出的是索引，在js中索引不仅仅是数字，也可以是用户定义的字母 for(o in arr2){ document.write(o+" "+arr2[o]+"<br/>"); } document.write("<hr/>"); document.write("sort()"+arr.sort()+"<br/>"); document.write("sort()"+arr2.sort()+"<br/>"); document.write("<hr/>"); document.write("join()"+arr.join()+"<br/>");//数组中元素的连接方式，默认的还是会加（，） document.write("join()"+arr2.join(".")+"<br/>"); document.write("<hr/>"); document.write("concat()"+arr.concat(arr2)+"<br/>"); document.write("<hr/>"); document.write("reverse()"+arr.reverse()+"<br/>");</script></body></html>12.js常用函数
1)JavaScript 全局函数
2)JavaScript window 对象常用方法及事件
全局函数不属于任何一个内置对象。
JS 包含以下 7 个全局函数， 用于一些常用的功能： escape(),eval(),isNan(),isFinite(),parseFloat(),parseInt(),unescape();
Eval()方法：执行代码；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript全局函数</title></head><body> <!-- 全局函数不属于任何一个内置对象。 JS 包含以下 7 个全局函数， 用于一些常用的功能： escape(),eval(),isNan(),isFinite(),parseFloat(),parseInt(),unescape(); Eval()方法：执行代码 --> <script type="text/javascript"> var str="1+2+3";//求和 自动去求和 alert(eval(str)); </script></body></html>JavaScript window 对象常用方法及事件
Alert();弹出消息框 confirm() prompt()
<script type="text/javascript"> window.alert("window对象的alert方法");//alert是属于window 的方法，也可以省略 window.confirm("关闭？"); window.prompt("我是文本", "我是值");</script>setTimeout()；执行一次
<script type="text/javascript">function func(){ alert("5秒后我自动执行");}window.setTimeout("func()", 5000); //在指定的5秒钟内执行func函数</script>setinterval()；执行多次
这里用动态显示时间为例
<body><script type="text/javascript"> //获得日期的函数 function getDate(){ var date=new Date(); var day=date.getDay(); var week; switch(day){ case 0:week="星期日";break; case 1:week="星期一";break; case 2:week="星期二";break; case 3:week="星期三";break; case 4:week="星期四";break; case 5:week="星期五";break; case 6:week="星期六";break; } var today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); document.getElementById("showtime").innerHTML=today; } //按照要求每隔1s进行打印 window.setInterval("getDate()", 1000);</script> <div id="showtime"></div></body>open();打开窗口
其中还有一些参数可以自己研究一下
<script type="text/javascript"> window.open("http://blog.csdn.net/hlfsunshine/article/details/51778839")</script> Window.onload 发生在文档全部下载完毕的时候。
这里有两种方法
方法1：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript window对象常用方法及事件</title><script type="text/javascript">window.onload=function(){ alert("文档加载完毕了");}</script></head><body></body></html>方法2：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript window对象常用方法及事件</title><script type="text/javascript">function init(){ alert("文档加载完毕了");}</script></head><body onload="init()"></body></html>Window.onresize 发生在窗口大小发生变化的时候。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript window对象常用方法及事件</title><script type="text/javascript">window.onresize=function(){ alert("窗体大小发生了变化！");//默认是会执行两次}</script></head><body></body></html> 0 0
- JavaScript脚本入门基础
- JavaScript入门基础 (一)
- JavaScript 入门基础 (五)
- JavaScript 入门基础 (六)
- JavaScript 入门基础 (九)
- JavaScript 入门基础 (七)
- JavaScript 入门基础 (八)
- javaScript入门 ---对象基础
- javascript入门基础
- javaScript基础入门
- JavaScript基础入门
- JavaScript入门基础
- javascript入门 基础笔记
- Javascript基础入门
- javascript入门基础
- JavaScript入门基础学习
- javascript基础入门1
- JavaScript入门基础--数据类型
- UVA-11212 Editing a Book （IDA*）
- 百度地图自定义图层如何实现
- 测测
- UVa 11212 Editing a Book (编辑书稿)迭代加深
- 有一种生物叫做程序员。。。。
- Javascript基础入门
- 恭贺文化部中国文化网隆重上线
- uva11212（Editing a Book/编辑书稿）=>IDA*算法/经典的估价函数
- acm 4 1001
- 解析xml文件的几种技术与Dom4j与sax之间的对比
- 4-7 统计某类完全平方数 (20分)
- PHP基础知识系统复习
- 网络通信之 字节序转换原理与网络字节序、大端和小端模式
- js中class的点击事件没有效果
