JavaScript 基础

来源：互联网发布：淘宝客佣金怎么领取编辑：程序博客网时间：2024/05/26 19:18

JS基础简介及入门

最近开始学习js和html5

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 是大小写敏感的

开始
- HTML中的脚本必须位于<script>与</script>标签之间。
- 脚本可被放置在HTML页面的<body>和<head>部分中。
- 通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，
不会干扰页面的内容。

在HTML页面中嵌入JavaScript需要使用<script>标签。<script>和</script>来告诉JavaScript的
开始和结束。之间的代码就是JavaScript:

<script>alert("Hello World!");</script>

或者也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。扩展名是.js。
如需使用外部文件，请在<script>标签的src属性中设置该.js文件：

<html><body><script src="myScript.js"></script></body></html>

有些代码中<script>标签中使用type="text/javascript"。现在已经不必这样做了,JavaScript
是所有现代浏览器以及HTML5中的默认脚本语言。

输出内容

document.write("are you ok?");

document是当前的窗口对象，大学老师好像是这么教的，我还有点印象。

响应事件

<button type="button" onclick="alert('Are you ok?')">点我试试？</button>

type属性指明这是一个buttton
onclick指定事件的相应
alert()方法就是弹出对话框。

变量
使用var关键词来声明变量

x = 5;或var x = 5;或var x = "James";

一条语句声明多个变量，中间用逗号分割。

var name="Gates",age=56,job="CEO";

如果只生命了一个变量，但是没有复制，这时候它的值是undefined;

var name; // 这时候变量name的值将是 undefined

var carname="Volvo";var carname;

如果重新声明JavaScript变量，该变量的值不会丢失
在以下两条语句执行后，变量carname的值依然是Volvo

Undefined 和 Null
Undefined这个值表示变量不含有值。
可以通过将变量的值设置为null来清空变量。

x = null;

JavaScript是弱类型的,这意味这相同的变量可用作不同类型:

var x                // x 为 undefinedvar x = 6;           // x 为数字var x = 6.00;var x = "Bill";      // x 为字符串

布尔

var x = true;var y = true;

数组

var array = new Array();array[0] = "are";array[1] = "you";array[2] = "ok";

或

var array = new Array("are", "you", "ok")

或

var array = ["are", "you", "ok"];

声明变量类型
当您声明新变量时,可以使用关键词new来声明其类型

var carname=new String;var x=      new Number;var y=      new Boolean;var cars=   new Array;var person= new Object;

JavaScript变量均为对象。当您声明一个变量时，就创建了一个新的对象。

对象
对象由花括号分割，在括号内部，对象的属性以名称和值的形式出现，属性之间由逗号分割:

var person={    firstname : "Bill",    lastname  : "Gates",    id        :  5566};

属性调用:

name = person.firstname;或name = person["firstname"];

创建对象
创建person对象，并为其添加四个属性:

person=new Object();person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";

访问对象的属性
访问对象属性的语法是：
objectName.propertyName
本例使用String对象的length属性来查找字符串的长度：

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

访问对象的方法
您可以通过下面的语法调用方法：
objectName.methodName()
这个例子使用String对象的toUpperCase()方法来把文本转换为大写：

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

方法

function myFunction(name, job) {    document.getElementById("name").innerHTML = name;    document.getElementById("job").innerHTML = job;    // 如果需要返回值，直接加上下面的return    var x = 5;    return x;}

注释
- 单行注释 //
- 多行注释 /* */
局部变量及全局变量
- 在JavaScript函数内部声明的变量(使用var)是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
- 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量的生命期从它们被声明的时间开始
- 局部变量会在函数运行以后被删除。
- 全局变量会在页面关闭后被删除。
向未声明的变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

name = "james";

将声明一个全局变量name,即使它在函数内执行。

运算符
算数运算符
赋值运算符
比较运算符
逻辑运算符

+运算符用于把数字或者字符串加起来(连接起来).

三元运算符

variablename=(condition)?value1:value2

条件语句

if (条件) {} else if (条件) {} else {}

Switch语句

var day=new Date().getDay();switch (day) {case 6:  x="Today it's Saturday";  break;case 0:  x="Today it's Sunday";  break;default:  x="Looking forward to the Weekend";}

循环

for (var i=0; i<5; i++) {    x=x + "The number is " + i + "<br>";}

或

var person={fname:"John",lname:"Doe",age:25};for (x in person) {    txt=txt + person[x];}

或

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

或

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

循环过程中也都支持break和continue，这和java类似。

标签

cars=["BMW","Volvo","Saab","Ford"];list: {    document.write(cars[0] + "<br>");    document.write(cars[1] + "<br>");    document.write(cars[2] + "<br>");    break list;    document.write(cars[3] + "<br>");    document.write(cars[4] + "<br>");    document.write(cars[5] + "<br>");}

list就是标签或者别名。

异常的处理

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

如:

<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>

对话框

三种弹出框:警告(alert)、确认(confirm)以及提问(prompt)。

alert("我是菜鸟我怕谁");

var r = confirm("你是菜鸟吗");if (r == true){    document.write("彼此彼此");} else{    document.write("佩服佩服");}

prompt和confirm类似，不过它允许访客随意输入答案。

var score;score = prompt("你的分数是多少？")

五种原始类型:
- Undefined
- Null
- Boolean
- Number
- String
typeof运算符

alert (typeof sTemp);    //输出 "string"alert (typeof 86);    //输出 "number"

对变量或值调用 typeof 运算符将返回下列值之一：
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的

instanceof 运算符
在使用typeof运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，
它都返回object。引入了另一个Java运算符instanceof来解决这个问题。

最后看下这个小demo，为下面的DOM作铺垫。

<!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><p id="demo">JavaScript 能改变 HTML 元素的内容。</p><script>function myFunction(){x=document.getElementById("demo");  // 找到元素x.innerHTML="Hello JavaScript!";    // 改变内容}</script><button type="button" onclick="myFunction()">点击这里</button></body></html>

邮箱：yjciscrgo@gmail.com

0 0