JavaScript 简介，JS中调用输出中文乱码

 

目录

JavaScript 显示数据

一条语句，多个变量

JavaScript 拥有动态类型

实例

JavaScript 字符串

实例

JavaScript 数组

JavaScript 对象

对象访问

带参数函数

常见的HTML事件

字符串方法

typeof 操作符

实例

实例

undefined 和 null 的区别

实例

JavaScript 数据类型

constructor 属性

实例

实例

将数字转换为字符串

实例

实例

search() 方法使用正则表达式

实例

replace() 方法使用正则表达式

使用 test()

实例

使用 exec()

Example 1

JavaScript 调试工具

console.log() 方法

设置断点

debugger 关键字

实例

主要浏览器的调试工具

Chrome 浏览器

Firefox 浏览器

Safari

Internet Explorer 浏览器。

使用 "use strict" 指令

JS中调用输出中文乱码

表单：

    菜鸟教程(runoob.com)       我的第一段 JavaScript

JavaScript 能改变 HTML 元素的内容。

function myFunction() {     x=document.getElementById("demo");  // 找到元素     x.innerHTML="Hello JavaScript!";    // 改变内容 } 点击这里     

 

 

document.write("这是一个标题"); document.write("

这是一个段落。

");

 

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"];

 

带参数函数

   

请点击其中的一个按钮，来调用带参数的函数。

点击这里 点击这里 function myFunction(name,job) {    alert("Welcome " + name + ", the " + job); }

 

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件描述onchangeHTML 元素改变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() 方法使用正则表达式

菜鸟教程(runoob.com)

替换 "microsoft" 为 "Runoob" :

点我

Visit Microsoft!

function myFunction() {     var str = document.getElementById("demo").innerHTML;      var txt = str.replace(/microsoft/i,"Runoob");     document.getElementById("demo").innerHTML = txt; }

使用 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，让你变成一个更好的程序员。

"use strict"; x = {p1:10, p2:20};      // 报错 (x 未定义)

 

JS中调用输出中文乱码

网上说：复制代码，到记事本 ，点击保存，格式utf-8，在copy出来，粘贴到项目中。可能有时候管用，但是这不根本。可能是坑。

主要是看看你的编码方式和浏览器的编码方式是否一样，就算一样，你也要自己真正的选择一遍编码格式，一般选择utf-8就好了。

浏览器查看编码，一般是右键，选择编码，看看是什么，选中一下。

你项目使用工具一般在右下角有，IDEA和studio都是这样的，或者在导航栏中，code，编码，选一下就好了。

表单：

JavaScript 验证输入
请输入 1 到 10 之间的数字：

提交


    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;
    }

 

还有就是form验证，ajax时时。