javascript代码实例教程-JavaScript概述

发布时间:2019-02-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript概述脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

前言

1.什么是javascript?
在浏览器端执行一种编程语言。javascript和java没有任何关系 ,只是语法和java相同。也有一些差异。
2.javascript作用?
a.前端验证
b.操作htML
c.ajax核心技之一
d.获取浏览器的一些相关信息

3.什么是ajax?

在浏览器中运行的js脚本,通过http请求异步地访问服务器组件,服务器组件返回XMl文件或者json格式的数据,js接收后通过解析xml或json来局部刷新页面,提高用户体验。

正文

JavaScript
脚本语言:为了缩短传统编程语言从编写-编译-运行这个过程而开发的一种简单类型语言。
与java的区别?
1.js由NetScaPE开发,java由SUN公司开发
2.js是一种弱类型的语言,语法要求很松散;java是一种强类型的语言,语法要求很严格。
3.js功能比较简单,java语言功能很强大,能执行连接数据库等复杂操作。
js语法特点:
1.全面支持Unicode编码
2.大小写敏感
3.语法不严格

基本语法


变量


1. VAR 变量名
2. js由浏览器解析执行,存在浏览器差异
3. 注释:// 单行注释 /* 多行注释 */

4. js中可以定义重名变量,如果后面定义的变量没有初始化则会按照前面定义的输出

数据基本类型:


1. number 数字类型
2. string 字符串类型
3. boolean 布尔类型 非0非null为true


特殊类型


1. undefined 变量没初始化直接使用
2. null 只有显示声明null才能使用
3. NaN "test"/123


对象类型


Function Object Array Date Math



运算


算数运算符


+-*%/ i++ i--
//算数运算符
var a = 4;
var b = "3";

//alert(a+b); 43
//alert(a+parseint(b)); 7
//alert(a-b); 1

比较运算


> < == != ===

== 比较值是否相等不会对数据类型进行比较
=== 比较值和数据类型,同时相等才为true


逻辑运算


&& || ! &amp; |

赋值运算


=


三目运算


类似java


表达式


var a = 4;
分号作为语句结束,可以不写默认一行为一个语句结束


流程控制语句


if(1){
alert(a);
}

java中 :for(int i;;){}
js中 :for(var i;;){}

java中的foreach for(Object o : objects){}
js中的foreach for(var o in objects){}


js是一种面向对象的语言


对象类型


1.Function 类型


1.1 function 函数名称(参数列表){

函数体
}
1.2 var fun = new Function("a","b"," return a+b;");

1.3 var fun = function (a,b){
return a+b;
}
注意:Function 类型没有重载,并且 fun 和fun(1,2)结果完全不同;

2.Object类型


1.1

1.2 @R_304_1485@方式创建对象

1.3 js方式创建一个对象



3 .Array数组类型

1.1 Java中的数组
1.固定长度,存储同一类型数据,连续内存空间
js中的数组
1.可变长,存储数据不固定,存储空间不一定连续
var arr = new Array();
arr[0] = 123;
arr[1] = "hello";
arr[5] = "aaaa";

1.2通过JSON的方式创建
var arr2 = [1,2,3,"hello",,,"aa",];
alert(arr2.length);// IE中长度为8,火狐7



数组的API


1. 属性 length 获得数组长度
2. 方法
1) push(参数); 将参数追加到数组的尾部,同时数组长度增加
2) pop(); 删除数组的最后一个元素并且将该元素返回
3) shift(); 删除数组中第一个元素,并返回该元素
4) unshift(参数); 往数组的最前端添加一个元素,同时数组长度增加
5) arr.sort(); 数组arr执行sort之后会进行简单排序,默认只能排序0-9 如果排序数字复杂,则必须对sort方法进行修改: arr.sort(function(a,b){return a-b;});
6) arr.reverse(); 使当前数组逆序输出
6) concat(); 将两个数组进行拼接操作,返回的是拼接好的数组
var arr1 = arr.concat(arr2);
7) join(参数) 通过连接符将数组元素连接起来,返回连接字符串
arr2.join("-");


4.String对象类型


var str = new String("abc");

1. 属性 length 获得字符串长度
2. 方法

1) charAt(下标)
2) indexOf()
3) substring()
4) concat()
5) splIT()

5.Date 对象类型


var d = new Date();
1) 获得当前年份 d.getYear()
2) 获得年份的全称 d.getFullYear()
3) 获得月份 d.getMonth()
4) 获得日期 d.getDate()
5) 获得星期 d.getDay()
6) 获得时间 d.getHours()
7) 获得分钟 d.getMinutes()
8) 获得秒钟 d.getSeconds()

