javascript基础

1、存在形式

 
1、文件形式
    <script src="js/oldboy.js"></script>
2、嵌入html
    <script type='text/javascript'>alert('page');</script>

2、代码块的位置

　　<body>标签内的代码底部

3、变量和函数的声明

 
1、全局变量和局部变量
    name ＝ 'alex'
    var name ＝ 'alex'
 
2、基本函数和自执行函数
    function Foo(arg){
        console.log(arg);
    }
 
    (function (arg) {
        alert(arg);
    })('alex')

4、字符串常用方法和属性

 
obj.trim()
obj.charAt(index)
obj.substring(start,end)
obj.indexOf(char)
obj.length

5、数组

 
声明，如：
    var array = Array() 或 var array = []
 
添加
    obj.push(ele)                   追加
    obj.unshift(ele)                最前插入
    obj.splice(index,0,'content')   指定索引插入
 
移除
    obj.pop()                       数组尾部获取
    obj.shift()                     数组头部获取
    obj.splice(index,count)         数组指定位置后count个字符
 
切片
    obj.slice(start,end)           
 
合并
    newArray ＝ obj1.concat(obj2)   
 
翻转
    obj.reverse()
 
字符串化
    obj.join('_')
 
长度
    obj.length

注意：字典是一种特殊的数组

6、循环

 
var a = '123456789';
for(var i=0;i<10;i++){
     console.log(a[i]);
}<br>
for(var item in a){
     console.log(a[item]);
}

8、函数：

(1)将脚本编写为函数，就可以避免页面载入时执行该脚本。

函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。

你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。

函数可以在页面任何地方定义。

案例：

复制代码
<html>
　　<head>
　　    <script type="text/javascript">
　　        function  test(){
　　              alert("消息框");
　　            }
　　    </script>
　　</head>
　　<body>
　　       <from>
                 <input type=“button”  value=“click me”  onclick=“test()”>
　　       </form>
　　</body>
</html>
复制代码

(2)、函数（代参函数，无参函数）

function test(var  a,var b){

//有参函数

要执行的程序

}

function test(){

//无参函数

要执行的程序

}

(3)、javascript变量的生存周期：

当在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量，这是因为只有

声明过变量的函数能够识别其中的每个变量。

如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。

就是我们经常所说的局部变量和全局变量。

10、事件：

1)事件是可以被javascript侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：

· 鼠标点击

· 页面或图像载入

· 鼠标悬浮于页面的某个热点之上

· 在表单中选取输入框

· 确认表单

· 键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行

（2）常用事件案例。

案例1：onFouces,onBlur和onChange这三个事件通常相互配合来验证表单

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkMail() 函数就会被调用

<input  type=”text”  size=”30”  onChange=”checkMail()”>

 案例2：onSubmit用于提交表单之前验证表单域, 

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或

者 false。如果返回值为true，则提交表单，反之取消提交。

<from  method=”post”  action=”xxx.html”  Onsubmit=”return checkFrom()”>

案例3：onMouseOver和onMouseOut：

onMouseOver 和 onMouseOut 用来创建“动态的”按钮

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

  <a href="www.baidu.com"  onMouseOver="alert("that is right");return false"><img src="test.jpg"  width= "100"  height="100"></a>

从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。        
 
DOM选择器：
  • document.getElementById('id')
  • document.getElementsByName('name')
  • document.getElementsByTagName('tagname')
 
直接把 <p> 元素写到 HTML 文档输出中：
document.write("<p>我的第一个 JavaScript</p>");
 
document.getElementById("demo").innerHTML="你好 Dolly";
 
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction()        #function是函数
{
document.getElementById("myPar").innerHTML="你好世界";
document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时，两个元素会改变。</p>
</body>
</html>
 

Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

在执行过以下语句后，变量 carname 的值将是 undefined：

var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo"; 
var carname;
javascript数据类型
 
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)  类似python的列表、对象(Object)类似python的字典、空（Null）、未定义（Undefined）。

在 JavaScript 中，对象是拥有属性和方法的数据。

属性和方法

属性是与对象相关的值。

方法是能够在对象上执行的动作。

创建 JavaScript 对象

JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。

你也可以创建自己的对象。

本例创建名为 "person" 的对象，并为其添加了四个属性：

实例

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

访问对象的属性

访问对象属性的语法是：

objectName.propertyName

本例使用 String 对象的 length 属性来查找字符串的长度：

var message="Hello World!";
var x=message.length;

在以上代码执行后，x 的值是：

12

访问对象的方法

您可以通过下面的语法调用方法：

objectName.methodName()

这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写：

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后，x 的值是：

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

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
执行代码
}

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

  JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

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

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

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

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction("marked">var1,"marked">var2)
{
代码
}

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

 

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

语法

function myFunction()
{
var x=5;
return x;
}

上面的函数会返回值 5。

注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。

即使不把它保存为变量，您也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。

您可以使返回值基于传递到函数中的参数：

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

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

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

If...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

if (condition1)

  {

  当条件 1 为 true 时执行的代码

  }
else if (condition2)
  {
 当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }


switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
 n 与 case 1 和 case 2 不同时执行的代码
}
 
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
 

JavaScript 循环

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

for (var i=0;i<cars.length;i++)
{ 
document.write(cars[i] + "<br>");
}

While 循环

While 循环会在指定条件为真时循环执行代码块。

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。

语法

do
  {
  需要执行的代码
  }
while (条件);

break 语句可用于跳出循环。

break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：

实例

for (i=0;i<10;i++)
  {
  if (i==3)
    {
    break;
    }
  x=x + "The number is " + i + "<br>";
  }
 

Continue 语句

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。 该例子跳过了值 3：

for (i=0;i<=10;i++)
 {
 if (i==3) continue;
  x=x + "The number is " + i + "<br>";
  }
 
javascript错误提示

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

JavaScript 抛出（throw）错误

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

描述这种情况的技术术语是：JavaScript 将抛出一个错误。

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }
 

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

语法

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。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>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用Javascript来验证其正确性：

    • 验证表单数据是否为空?
    • 验证输入是否是一个正确的email地址?
    • 验证日期是否输入正确?
  • 验证表单输入内容是否为数字型?

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

 
 
 
 
 
 
 
 
 
 
posted @ 2015-12-03 11:27  muzinan110  阅读(148)  评论(0)  编辑  收藏  举报