光芒Shine

光芒Shine

关注
发信
关注(28)粉丝(399)

【JavaScript 语法】

JavaScript 语法

■ JavaScript 是什么

是一门编程语言，可以实现很多的网页交互效果。

■ JavaScript 语法

■ JS 注释

单行注释 //
多行注释 /* */

■ JS 结束符

分号； 可以加可以不加。

■ JS 输入输出语句

  1. 使用 window.alert() 写入警告框 ：// window.alert(5 + 6);
  2. 使用 document.write() 写入 HTML 输出 //document.write(5 + 6);
  3. 使用 innerHTML 写入 HTML 元素 //document.getElementById(“demo”).innerHTML = 5 + 6;
  4. 使用 console.log() 写入浏览器控制台 //console.log(5 + 6);

■ JS 代码块

JavaScript 语句可以用花括号（{...}）组合在代码块中。
代码块的作用是定义一同执行的语句。
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Kitty.";
    document.getElementById("myDIV").innerHTML = "How are you?";
}

■ JS 关键词

■ JS 值

JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。
变量值被称为变量。

■ JS 字面量 （混合值）

书写混合值最重要的规则是：
写数值有无小数点均可：15.90 ，10011

■ JS 变量（变量值）

JavaScript 使用 var 关键词来声明变量。= 号用于为变量赋值。
var x;
x = 7; //x 被定义为变量。然后，x 被赋的值是 7：

■ JS 文本值 (字符串)

文本值被称为字符串。
字符串被包围在双引号或单引号中。数值不用引号。

var answer = "It's alright";           // 双引号内的单引号
var answer = "He is called 'Bill'";    // 双引号内的单引号
var answer = 'He is called "Bill"';    // 单引号内的双引号

■ JS 字符串可以是对象

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

var x = "John";              
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

=== 为绝对相等，即数据类型与值都必须相等。

■ JS 数据类型

JavaScript 数据类型包括：字符串值，数值，布尔值，数组，对象等。

var length = 7; // 数字
var lastName = "Gates";  // 字符串
var cars = ["Porsche", "Volvo", "BMW"];   // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象 

typeof 运算符可返回以下原始类型之一：
string
number
boolean
undefined

typeof 运算符可返回以下两种类型之一：
function
object
typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object。

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

■ JS 拥有动态类型

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

■ JS 数值

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

■ JS 布尔值

var x = true;
var y = false;

■ JS 数组

var cars = [“Porsche”, “Volvo”, “BMW”];

■ JS 对象

var person = {firstName:“Bill”, lastName:“Gates”, age:62, eyeColor:“blue”};
上例中的对象（person）有四个属性：firstName、lastName、age 以及 eyeColor。

■ JS typeof 运算符

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"        // 返回 "string"

typeof 0                   // 返回 "number"
typeof 314                 // 返回 "number"
typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"
typeof (7 + 8)             // 返回 "number"

typeof 运算符可返回以下原始类型之一：

string
number
boolean
undefined

typeof "Bill"    // 返回 "string"
typeof 3.14     // 返回 "number"
typeof true     // 返回 "boolean"
typeof false    // 返回 "boolean"
typeof x        // 返回 "undefined" (假如 x 没有值)

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

■ JS Undefined

var person; // 值是 undefined，类型是 undefined
person = undefined; // 值是 undefined，类型是 undefined
var car = “”; // 值是 “”，类型是 “string”

您也可以通过设置值为 undefined 清空对象：
var person = undefined; // 值是 undefined，类型是 undefined

■ JS Null

在 JavaScript 中，null 的数据类型是对象。
var person = null; // 值是 null，但是类型仍然是对象

■ JS Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

■ JS 运算符

JavaScript 使用算数运算符（+ - * /）来计算值： (7 + 8) * 10

■ JS 类型转换

■ JS 将数字转换为字符串

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

x.toString()
(123).toString()
(100 + 23).toString()

■ JS 将布尔值转换为字符串

String(false)        // 返回 "false"
String(true)         // 返回 "true"

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

■ JS 将布尔值转换为数字

Number(false)     // 返回 0
Number(true)      // 返回 1

■ JS 将日期转换为字符串

Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

■ JS 将字符串转换为数字

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0 
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

■ JS 自动转换类型

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"    null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

■ JS 字符串和数字的相加

提示：如果您对数字和字符串相加，结果将是字符串！
x = 7 + 8;
y = "7" + 8;
z = "Hello" + 7;
x、y 和 z 的结果将是：
15
78
Hello7

var x = "Porsche" + 911 + 7;
结果：
Porsche9117

■ JS 与驼峰式大小写

连字符：
first-name, last-name, master-card, inter-city.
下划线：
first_name, last_name, master_card, inter_city.
驼峰式大小写（Camel Case）：
FirstName, LastName, MasterCard, InterCity.
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写：
firstName, lastName, masterCard, interCity

■ JS 字符集

JavaScript 使用 Unicode 字符集。
Unicode 覆盖世界上几乎所有的字符、标点和符号。

■ JS 标识符

构造变量名称（唯一标识符）的通用规则是：
名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

■ JS 比较运算符

■ JS 逻辑运算符

■ JS 类型运算符

■ JS 位运算符

位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
【JavaScript 语法】-LMLPHP
上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。
因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。
~00000000000000000000000000000101 将返回 11111111111111111111111111111010。

■ JS 运算符优先级值

【JavaScript 语法】-LMLPHP
【JavaScript 语法】-LMLPHP
【JavaScript 语法】-LMLPHP

■ JS 赋值运算符

【JavaScript 语法】-LMLPHP

■ JS 正则表达式

方括号用于查找某个范围内的字符：

元字符是拥有特殊含义的字符：

■ JS search()

ar str = "Visit Runoob!"; 
var n = str.search(/Runoob/i); //输出结果为：6

检索字符串中 "Runoob" 的子串：
var str = "Visit Runoob!"; 
var n = str.search("Runoob");

■ JS replace()

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");

eplace() 方法将接收字符串作为参数：
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

■ JS test()

var patt = /e/;
patt.test("The best things in life are free!");
字符串中含有 "e"，所以该实例输出为：true

你可以不用设置正则表达式的变量，以上两行代码可以合并为一行：
/e/.test("The best things in life are free!")

■ JS exec()

/e/.exec("The best things in life are free!");
字符串中含有 "e"，所以该实例输出为:e

■ HTML使用JS（JS书写位置）

■ 中的 JavaScript

JavaScript 函数被放置于 HTML 页面的 部分。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

■ 中的 JavaScript

JavaScript 函数被放置于 HTML 页面的 部分。

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

■ 外部脚本

脚本可放置与外部文件中：

1）外部文件：myScript.js
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
----------------------------------------
2.使用外部脚本：
<script src="myScript.js"></script>

■ 外部脚本引用

可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
本例使用完整的 URL 来链接至脚本：

<script src="https://www.codebaoku.com/js/myScript1.js"></script>

■ 体验HTML+CSS+JS交互效果

【JavaScript 语法】-LMLPHP
【JavaScript 语法】-LMLPHP

■

02-20 22:26
Powered by LMLPHP ©2024 光芒Shine 0.011497