欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Javascript

程序员文章站 2022-03-08 22:55:10
...

以下内容来自易百教程



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


（部分内容）

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

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

<script>标记警告浏览器程序，开始解释这些标记之间的所有文本作为一个脚本。所以，JavaScript的语法简单如下：

<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" onclick="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" onclick="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(变量名)


Javascript




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>


结果：


Javascript


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("这里是消息的内容");
提示对话框，其中带有一条消息和一个输入框




 
 





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


这是一个小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="打开网页时钟" onclick="testOpen()">
	<input type = "button" value="5s打开一次网页时钟.html" onclick="testsetInterval()">
	<input type = "button" value="关闭5s定是打开的按钮" onclick="testclearInterval()">
	<input type = "button" value="2s后打开网页时钟" onclick="testsetTimeout()">
	<input type = "button" value="关闭2s打开网页时钟" onclick="testclearTimeout()">		
	<input type = "button" value="弹窗" onclick="testAlert()">
	<input type = "button" value="选择提示框" onclick="testConfirm()">
	<input type = "button" value="输入校验框" onclick="testPrompt()">
	
</body>
</html>


结果展示：


点击打开链接


自定义对象


    为了符合js的灵活性（


这TMD是一篇假的博客！！！写完发表后后半段直接消失了！！！！！不想补了！！！！！！！！
 
					

															

						相关标签：												
							JS						
											

															

						

							上一篇：							
								事件冒泡、事件委托和事件捕获							
						

						

							下一篇：							
								事件冒泡和事件捕获以及事件委托							
						

					

															

						

							推荐阅读