JavaScript

来源:互联网 发布:openstack基础网络 编辑:程序博客网 时间:2024/06/06 07:48

1、javaScript的概念:是一种表述语言,也是一种基于对象(Object)和事件驱动(EventDriven)的,安全性好的脚本语言,运行在客户端,从而减轻服务器端的负担,总结如下:

  1.javaScript主要用来向HTML页面找那个添加交互行为。

  2.javaScript是一种脚本语言,语法和java类似。

  3.javaScript一般用来编写客户端脚本。

  4.javaScript是一种解释性语言,边执行边解释。

2、javaScript由核心语法ECMAScript、浏览器对象模型(BOM) 主要用于管理窗口与窗口之间的通讯,因此其核心对象是window、文档对象模型(DOM)三部分组成.

3、网页中引入javaScript三种方式:

  1.使用<Script></Script>标签内部样式

  2.使用外部js文件

  3.直接在HTML标签中的行内样式。

4.javaScript的作用

1.实现页面表单验证

2.实现页面交互特效

5.javaScript的特点

  1.被设计用来向Html页面添加交互行为

  2.是一种英特网上最流行的脚本语言

  3.一般用于编写客户端脚本

  4.是一种解释性语言

6.引入javaScript的方式

   1.使用<Script>标签直接嵌入网页

   2.使用外部js文件

Js中String对象常用的方法:

  1. toString(包前不包后),2.toLowerCase();toUpperCase();
  2. charAt(index);返回在指定位置的字符,indexOf(str,index);指定字符串中首次出现的位置;split(str);将字符串分割为字符串数组

在javaScript中条件语句Switch(){}可以接字符串;

alert(“提示信息”);

   var isOk=confirm(“确认框“);//如果确认返回true,否则返回false

   prompt();prompt(“提示信息”,“输入框默认信息”);

prompt(“请输入姓名”)

close();

   open();

   setTimeout();在指定毫秒之后调用某个函数

   setInterval();在指定周期毫秒来调用某个函数

window.open();

7.Js语法:

1.区分大小写

2.注意变量,函数等命名规范

3.每行代码以分号结束

Js中的函数:

1.系统函数 

   ParseInt();转换为整数  45.9a转换为45;a6转换返回为NaN(Not a Number)

   isNaN(判断是不是数字)

   typeof(var);判断是什么数据类型

   eval(“5+2”);计算表达式值

2.自定义函数

 Function 函数名(){javaScript代码}

 Function 函数名(参数1,参数2){javaScript代码  return 返回值(可选)}

Js中函数的调用:

  1. 事件名=“函数名(传递的参数值)“;
  2. 函数名(传递的参数值);

匿名函数:

  1. 匿名函数的声明:

Var 变量名=function(参数){  函数体  return 返回值;} ;

  1. 调用

变量名(参数)

8.程序调用

  1.添加alert();方法 2.使用fireBug();方法

9.BOM概述:(Browser Object Model,浏览器对象模型)

 1.window对象的属性

名称

说明

History

有关客户访问过的URL的信息

Location

有关当前URL的信息

Screen

有关客户端的屏幕和显示性能的信息

Weindow对象常用的方法:prompt()confirm();setTimeout();setInterval();

Window对象常用的事件:onload=”” onmouseover=””;onclick

window.parent.location

2.History对象

  方法:back() ;forward();go();

3.Location对象提供当前页面的URL

  属性:host hostname href

  方法:reload() replace();

4.Document对象

  属性:referrer属性判断是不是通过超链接访问的,不是返回null

10.javaScript中的对象,

   Date对象:

  创建date对象发方法var date=new Date(MM DD ,YYYY,hh:mm:ss);

                     var  date=new Date(); date.getDay();

    Math对象:

     Ceil();对数进行向上取整,ceil(25.5)=26;

    Floor();向下取整,floor(25.5)=25;

     Math.round(25.5);在原数的加0.5后向下取整

11.Dom概述(文档对象模型)

  由CoreDom,XMLDom,HTML Dom组成;

12.创建数组

   Js中变量的声明:

   Var 数组名称=new Array(size);

  1. 先声明再赋值 fruit[0]=””
  2. 声明同时赋值 var fruit=new Array(“apple”,”orange”);或 var fruit=new Array[“apple”,”orange”];

读取1.使用for循环读取 2.使用for---in读取

For(var x in fruit){document.write(fruit[x]+”<br/>”)}x为下标

Fruit.sort();//排序 string str=fruit.join(“-”);//添加字符串后连接成一个字符串

下拉列表Select对象:

  

13、 style 定位方面的样式

  left top  position  z-index

  鼠标滚动距离:scorllTop:纵向距离

         scorllLeft:横向距离

  鼠标滚动事假:onscorll

Jquery对象与Dom对象的相互转换

  1. jquery对象转换为DOMD对象,jquery提供两种方法将jquery对象转换为DOM对象,即[index]和get(index),

