Javascript

最新推荐文章于 2020-08-07 21:51:38 发布

malaganguo

最新推荐文章于 2020-08-07 21:51:38 发布

阅读量169

点赞数

文章标签： JS

以下内容来自易百教程

https://www.yiibai.com/javascript/javascript_variables.html#article-start

（部分内容）

JavaScript由被放置在<script>... </script>的JavaScript语句，在网页中的HTML标签。

可以将<script>包含您的JavaScript在网页的任何地方，但最好的方式是放它在<head>标签内。

<script ...>
  JavaScript code
</script>

script标签有两个重要属性：

language: 该属性指定的脚本语言所使用。通常情况下，它的值是JavaScript。虽然最近HTML（和XHTML，其继任者）的版本已经不再使用这个属性。
type: 该属性是现在被推荐来指示所使用的脚本语言和它的值应被设置为 "text/javascript".

所以，你的JavaScript片段应该是这样的：

<script language="javascript" type="text/javascript">
  JavaScript code
</script>

第一个JavaScript脚本：

让我们写一个例子打印出来 "Hello World".

<html>
<body>
<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>
</body>
</html>

Javascript代码可选HTML注释。这里是的代码不支持JavaScript的浏览器。用“//->”注释结束。“//”表示在Javascript的注释，所以我们增加了防止浏览器在读取HTML注释的结尾作为一段JavaScript代码。

接下来，我们调用一个函数document.write其写入字符串到HTML文档。这个函数可用于写文本，HTML，或两者都有。所以，上面的代码会显示以下结果：

Hello World!

空格和换行：

JavaScript忽略空格，制表符和换行符出现在JavaScript程序。

因为这样你就可以自由地格式化和缩进程序在一个整洁，一致的方式，使代码易于阅读和理解，你可以使用空格，制表符，换行符和自由地在你的程序中。

分号是可选：

一般后跟一个分号在JavaScript中简单的语句，只是因为它们在C，C++和Java。 JavaScript，但是可以忽略这个分号，如果每个语句放置在一个单独的行。例如，下列代码可被写入，而不使用分号

<script language="javascript" type="text/javascript">
<!--
  var1 = 10
  var2 = 20
//-->
</script>

但是，当在一行如下格式化，分号是必需的：

<script language="javascript" type="text/javascript">
<!--
  var1 = 10; var2 = 20;
//-->
</script>

注：使用分号是一个良好的编程习惯。

区分大小写：

JavaScript是一种区分大小写的语言。这意味着，语言的关键字，变量，函数名，以及任何其他的标识符必须始终用一个字母一致写入大小写。

所以标识符Time, TIme 和TIME 在JavaScript中有不同的含义。

注：在变量和函数名在JavaScript中应注意。

JavaScript中的注释：

JavaScript 支持C风格和C++ 风格的注释，因此：

//和行结束之间的所有文本将被视为一个注释，是会被JavaScript忽略。
任何文本在/*和*/之间的字符被视为注释。这可能会跨越多行。
JavaScript还承认HTML注释打开顺序<!--， JavaScript对待这是一个单行注释，就像//注释。
在HTML注释结束序列-->无法识别，所以JavaScript应该写成//-->。

示例:

<script language="javascript" type="text/javascript">
<!--

// This is a comment. It is similar to comments in C++

/*
 * This is a multiline comment in JavaScript
 * It is very similar to comments in C Programming
 */
//-->
</script>

在HTML文档中的任何地方可包括JavaScript代码。但也有以下的最佳方法来包含JavaScript在HTML文件。

在 <head>...</head> 部分.
在 <body>...</body> 部分.
在<body>...</body> 和<head>...</head> 部分.
脚本和外部文件，然后包括在<head>... </ head>部分。

在下面的章节中，我们将看到如何可以包含JavaScript方式的不同：

在JavaScript的<head>... </ head>部分：

如果你想在一些事件上运行一个脚本，当用户点击某个地方，如，那么应该脚本的头部，如下所示：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" οnclick="sayHello()" value="Say Hello" />
</body>
</html>

这将产生以下结果：

JavaScript在<body>... </ body>部分：

