JavaScript 基础
Posted 硫酸超
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 基础相关的知识，希望对你有一定的参考价值。
javascript 基础
html JavaScript
JavaScript 使 HTML 页面更具动态性和交互性
JavaScript与php不同
服务器与客户端
在前端和后端的基础上这两种语言是不同的。JavaScript脚本语言是一种前端语言（除Node.js之外），而PHP是一种服务器端语言
HTML <.script> 标签
HTML <script> 标签用于定义客户端脚本（JavaScript）
<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 输出
JavaScript 不提供任何内建的打印或显示函数。
JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台
使用 innerHTML 写入 HTML 元素
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
在属性为id的段落里显示11
更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。
使用 document.write()
<script>
document.write(5 + 6);
</script>
注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>
点击试一试之后将只显示11
使用 window.alert()
<script>
window.alert(5 + 6);
</script>
也可以使用alert(5+6);
JavaScript 语句
document.getElementById("demo").innerHTML = "Hello Kitty.";
JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。
这条语句告诉浏览器在 id=“demo” 的 HTML 元素中输出 “Hello Kitty.”
JavaScript 语法
JavaScript 对大小写敏感
所有 JavaScript 标识符对大小写敏感。
JavaScript 注释
并非所有 JavaScript 语句都被“执行”。
双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
JavaScript 关键词
JavaScript 关键词用于标识被执行的动作。
var 关键词告知浏览器创建新的变量
JavaScript 标识符
标识符是名称。
在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
在大多数编程语言中，合法名称的规则大多相同。
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
连串的字符可以是字母、数字、下划线或美元符号。
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。
注意：JavaScript 中不能使用连字符。它是为减法预留的。
JavaScript 字符串运算符
+运算符也可用于对字符串进行相加（concatenate，级联）
txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2;
结果
Bill Gates
也可以这样
txt1 = 1;
txt2 = "Gates";
txt3 = txt1 + " " + txt2;
结果
1 Gates
字符串和数字的相加
相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串。
如果是1+2+‘3’返回33
JavaScript 数据
JavaScript 从左向右计算表达式。不同的次序会产生不同的结果：
var x = "Porsche" + 911 + 7;
结果为Porsche9117
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同变量可用作不同类型，与php一样，是弱类型
您可以在字符串内使用引号
如果匹配到最外面的引号导致语法错误，可以将里面的引号转义掉即可
JavaScript 数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等，无int，float之类的类型
var y = 123e5;
var z = 123e-5;
表现为
JavaScript 数组
var cars = ["Porsche", "Volvo", "BMW"];
JavaScript 对象
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
typeof 运算符
您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型，typeof 运算符返回变量或表达式的类型。
Undefined
在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
空值
空值与 undefined 不是一回事。
空的字符串变量既有值也有类型。
NULL
NULL在C语言中用于指针和对象
在PHP中被赋予空值的情况有三种
尚未被赋值
被赋值为 NULL
被unset()函数处理过的变量
在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。
不幸的是，在 JavaScript 中，null 的数据类型是对象。
您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
您可以通过设置值为 null 清空对象，您也可以通过设置值为 undefined 清空对象。
Undefined 与 Null 的区别
Undefined 与 null 的值相等，但类型不相等。
null的类型是对象，Undefined的类型是Undefined
原始数据
原始数据值是一种没有额外属性和方法的单一简单数据值。
typeof 运算符可返回以下原始类型之一：
string
number
boolean
undefined
复杂数据
typeof 运算符可返回以下两种类型之一：
function
object
typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object。
typeof 运算符把数组返回为 “object”，因为在 JavaScript 中数组即对象。
JavaScript 函数
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
myFunction 引用的是函数对象，而 myFunction() 引用的是函数结果。
局部变量
在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量只能在函数内访问。
JavaScript 对象
对象属性
对象方法
实例
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
this 关键词
在函数定义中，this 引用该函数的“拥有者”。
在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。
换言之，this.firstName 的意思是 this 对象的 firstName 属性。
实例
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>
访问对象属性
您能够以两种方式访问属性：
objectName.propertyName或者
objectName[“propertyName”]
访问对象方法
您能够通过如下语法访问对象方法：
objectName.methodName()
HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
JavaScript 事件
下面是 HTML 事件的一些例子：
HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击
通常，当事件发生时，用户会希望做某件事。
JavaScript 允许您在事件被侦测到时执行代码。
通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。
点击后id为demo的元素显示时间
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>
在上面的例子中，JavaScript 代码改变了 id=“demo” 的元素的内容。
在接下来的例子中，代码（使用 this.innerHTML）改变了其自身元素的内容：
<button onclick="this.innerHTML=Date()">现在的时间是？</button>
JavaScript 代码通常有很多行。事件属性调用函数更为常见：
<button onclick="displayDate()">现在的时间是？</button>
常见的 HTML 事件
下面是一些常见的 HTML 事件：
JavaScript 能够做什么？
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：
每当页面加载时应该做的事情
当页面被关闭时应该做的事情
当用户点击按钮时应该被执行的动作
当用户输入数据时应该被验证的内容
等等
让 JavaScript 处理事件的不同方法有很多：
HTML 事件属性可执行 JavaScript 代码
HTML 事件属性能够调用 JavaScript 函数
您能够向 HTML 元素分配自己的事件处理函数
您能够阻止事件被发送或被处理
JavaScript 日期
var d = new Date();
创建 Date 对象
Date 对象由新的 Date() 构造函数创建。
有 4 种方法创建新的日期对象：
new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)
日期获取方式
日期设置方式
Math对象方法
JavaScript 随机
Math.random()
Math.random() 返回 0（包括） 至 1（不包括） 之间的随机数：
JavaScript 随机整数
Math.random() 与 Math.floor() 一起使用用于返回随机整数。
Math.floor(Math.random() * 10); // 返回 0 至 9 之间的数
一个适当的随机函数
正如你从上面的例子看到的，创建一个随机函数用于生成所有随机整数是一个好主意。
这个 JavaScript 函数始终返回介于 min（包括）和 max（不包括）之间的随机数：
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
For/In 循环
JavaScript for/in 语句遍历对象的属性：
var person = {fname:"Bill", lname:"Gates", age:62};
var text = "";
var x;
for (x in person) {
text += person[x];
}
JavaScript 标签的break和continue
语法
break labelname;
continue labelname;
continue 语句（不论有无标签引用）只能用于跳过一个迭代。
break 语句，如果没有标签引用，只能用于跳出一个循环或一个 switch。
如果有标签引用，则 break 语句可用于跳出任意代码块：
实例：
var cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
break list;
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
}
效果：
JavaScript 表单
Html表单实例：
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("必须填写姓名！");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/demo/html/action_page.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
如果不填写信息，点击提交将会跳出弹窗提示必须填写姓名
document.getElementById(“numb”).value
获取id为numb的值
document.getElementById(“demo”).innerHTML = text
赋值text给id为demo的元素
以上是关于JavaScript 基础的主要内容，如果未能解决你的问题，请参考以下文章