JavaScript 简介，JS中调用输出中文乱码
JavaScript 简介，JS中调用输出中文乱码
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台
一条语句，多个变量
您可以在一条语句中声明很多变量。该语句以 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。 输出的话，x，y会显示undefined
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
实例
var x; // x 为 undefined var x = 5; // 现在 x 为数字 var x = "John"; // 现在 x 为字符串
JavaScript 字符串
字符串是存储字符（比如 "Bill Gates"）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例
var carname="Volvo XC60"; var carname='Volvo XC60';
JavaScript 数组
下面的代码创建名为 cars 的数组：
var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):
JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：
var person={ firstname : "John", lastname : "Doe", id : 5566 };
对象属性有两种寻址方式：
对象访问
name=person.lastname; name=person["lastname"];
带参数函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body>
<p>请点击其中的一个按钮，来调用带参数的函数。</p> <button οnclick="myFunction('Harry Potter','Wizard')">点击这里</button> <button οnclick="myFunction('Bob','Builder')">点击这里</button> <script> function myFunction(name,job) { alert("Welcome " + name + ", the " + job); } </script>
</body> </html>
常见的HTML事件
下面是一些常见的HTML事件的列表:
事件 | 描述 |
|---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
var aa ="12345"
window.alert(aa[0])//字符串类似数组，可以取个别数值。var x = "John"; var y = new String("John"); (x === y) // 结果为 false，因为 x 是字符串，y 是对象
=== 为绝对相等，即数据类型与值都必须相等。
字符串方法
更多方法实例可以参见：JavaScript String 对象。
方法 | 描述 |
|---|---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串，返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
typeof 操作符
你可以使用 typeof 操作符来检测变量的数据类型。
实例
typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object typeof {name:'John', age:34} // 返回 object
实例
var person = null; // 值为 null(空), 但类型为对象
你可以设置为 undefined 来清空对象:
var person = undefined; // 值为 undefined, 类型为 undefined
undefined 和 null 的区别
实例
null 和 undefined 的值相等，但类型不等：
typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
JavaScript 数据类型
在 JavaScript 中有 5 种不同的数据类型：
- string
- number
- boolean
- object
- function
3 种对象类型：
- Object
- Date
- Array
2 个不包含任何值的数据类型：
- null
- undefined
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
constructor 属性
constructor 属性返回所有 JavaScript 变量的构造函数。
实例
"John".constructor // 返回函数 String() { [native code] } (3.14).constructor // 返回函数 Number() { [native code] } false.constructor // 返回函数 Boolean() { [native code] } [1,2,3,4].constructor // 返回函数 Array() { [native code] } {name:'John', age:34}.constructor // 返回函数 Object() { [native code] } new Date().constructor // 返回函数 Date() { [native code] } function () {}.constructor // 返回函数 Function(){ [native code] }
你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):
实例
function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; }
将数字转换为字符串
全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字，字母，变量，表达式：
实例
String(x) // 将变量 x 转换为字符串并返回 String(123) // 将数字 123 转换为字符串并返回 String(100 + 23) // 将数字表达式转换为字符串并返回
Number 方法 toString() 也是有同样的效果。
实例
var da=new Date;
window.alert(da.toString())
(123).toString()
(100 + 23).toString()getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
|---|---|
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
search() 方法使用正则表达式
实例
使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：
var str = "Visit Runoob!"; var n = str.search(/Runoob/i);
输出结果为：
6
replace() 方法使用正则表达式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body>
<p>替换 "microsoft" 为 "Runoob" :</p> <button οnclick="myFunction()">点我</button> <p id="demo">Visit Microsoft!</p> <script> function myFunction() { var str = document.getElementById("demo").innerHTML; var txt = str.replace(/microsoft/i,"Runoob"); document.getElementById("demo").innerHTML = txt; } </script>
</body> </html>
使用 test()
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
以下实例用于搜索字符串中的字符 "e"：
实例
var patt = /e/; patt.test("The best things in life are free!");
字符串中含有 "e"，所以该实例输出为：
true
使用 exec()
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 "e":
Example 1
/e/.exec("The best things in life are free!");
字符串中含有 "e"，所以该实例输出为:
e
JavaScript 调试工具
在程序代码中寻找错误叫做代码调试。
调试很难，但幸运的是，很多浏览器都内置了调试工具。
内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。
有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。
浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。
console.log() 方法
如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：
设置断点
在调试窗口中，你可以设置 JavaScript 代码的断点。
在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。
在检查完毕后，可以重新执行代码（如播放按钮）。
debugger 关键字
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用，debugger 语句将无法工作。
开启 debugger ，代码在第三行前停止执行。
实例
var x = 15 * 5; debugger; document.getElementbyId("demo").innerHTML = x;
主要浏览器的调试工具
通常，浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。
各浏览器的步骤如下:
Chrome 浏览器
- 打开浏览器。
- 在菜单中选择 "更多工具"。
- 在 "更多工具" 中选择 "开发者工具"。
- 最后，选择 Console。
或者你可以右击鼠标选择 "检查"，如下图：
Firefox 浏览器
- 打开浏览器。
- 右击鼠标，选择 "查看元素"。
Safari
- 打开浏览器。
- 右击鼠标，选择检查元素。
- 在底部弹出的窗口中选择"控制台"。
Internet Explorer 浏览器。
- 打开浏览器。
- 在菜单中选择工具。
- 在工具中选择开发者工具。
- 最后，选择 Console。
使用 "use strict" 指令
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。
<script> "use strict"; x = {p1:10, p2:20}; // 报错 (x 未定义) </script>
JS中调用输出中文乱码
网上说：复制代码，到记事本 ，点击保存，格式utf-8，在copy出来，粘贴到项目中。可能有时候管用，但是这不根本。可能是坑。
主要是看看你的编码方式和浏览器的编码方式是否一样，就算一样，你也要自己真正的选择一遍编码格式，一般选择utf-8就好了。
浏览器查看编码，一般是右键，选择编码，看看是什么，选中一下。
你项目使用工具一般在右下角有，IDEA和studio都是这样的，或者在导航栏中，code，编码，选一下就好了。
表单：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>JavaScript 验证输入</h1>
<p>请输入 1 到 10 之间的数字：</p>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>还有就是form验证，ajax时时。
腾讯云开发者
