1、JavaScript 输出
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html> <html> <body> <h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert(5 + 6); </script> </body> </html>
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <script> document.write(Date()); </script> </body> </html>
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
2、变量
变量是用于存储信息的"容器"。JavaScript 语句和 JavaScript 变量都对大小写敏感。
在 JavaScript 中创建变量通常称为"声明"变量。我们使用 var 关键词来声明变量:var carname;
变量声明之后,该变量是空的(它没有值)。如需向变量赋值,请使用等号:carname="Volvo";
不过,您也可以在声明变量时对其赋值:var carname="Volvo";
您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:var lastname="Doe", age=30, job="carpenter";
声明也可横跨多行:
var lastname="Doe",
age=30,
job="carpenter";
一条语句中声明的多个不可以赋同一个值:var x,y,z=1;x,y 为 undefined, z 为 1。
JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
3、数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
数字:可以是整数或者是小数,或者是科学计数(e)。
字符串:可以使用单引号或双引号:"John Doe" 、'John Doe'
布尔:布尔(逻辑)只能有两个值:true 或 false。
Undefine null:Undefined 这个值表示变量不含有值;可以通过将变量的值设置为 null 来清空变量。
Javascript对象链接对象链接
数组:定义一个数组:[40, 100, 1, 5, 25, 10]
对象: 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数: 定义一个函数:function myFunction(a, b) { return a * b;}
4、运算符
算术运算符:加减乘除余幂,自增自减
关系运算符:==,===(绝对等于---值和类型均相等),!=,!==(不绝对等于---值和类型有一个不相等,或两个都不相等)),>,>=,<,<=
逻辑运算符:&&,||,!
赋值运算符:=,+=,-=,*=,/=,%=,**=
条件运算符:语法--------variablename=(condition)?value1:value2
5、语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句。
JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。可以在文本字符串中使用反斜杠对代码行进行换行。
6、注释
JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。
单行注释以 // 开头。
多行注释以 /* 开始,以 */ 结尾。
7、对象
JavaScript 对象是拥有属性和方法的数据。在 JavaScript中,几乎所有的事物都是对象。
对象定义:var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的:
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" };
访问对象属性(两种方式):
person.lastName;
person["lastName"];
<script> var person = { firstName : "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; </script>
访问对象方法:name = person.fullName();
<script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); </script>
8、函数
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname() { // 执行代码 }
当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
9、事件
HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为,也可以是用户行为。
以下是 HTML 事件的实例:
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
通常,当事件发生时,你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
/* 常见的HTML事件 事件 描述 onchange HTML 元素改变 onclick 用户点击 HTML 元素 onmouseover 用户在一个HTML元素上移动鼠标 onmouseout 用户从一个HTML元素上移开鼠标 onkeydown 用户按下键盘按键 onload 浏览器已完成页面的加载 */
常见的HTML事件事件描述onchange HTML 元素改变onclick 用户点击 HTML 元素onmouseover用户在一个HTML元素上移动鼠标onmouseout用户从一个HTML元素上移开鼠标onkeydown 用户按下键盘按键onload 浏览器已完成页面的加载