var $txtName=$(“#txtName”);//jquery对象

var txtName=$txtName[0];//Dom对象

alert(txtName.checked);//检测这个checkbox是否被选中

通过get(index)方法得到对应的Dom对象

Var $txtName=$(“#txtName”);//jquery对象

Var txtName=$txtName.get(0);//Dom对象

alert(txtName.checked);//检测这个checkbox是否被选中

  1. Dom对象转换为jQuery对象

Var txtName=document.getElementById(“txtName”);//dom对象

Var $txtName=$(txtName);//

Dom中添加class属性使用obj.className=classname;

      添加类容使用obj.innerHtml=<input />

Jquery中添加class属性使用obj.addClaa=classname;

      添加类容使用:obj.html=<input/>;

Jqurey中的五大选择器:

  1. 基本选择器 (#  .  标签)
  2. 层次选择器(后代 >子    +相邻    ~同辈)
  3. 属性选择器(P[class=name])
  4. 过滤选择器(“tr:even”)
  5. 可见性选择器(“p:hidden” “p:viside”)

Jquery中的事件:

   Obj.bind(“clike”,function(){});

obj.bind({mousever:function(){},{mouserout:function(){}}});

  obj.unbind();

obj.hover(function(){},function(){})方法集合onmouseOver和onmouseOut

obj.toggle();

$(“.tipsbox”).show();obj.hide();

$(“img”).fadeIn(1000);

$(“.txt”).slideUp(1000); obj.slideDown(1000);

Obj.toggleClass(“class”);//集成了addClass和romoveClass

$(this).val(“”);//清空文本内容

Var $newNode=$(<”<li>用jquery创建新元素节点</li>”>);

在正则表达式

  

 

JS中常用的一些小技巧:

1.使用!!操作符转换布尔值,对于变量可以使用!!varable做检测,只要变量的值为:0,null , "" , undefind或者NaN都将返回的是false反之的是true

function Account(cash) 

this.cash = cash; 
this.hasMoney = !! cash;
}

2.使用+将字符串转换为数字,只适用字符串数据,否则返回NaN

function toNumber(strNum) {
return +strNum;
}

适用于Date()返回时间戳数字:+new Date();

3.在循环很大时候数字的长度先给去出来,var legth = array.legth;

4.if('querySelector' in document) {

document.querySelector("#id");
} else {
document.getElementById("id");
}

5.获取数组中的最后一个元素

var array = [1,2,3,4,5];
array.slice(-1);

6.字符串元素的替换

var string = "john john";
string.replace(/hn/, "ana"); //"joana john"
string.replace(/hn/g, "ana"); //"joana joana"



以上为javascript的总结内容。







警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

实例

<!DOCTYPE html><html><body><h1>My First Web Page</h1><p>My First Paragraph.</p><button onclick="myFunction()">点击这里</button><script>function myFunction(){document.write("糟糕!文档消失了。");}</script></body></html>

亲自试一试

#当你需要在某个页面同时执行两个变化处时使用{}

JavaScript 代码块

JavaScript 语句通过代码块的形式进行组合。

块由左花括号开始,由右花括号结束。

块的作用是使语句序列一起执行。

JavaScript 函数是将语句组合在块中的典型例子。

下面的例子将运行可操作两个 HTML 元素的函数:

实例

function myFunction(){document.getElementById("demo").innerHTML="Hello World";document.getElementById("myDIV").innerHTML="How are you?";}

亲自试一试


JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样,变量 myVariable 与 MyVariable 也是不同的。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

var name="Hello";var name = "Hello";
提示JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

JavaScript 变量

与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)

提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。

JavaScript 数据类型

JavaScript 变量还能保存其他数据类型,比如文本值 (name="Bill Gates")。

在 JavaScript 中,类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

当您向变量分配文本值时,应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。


我们使用 var 关键词来声明变量:

var carname;
提示一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。

JavaScript 函数和事件

上面例子中的 JavaScript 语句,会在页面加载时执行。

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

提示在面向对象的语言中,属性和方法常被称为对象的成员。

提示在面向对象的语言中,使用 camel-case 标记法的函数是很常见的。您会经常看到 someMethod() 这样的函数名,而不是 some_method()。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

调用带参数的函数

在调用函数时,您可以向其传递值,这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数,由逗号 (,) 分隔:

myFunction(argument1,argument2)

当您声明函数时,请把参数作为变量来声明:

function myFunction(var1,var2){这里是要执行的代码}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

实例

<button onclick="myFunction('Bill Gates','CEO')">点击这里</button><script>function myFunction(name,job){alert("Welcome " + name + ", the " + job);}</script>

亲自试一试

上面的函数会当按钮被点击时提示 "Welcome Bill Gates, the CEO"。

函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息:

实例

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button><button onclick="myFunction('Bob','Builder')">点击这里</button>

亲自试一试

?????根据您点击的不同的按钮,上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。

在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:

function myFunction(a,b){if (a>b)  {  return;  }x=a+b}

如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。

原创粉丝点击