01-JavaScript 用法
<!-- 01行内js -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js使用方式1：行内js</title>
</head>
<body>
<input type="button" value="点击有惊喜" onclick="javascript:alert('弹出框')">
</body>
</html>
<!-- ============================================================ -->
<!-- 02内部js -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js使用方式2：内部js</title>
</head>
<body>
<input type="button" value="点击" onclick="surprise()">
</body>
<script type="text/javascript">
function surprise() {
alert('弹出框')
}
</script>
</html>
<!-- ============================================================ -->
<!-- 03外部js -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js使用方式3：外部js</title>
</head>
<body>
<input type="button" value="点击" onclick="surprise()">
</body>
<script src="./script.js" type="text/javascript" charset="utf-8">
</html>
02-JavaScript 输出
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
03-JavaScript 变量&& 数据类型
简单理解变量 ：变量是用于存储信息的"容器",[对大小写敏感]
数据类型：
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
声明变量类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
04-JavaScript 对象
JavaScript 对象是拥有属性和方法的数据
// 1：为变量 box 设置值为 "lefet"
var box = "lefet";
// 2：对象也是一个变量，或者（多个变量） 可以包含多个值。
var box = {type:"Fiat", model:500, color:"white"};
对象属性：JavaScript 对象是键值对的容器
键值对通常写法为 name : value (键与值以冒号分割)。
//定义了 person 对象
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
// person 属性： firstName:"John", lastName:"Doe",age:50, eyeColor:"blue"
// person访问：
// 对象方法作为一个函数定义存储在对象属性中。
<p id="demo"></p>
<script>*
var person = {
firstName: "01值",
lastName : "02值",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName; // 01值 ,02值
}
};
document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"];
document.getElementById("demo").innerHTML = person.fullName();
</script>
05-JavaScript 函数
函数是被调用时执行的可重复使用的代码块。对大小写敏感。关键词 function 必须是小写的
<script>
function myFunction()
{alert("可重复的代码块");}
</script>
<body> <button onclick="myFunction()"> 触发调用myFunction() </button> </body>
<script>
// 函数的参数：调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。
function myFunction(name,job)
{alert("可重复的代码块"+ name +job);}
myFunction("我是name","我是job")
// 函数的返回值：在使用 return 语句时，函数会停止执行，并返回指定的值。
function myFunction(a,b){return a*b;}
myFunction(5,6)
</script>
局部 JavaScript 变量：
函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）只要函数运行完毕，本地变量就会被删除
全局 JavaScript 变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期：
局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
06JavaScript 作用域
作用域是可访问变量的集合。
var carNames = "Volvos"
// 全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
function myFunction() {
// myFunction内部：局部作用域
var carName = "Volvo";
console.log(carName) // Volvo
console.log(carNames) // Volvos
}
myFunction();
console.log(carName) // carName is not defined
console.log(carNames) // Volvos
如果函数内部的变量没有声明，在其他语言中会报错，但在js中，会过度到全局变量
function myFunction() {
carName = "Volvo";
}
myFunction();
console.log(carName) // Volvo
全局变量是 window 对象: 所有数据变量都属于 window 对象。
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
07JavaScript 事件
JavaScript 可以根据html的元素节点触发不同的事件
<!-- 浏览器点击事件来复发当前时间 -->
<!-- 01点击事件触发 displayDate 函数 -->
<button onclick="displayDate()">现在的时间是?</button>
<p id="demo"></p>
<script>
// 02 获取到文件流中id为demo的元素节点 ，将当前的时间赋值
// Date() js的内置函数
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
08 JavaScript 字符串 && 运算符 && 比较 && 逻辑运算符
字符串属性: constructor , length , prototype .
返回创建字符串属性的函数 , 返回字符串的长度 , 允许您向对象添加属性和方法
字符串方法: String 对象
运算符:
运算符 = 用于赋值。
运算符 + 用于加值。
运算符 ++ 自增
运算符 -- 自减
比较运算符：
== 等于
=== 绝对等于（值和类型均相等）
!= 不等于
!== 不绝对等于（值和类型有一个不相等，或两个都不相等）
逻辑运算符：
&& and
|| or
! not
09 if...Else 语句 && switch 语句
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
------------------------------------------------------------------------------
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
------------------------------------------------------------------------------
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
网友评论