4.JavaScript
Posted Robin_D
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了4.JavaScript相关的知识，希望对你有一定的参考价值。
1.简介
javascript 是一种轻量级的编程语言，是一种是一种动态类型、弱类型、基于原型的脚本语言。
JavaScript，通常缩写为JS，是一种高级的，解释执行的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。
2.用法
2.1.在 <head> 或者 <body> 的JavaScript
您可以在 html 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
<!-- 头部插入js--> <!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; } </script> </head> <body> <h1>我的 Web 页面</h1> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">点我</button> </body> </html> <!-- body中插入Js --> <!DOCTYPE html> <html> <body> <h1>我的 Web 页面</h1> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">点我</button> <script> function myFunction() { document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; } </script> </body> </html>
2.2.外部JS文件
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
<!-- 引用外部Js脚本文件 --> <!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>
??：脚本文件中不能再包含<script></script>标签。
3.输出和注释
3.1.输出
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html> <html> <body> <h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert(5 + 6); </script> </body> </html> <!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html> <!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html> <!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <script> document.write(Date()); </script> </body> </html>
3.2.注释
单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾。
// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
4.数据类型
4.1.变量与字面量
变量用于存储数据值。JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值。
字面量(literals),其实是常量(values)的一种变现形式。JavaScript中便有数字（Number）字面量，字符串（String）字面量，表达式字面量，数组（Array）字面量，对象（Object）字面量，函数（Function）字面量等。
//变量，先定义赋值再使用 var x, length x = 5 length = 6
4.2数据类型
有如下几种，字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
//字符串 var carname="Volvo XC60"; var carname=‘Volvo XC60‘; //数字 var x1=34.00; // 使用小数点来写 var x2=34; // 不使用小数点来写 //Boolean var x=true; var y=false; //数组 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; //对象 var person={firstname:"John", lastname:"Doe", id:5566}; /*Undefined 这个值表示变量不含有值。 可以通过将变量的值设置为 null 来清空变量。*/ cars=null; person=null;
声明变量类型
声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;
??JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
??JavaScript具有隐含的全局概念，意味着你不声明的任何变量都会成为一个全局对象属性。
4.3.操作对象
对象拥有属性和方法，而对属性和方法的访问都是通过对象.属性或对象.方法来实现的。
String对象
//字符串（String）使用长度属性length来计算字符串的长度 var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.write(txt.length); //字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置 var str="Hello world, welcome to the universe."; var n=str.indexOf("welcome"); //match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符 var str="Hello world!"; document.write(str.match("world") + "<br>"); //replace() 方法在字符串中用某些字符替换另一些字符。 str="Please visit Microsoft!" var n=str.replace("Microsoft","w3cschool"); //字符串大小写转换使用函数 toUpperCase() / toLowerCase() var txt="Hello World!"; // String var txt1=txt.toUpperCase(); // txt1 is txt converted to upper var txt2=txt.toLowerCase(); // txt2 is txt converted to lower //字符串使用string>split()函数转为数组 txt="a,b,c,d,e" // String txt.split(","); // Split on commas txt.split(" "); // Split on spaces txt.split("|"); // Split on pipe //Javascript 中可以使用反斜线（）插入特殊符号，转义
Date（日期） 对象
//创建Date对象 var today = new Date() var d1 = new Date("October 13, 1975 11:13:00") var d2 = new Date(79,5,24) var d3 = new Date(79,5,24,11,33,0) //获取日期 var myDate=new Date(); myDate.getFullYear() //设置日期 var myDate=new Date(); myDate.setFullYear(2010,0,14);
Array（数组） 对象
//创建数组对象 var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW"; var myCars=new Array("Saab","Volvo","BMW"); var myCars=["Saab","Volvo","BMW"]; //访问数组 var name=myCars[0]; myCars[0]="Opel"; var x=myCars.length // the number of elements in myCars var y=myCars.indexOf("Volvo") // the index position of "Volvo" //删除最后一个元素 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop(); //删除第一个元素 var fruits = ["Banana", "Orange", "Apple", "Mango"]； fruits.shift(); //数组的末尾添加新的元素 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("tomato"); //添加第一个元素 var fruits = ["Banana", "Orange", "Apple", "Mango"]； fruits.unshift("tomato"); //反序 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.reverse(); //排序字母顺序 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); //数组转为字符串 var fruits = ["Banana", "Orange", "Apple", "Mango"]; var str = fruits.toString();
对象（字典）
>dic = {‘k1‘:‘v1‘,‘k2‘:‘v2‘};
<Object {k1: "v1", k2: "v2"}
//有两种方式访问对象属性，一个是点操作符(.)，一个是中括号操作符([])。 var testObj = { "hat": "ballcap", "shirt": "jersey", "shoes": "cleats" }; var hatValue = testObj.hat; var hatValue = testObj["hat"];//中括号操作符的另一个使用方式是用变量来访问一个属性,而点不行。 //更新对象属性,添加类似 var testObj.hat = "cowboyhat"; var testObj["hat"] = "cowboyhat"; //删除 delete testObj.hat； delete testObj["hat"]； // 检查对象属性 var myObj = { top: "hat", bottom: "pants" }; myObj.hasOwnProperty("top");// true myObj.hasOwnProperty("middle"); // false
JSON对象
JavaScript Object Notation 简称 JSON，它也有一个嵌套的 formarts 的数组/字典对象。
var ourMusic = [ { "artist": "Daft Punk", "title": "Homework", "release_year": 1997, "formats": [ "CD", "Cassette", "LP" ], "gold": true } ];
//获取属性 var myStorage = { "car": { "inside": { "glove box": "maps", "passenger seat": "crumbs" }, "outside": { "trunk": "jack" } } }; var gloveBoxContents = myStorage.car.inside["glove box"]; //获取JSON数组值 var myPlants = [ { type: "flowers", list: [ "rose", "tulip", "dandelion" ] }, { type: "trees", list: [ "fir", "pine", "birch" ] } ]; var secondTree = myPlants[1].list[1]; //
正则RegExp对象
Regular expressions 正则表达式被用来根据某种匹配模式来寻找strings中的某些单词。
//使用正则表达式选取数值 var testString = "There are 3 cats but 4 dogs."; var expression = /d+/g; // d 匹配字符数字，+匹配更多，g是‘global‘的简写，意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配 // This code counts the matches of expression in testString var digitCount = testString.match(expression).length;//testString.match(expression）返回的是匹配结果的数组形式，.length返回匹配到的数目 //空白字符有 " " (空格符)、 (回车符)、 (换行符)、 (制表符) 和 f (换页符) var testString = "How many spaces are there in this sentence?"; var expression = /s+/g;// s 选取句子中的所有空白字符 // This code counts the matches of expression in testString var spaceCount = testString.match(expression).length; //s 匹配任何空白字符，S 匹配任何非空白字符。大写匹配小写的相反内容 var testString = "How many spaces are there in this sentence?"; var expression = /s+/g;// s 选取句子中的所有非空白字符 // This code counts the matches of expression in testString var spaceCount = testString.match(expression).length;
以上是关于4.JavaScript的主要内容，如果未能解决你的问题，请参考以下文章