4.JavaScript

时间：2018-09-17 17:38:19 阅读：239 评论：0 收藏：0 [点我收藏+]

标签：关键词 ast flow 小数简写 innerhtml trunk 换行符 boolean

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>

JS输出方式

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返回匹配到的数目




//空白字符有 " " (空格符)、\r (回车符)、\n (换行符)、\t (制表符) 和 \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

标签：关键词 ast flow 小数简写 innerhtml trunk 换行符 boolean

原文地址：https://www.cnblogs.com/robindong/p/9662349.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行