如果需要一个脚本的页面加载，以便脚本生成页面内容来运行，该脚本在文档的<body>部分。在这种情况下，就不必使用JavaScript定义的所有功能：

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

JavaScript 在<body> 和 <head> 部分:

你可以把JavaScript代码在<head>和<body>部分完全如下：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" οnclick="sayHello()" value="Say Hello" />
</body>
</html>

在JavaScript外部文件：

当开始工作，更广泛地使用JavaScript，可能会发现有情况下，在站点的多个页面重用相同的JavaScript代码。

你并不局限于将保持在多个HTML文件相同的代码。 script标签提供了一种机制，允许存储JavaScript在外部文件中，然后将其包含到HTML文件。

下面是一个例子来说明如何使用脚本标记和src属性包含在HTML代码的外部JavaScript文件：

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

使用JavaScript从外部文件源，则需要使用扩展写下所有的JavaScript代码在一个简单的文本文件“.js”，然后包括文件，如上图所示。

例如，你可以保持在以下文件filename.js的内容，然后包括filename.js文件后，在HTML文件中使用sayHellofunction：

function sayHello() {
   alert("Hello World")
}

感觉易百教程中的内容比较齐全，觉得参考学习价值很大，所以在这里粘贴部分代码以供日后复习回顾。

以下内容来自对课堂的总结

javascript可以作为html文件的一个标签，可以用如下方式写入

<script type="text/javascript">
    //这里是js的程序语言
</script>

也可以来自外部的*.js文件

<script src="js/01.js"></script>

type和src都是标签的两个属性。script的两个重要属性：type和language。

实时

两个重要函数:alert("弹出一个提示框") ; document.write("向浏览器输出内容");

定义变量

js中的变量类型有变量值决定，有：数字（number）、字符串（string）、布尔型（boolean）、对象型（object）。

var 可以定义任何类型的变量，var可以省略，但是不建议省略。

var 可以重复定义变量，后定义的会覆盖先定义的值（js是弱类型语言）。

如果定义一个变量不给这个变量值，则这个变量的值为undefined 。

查看一个变量的数据类型,使用一个函数:typeOf(变量名)

js中的运算符

算术运算符:+,-,* ,/.

比较运算符:>= ,<= ,<,>..
逻辑运算符:逻辑双与&&.逻辑双或||,逻辑非!

三元运算符:表达式? true的结果:false的结果;

js中的语句

witch-case语句与java中不同的在：js中的case可以是变量，也可以是常量。而java中只能是变量。可见js的灵活性。

witch语句：格式 witch(document){....} //将document对象当做witch语句参数,然后可以直接使用它里面的write() 。

for-in语句：格式 for(var 变量名 in 数组名){......} //相当于java中的增强for循环

js中函数的定义