6.Math 对象



1) ceil() 向上取整
2) floor() 向下取整
3) round() 四舍五入



JS中的事件


事件的 三要素: 事件/ 事件/ 监听器

事件监听属性


1. onmouseover 鼠标移入事件
2. onmouseout 鼠标移出事件
3. onclick 鼠标单击事件
4. ondblClick 鼠标双击事件
注: 函数 setTimeout("",);
5. onmouSEMove 鼠标的移动事件
6. onblur 鼠标失去焦点事件
7. onfocus 鼠标获得焦点事件
8. onmousedown 鼠标按下事件
9. onmouseup 鼠标弹起事件

10. onload 页面载入完成事件
11. onsubmit 表单提交事件 函数返回true表单提交
onsubmit=" return Function"

12. onchange 失去焦点并且值发生改变事件

13. onkeyup 键盘弹起事件
14. onkeydown 键盘按下事件

15 onscroll 滚动条滚动
16. onresize窗口变大变小
17. onmove窗口移动

18.onmousemove事件代码示例

在function中怎么获得事件


1. 传递event对象到function中


2.this表示当前标签对象

DOM(Document Object Model,文档对象模型)


由W3C定义的一组规范一组API 用来操作HTML对象

1.直接获得标签对象


1) document.getElementById("id属性值") 通过ID来获得对应的标签对象
2) document.getelementsbytagname("标签名称") 根据标签名称来获得一组标签,返回数组对象
3) document.getElementsByName("name属性值"); 根据name属性值来获得一组标签,返回数组对象

4)缩放图片代码示例


2.间接获得标签对象


1) 父标签.childNodes 获得当前标签的所有孩子节点,返回数组对象
2) 父标签.FirstChild 获得第一个孩子节点
3) 父标签.lastChild 获得最后一个孩子节点
4) 标签.nextSibling 获得下一个兄弟节点
5) 标签.PReviousSibling 获得前一个兄弟节点


3.创建节点对象


1) document.createElement("标签名称") 创建一个对应的标签对象
2) document.createTextNode("文本值"); 创建一个文本节点对象

3)动态表格代码示例


4.操作标签


1) 父标签.appendChild(子节点); 将一个标签追加到父标签当中
2) 父标签.removeChild(子节点); 删除子节点
3) 父标签.insertBefore(newElement,targetElement); 在目标元素之前插入一个新元素
4) 父标签.replaceChild(newElement,oldElement); 用新元素替换掉旧的元素


5.其他操作


1)标签.style.样式属性 = 属性值; h1.style.backgroundColor = "red";
2) 标签.innerHTML 获得或者设置元素的标签体
3) 文本节点.nodeValue 获得文本节点值
4) 标签.parentNode 获得父节点

5)在页面显示时间代码示例

select下拉列表的特性


1. select对象默认存在一个用来存放option对象的数组
2. select对象.options 获得option数组对象
3. select对象.selectedIndex 获得当前访问的option对象在数组中的位置

4.select对象.options.length=0;清空i数组。
5.自动填充下拉框代码示例



总结

javascript语法


a.基本知识
1. 大小写敏感、标识符命名前面$ _ 字母 开头,后面接上 字母 数字 _ $

2.语句后面接上;
b.变量
1.javascript 是弱类型数据语言,变量在定义的时候不需要接上 类型。
2. javascript中使用var 定义变量。
c.数据类型
1, 数字类型 number 包括整数和浮点数
2.字符串 string "张三" '张三'
3.布尔类型 true/false 非0 /0 非null/null
4.特殊类型:
undefined 为定义 ,两种情况:
1).变量定义之后没有赋值
2).变量没有定义
null 为空
NaN 不是一个数字 ,非数字。
java 123/"1" 这个不行
javascript 123/"1" 可以
比如:123/"abc" NaN

d.类型转换
e.运算符和表达式
f.流程控制语句和循环语句
g.函数
1. 使用function来定义函数
2. function 函数名(参数列表){方法体}
h.Object 对象
i.数组
javascript数组特点:
1.数组长度可以改变 。
2.数组中可以存放任意类型的数据。
数组的创建
var arr=new Array();
var arr=[1,2,3,4];


parseInt(i);字符串----->number 整数
parseFloat(i);字符串----->number 小数
toString();number----->字符串

j.String 字符串
创建方式:
var str="hello";
var str=new String("hello");
k.对象
Date Math

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript概述全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript概述所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。