JavaScript笔记

1.    HTML 定义了网页的内容

2.    CSS 描述了网页的布局

3.    JavaScript 网页的行为

 

JavaScript 是可插入 HTML页面的编程代码。JavaScript对大小写是敏感的。

JavaScript 插入 HTML页面后，可由所有的现代浏览器执行。外部脚本不能包含 <script>标签。

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

JavaScript：直接写入 HTML输出流

<script>

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落。</p>");

</script>

<buttontype="button"onclick="alert('欢迎!')">点我!</button>

JavaScript：改变 HTML内容

<script>

functionmyFunction()

{

  x=document.getElementById("demo");  // 找到元素

  x.innerHTML="HelloJavaScript!";    // 改变内容

}

</script>

<buttontype="button" onclick="myFunction()">点击这里</button>

JavaScript 显示数据

JavaScript可以通过不同的方式来输出数据：

·        使用 window.alert() 弹出警告框。

·        使用 document.write() 方法将内容写到 HTML 文档中。

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

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

·        使用 innerHTML 写入到 HTML 元素。

document.getElementById("demo").innerHTML= "段落已修改。";

·        使用 console.log() 写入到浏览器的控制台。

JavaScript 语法

 

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

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

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

varcarname="Volvo"; 
var carname;

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

varx;              // x为 undefined

var x =5;           //现在 x 为数字
var x = "John";      // 现在 x为字符串

JavaScript 有多种数据类型：

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

在 JavaScript 中有 5 种不同的数据类型：

string

number

boolean

object

function

3种对象类型：

Object

Date

Array

2个不包含任何值的数据类型：

null

undefined

 

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

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

 

var length =16;                                 // Number通过数字字面量赋值 
var points = x *10;                             // Number 通过表达式字面量赋值
var lastName ="Johnson";                        // String 通过字符串字面量赋值字符串可以是引号中的任意文本。您可以使用单引号或双引号：
var cars = ["Saab", "Volvo","BMW"];             // Array  通过数组字面量赋值

<script>

var i;

var cars = newArray();

cars[0] ="Saab";

cars[1] ="Volvo";

cars[2] ="BMW";

 

for (var car incars)

{

document.write(cars[car]+ "<br>");

}

</script>
var person ={firstName:"John", lastName:"Doe"};  // Object通过对象字面量赋值

<script>

var person=

{

       firstname: "John",  lastname  : "Doe",  id   :  5566，

fullName : function()

       {

      return this.firstName + " " + this.lastName;

    }

};

document.write(person.lastname +"<br>");

document.write(person["lastname"] +"<br>");

document.getElementById("demo").innerHTML= person.fullName();

</script>

 

函数返回值：

<script>

functionsquare(number1)
{
     var c = number1*number1;
     // 下面将返回函数值
     return c;
}

var x = 4;
// 下面我们调用函数并返回值
var des = square(x);
var res = des/2;
document.write(" 最终结果是 - "+res);
</script>

 

JavaScript 事件

onchange

HTML 元素改变

onclick

用户点击 HTML元素

onmouseover

用户在一个HTML元素上移动鼠标

onmouseout

用户从一个HTML元素上移开鼠标

onkeydown

用户按下键盘按键

onload

浏览器已完成页面的加载

ontinue语句（带有或不带标签引用）只能用在循环中。

break语句（不带标签引用），只能用在循环或 switch中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：