function 函数名称(形式参数列表){//语句}

函数的调用：函数名称(实际参数列表) ;

一个 JavaScript 函数可以有一个可选的return语句。如果你想从一个函数返回一个值这是必需的。这条语句应该是函数的最后一条语句。

string对象

js中String对象的常用方法
chatAt() :返回指定索引位置处的字符
indexOf():表示某个子字符串在当前字符串中第一次出现的索引
lastindexOf():这个字符串最后一次出现的索引
fontColor():给当前字符串设置一个颜色标记

substrint(start,end):截取功能

创建方式：

方式一、String str = new String() ;

var str1 = new String("hello") ;

方式二、var s1 = "hello" ;

number对象

创建方式与string对象相同。

Math类

方法：向上取整ceil()、向下取整floor()、四舍五入round()、获取随机数random()（含0不含1）、求最大值max()。

Date类

Date类的常用方法	方法说明
getFullYear()	获取年份
getMonth()	获取月份，获取的值是0~11
getDate()	获取日期
getHours()	获取一天中的小时
getSeconds()	获取一天中的秒
getMinutes()	获取一天中的分钟

一个网页时钟Demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页时钟</title>
</head>
<body>
	当前系统时间为：
	<span id="dateTip"></span>
</body>
<script type="text/javascript">
	function newDate() {
		var date = new Date();
		var dateStr = date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
				+ date.getDate() + "  " + date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
		//通过span标签的id获取span标签对象
		var dateTip = document.getElementById("dateTip") ;
		//设置span标签的innerHTML属性：文本属性
		dateTip.innerHTML = dateStr ;
	}
	
	//开启定时器,1s刷新一次
	window.setInterval("newDate()",1000) ;
</script>
</html>

结果：

Array对象

与java不同，js中的Array数组是一个可以存储任何类型，长度任意的数组。

Array对象的创建方式有以下几种：

var arr = new Array(这里写长度) ;

var arr = new Array(这里直接枚举元素，元素之间用逗号隔开) ;

var arr = new Array() ;

arr[0] = 元素一 ;

arr[1] = 元素二 ;

arr[2] = 元素三 ;

......

var arr = [元素一,元素二,元素三......] ;

Array对象常用的有两个方法：

join(这里是连接的字符串)	将Array数组中的所有元素以参数中的字符串进行拼接，拼接后返回一个新的字符串
reverse()	j将Array数组中的元素反转

window对象

这个对象是浏览器的一个窗口对象，具有对窗口进行操作的函数。由于window对象中的方法频繁使用，所以js中为了简化书写将window可以不写。

window的常用方法：

open("打开资源文件url","以什么什么方式打开(_blank)/_self","指定新打开的窗口和高度");	一个跳转页面的事件
setInterval("任务",时间毫秒值);	定时器，经过时间毫秒值刷新任务
clearInterval(IntervalID);	取消定时器，取消指定任务
setTimeout("任务",时间毫秒值);	经过时间后只执行一次
clearTimeout(参数是setTimeout的对象);	取消和setTimeout对应的事件
alert("提示框");	提示框
confirm("消息对话框");	有确认和取消两个选择
prompt("这里是消息的内容");	提示对话框，其中带有一条消息和一个输入框

吐舌头（这个表情很魔性，不是我加的！！！）

这是一个小Demo：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window常用方法</title>

<script type="text/javascript">
	//打开窗口函数
	function testOpen(){
		window.open("网页时钟.html","_blank") ;
	}
	//定时器，定时每5s执行一次testOpen()
	function testsetInterval(){
		window.setInterval("testOpen()",5000) ;
	}
	//清除定时器
	function testclearInterval(){
		window.clearInterval(window.setInterval("testOpen()",5000)) ;
	}
	//setTimeout定时器，2秒后执行一次testOpen()
	function testsetTimeout(){
		window.setTimeout("testOpen()",2000) ;
	}
	//清楚setTimeout定时器
	function testclearTimeout(){
		window.clearTimeout(window.setTimeout("testOpen()",2000)) ;
	}
	//提示框，只有一个确认按钮
	function testAlert(){
		window.alert("这是一个弹窗") ;
	}
	//一行提示文字，可以选择确认：返回true;选择取消返回false
	function testConfirm(){
		var flag = window.confirm("这是一个选择提示框，确认选择吗？");
		if(flag){
			alert("已确认选择") ;
		}else{
			alert("已取消选择") ;
		}
	}
	//这框有一行提示文字，还有一行输入框
	function testPrompt(){
		var flag = window.prompt("这个窗口带有一个提示框和输入框，这是提示框，下面是输入框") ;
		if(flag){
			alert("flag为true了") ;
		}else{
			alert("flag为false了") ;
		}
	}
	</script>
</head>
<body>
	<input type = "button" value="打开网页时钟" οnclick="testOpen()">
	<input type = "button" value="5s打开一次网页时钟.html" οnclick="testsetInterval()">
	<input type = "button" value="关闭5s定是打开的按钮" οnclick="testclearInterval()">
	<input type = "button" value="2s后打开网页时钟" οnclick="testsetTimeout()">
	<input type = "button" value="关闭2s打开网页时钟" οnclick="testclearTimeout()">		
	<input type = "button" value="弹窗" οnclick="testAlert()">
	<input type = "button" value="选择提示框" οnclick="testConfirm()">
	<input type = "button" value="输入校验框" οnclick="testPrompt()">
	
</body>
</html>

结果展示：

点击打开链接