JavaScript 笔记 01(JavaScript notes 01)

JavaScript 笔记1

第一章 简介

与HTML/CSS关系

1.HTML 定义了网页的内容

2.CSS 描述了网页的布局

3.JavaScript 控制了网页的行为

直接写入HTML输出流

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
//HTML是自上而下执行的,若输出只会输出后者。
//只能在 HTML 输出中使用 document.write。
//如果在文档加载后使用该方法,会覆盖整个文档。

对事件反应

<button type="button" onclick="alert('欢迎!')">点我!</button>
//onclick 事件  为点击事件
//alert() 函数类似于C#中的messagebox.show()

对HTML进行更改

内容更改

x=document.getElementById("demo");//查找ID为“demo”的元素
x.innerHTML="Hello JavaScript";//改变内容更改相对应的内容
document.getElementById("some id")// 定义自HTML DOM 
//DOM (Document Object Model)(文档对象模型)

样式更改

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

第二章 用法

“script” 标签

<script>alert("我的第一个 JavaScript");</script>
//有些旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了

JavaScript 位置与限制

1.可以在 HTML 文档中放入不限数量的脚本。
2.脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
3.通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

外部的JavaScript

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
//在 <script> 标签的 "src" 属性中设置该 .js 文件
//外部 javascript 文件不使用 <script> 标签,直接写 javascript 代码

第三章 输出

显示内容

1.使用 window.alert() 弹出警告框。
2.使用 document.write() 方法将内容写到 HTML 文档中。
3.使用 innerHTML 写入到 HTML 元素。
4.使用 console.log() 写入到浏览器的控制台。

window.alert()

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
	window.alert(5 + 6);
</script>
</body>
</html>
//会弹出警告窗,并显示括号中的内容,结果为“11”.

修改HTML元素

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>	
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>	
</body>
</html>
//使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容

第四章 语法 (JavaScript 对大小写是敏感的)

  • 因为是脚本语言,所以和大部分编程语言相似(只列举不同)

字面量

定义一个数组(Array)

[40, 100, 1, 5, 25, 10]

定义一个对象(Object)

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

定义一个函数(Function)

function myFunction(a, b) { return a * b;}

变量

//JavaScript 使用关键字 var 来定义变量
var x,length;  s = 5;  length = 6;
  • 变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。

数据类型

var就完事了,剩下的就是等号右边的事情了。

正确的解释

  • JavaScript是弱类型编程语言,定义变量都使用 var 定义在定义后可以通过 typeOf() 来获取JavaScript中变量的数据类型.
  • typeof 不能用来判断是 Array 还是Object
  • var arr = [] typeof(arr) === ‘object’ //结果为 true。
//使用 isArray 方法
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 判断是否支持该方法
if (Array.isArray) {
    if(Array.isArray(cars)) {
        document.write("该对象是一个数组。") ;
    }
}
//使用 instanceof 操作符
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
if (cars instanceof Array) {
    document.write("该对象是一个数组。") ;
}
————————

JavaScript 笔记1

Chapter I Introduction

与HTML/CSS关系

1. HTML defines the content of the web page

2. CSS describes the layout of web pages

3. JavaScript controls the behavior of web pages

Write directly to HTML output stream

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
//HTML是自上而下执行的,若输出只会输出后者。
//只能在 HTML 输出中使用 document.write。
//如果在文档加载后使用该方法,会覆盖整个文档。

Response to events

<button type="button" onclick="alert('欢迎!')">点我!</button>
//onclick 事件  为点击事件
//alert() 函数类似于C#中的messagebox.show()

Make changes to HTML

Content change

x=document.getElementById("demo");//查找ID为“demo”的元素
x.innerHTML="Hello JavaScript";//改变内容更改相对应的内容
document.getElementById("some id")// 定义自HTML DOM 
//DOM (Document Object Model)(文档对象模型)

Style change

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

Chapter II usage

“script” 标签

<script>alert("我的第一个 JavaScript");</script>
//有些旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了

JavaScript 位置与限制

1.可以在 HTML 文档中放入不限数量的脚本。
2.脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
3.通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

外部的JavaScript

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
//在 <script> 标签的 "src" 属性中设置该 .js 文件
//外部 javascript 文件不使用 <script> 标签,直接写 javascript 代码

Chapter III output

show contents

1.使用 window.alert() 弹出警告框。
2.使用 document.write() 方法将内容写到 HTML 文档中。
3.使用 innerHTML 写入到 HTML 元素。
4.使用 console.log() 写入到浏览器的控制台。

window.alert()

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
	window.alert(5 + 6);
</script>
</body>
</html>
//会弹出警告窗,并显示括号中的内容,结果为“11”.

Modify HTML elements

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>	
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>	
</body>
</html>
//使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容

Chapter 4 Syntax (JavaScript is case sensitive)

  • Because it is a scripting language, it is similar to most programming languages (only different)

Literal

Define an array

[40, 100, 1, 5, 25, 10]

Define an object

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

Define a function

function myFunction(a, b) { return a * b;}

variable

//JavaScript 使用关键字 var 来定义变量
var x,length;  s = 5;  length = 6;
  • Variables can be accessed by variable names. In an imperative language, variables are usually variable. Literal is a constant value.

data type

var就完事了,剩下的就是等号右边的事情了。

Correct explanation

  • JavaScript is a weakly typed programming language. VaR is used to define variables. After definition, you can obtain the data type of variables in JavaScript through typeof()
  • typeof 不能用来判断是 Array 还是Object
  • var arr = [] typeof(arr) === ‘object’ //结果为 true。
//使用 isArray 方法
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 判断是否支持该方法
if (Array.isArray) {
    if(Array.isArray(cars)) {
        document.write("该对象是一个数组。") ;
    }
}
//使用 instanceof 操作符
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
if (cars instanceof Array) {
    document.write("该对象是一个数组。") ;
}