検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript の基本に関する関連説明

JavaScript の基本に関する関連説明

jacklove
jackloveオリジナル
2018-06-20 15:37:351874ブラウズ

注意:

JS では、VAR を次の目的で使用できます。 2 & GT; 任意のデータ型変数を定義します。省略できますが、省略することはお勧めできません。 VAR は、JavaScript の弱い型言語、JavaScript の弱い型言語、JavaScript の弱い型言語、JavaScript の弱い型言語、JavaScript の弱い型言語であるため、変数を繰り返すことができます (その後ろの値が対象になります)。
3>

変数に値がない場合 (未定義)、未定義の変数は直接使用できません。

1>

整数型または 10 進数型は数値型です。 2 & gt; 整数か小数かは数値型 (小文字) 

<script type="text/javascript">
		
	//定义变量
	var a = 10 ;
	
	//重复定义
	//var a  ;
	
	var b = 12.34 ;
	var c = &#39;a&#39; ;
	var d = "hello" ;
	var e = true ; 
	var f = new Object() ;
	
	//输出变量
	document.write("a的值是:"+a+",a的数据类型是:"+typeof(a)+"<br/>") ;
	document.write("b的值是:"+b+",b的数据类型是:"+typeof(b)+"<br/>") ;
	document.write("c的值是:"+c+",c的数据类型是:"+typeof(c)+"<br/>") ;
	document.write("d的值是:"+d+",d的数据类型是:"+typeof(d)+"<br/>") ;
	document.write("e的值是:"+e+",e的数据类型是:"+typeof(e)+"<br/>") ;
	document.write("f的值是:"+f+",f的数据类型是:"+typeof(f)+"<br/>") ;
</script>
データ変換関数:

数値型の整数parseint（変数）;加算)、- (減算)、/ (除算)

比較演算子: >=、f539a70d3ea090bac4faa80192f58ccc || (論理二重 OR)、! (論理 NOT); 3 項演算子: 式? true の結果: false の結果:
JavaScript では true は 1 を表し、false は 0 を表します。 if ステートメント: 形式:

                        if(表达式){
                                语句1；
                        } else {
                                语句2；
                        }
                表达式的类型：
                        1> 如果是numbler类型,(整数类型,小数),0表示条件不成立；
                        2> 如果是string类型,要么字符要么字符串,必须有数据,如果是空串,条件不成立；
                        3> 如果是boolean类型，true成立，false不成立；
                        4> 如果是object类型，必须有对象，才成立，为null不成立；

        switch语句：
                格式：
                        和Java相同；
                和Java的区别：
                        1> js中的case后面也可以跟常量,还可以跟变量,还可以跟表达式；
                        2> java中case后面只能跟常量；

                举例：

<script type="text/javascript">
        //case后面跟表达式
        var age = 25 ;
        switch(true){
            case age >=18 :
                document.write("你是成年人...") ;
                break;
            case age<18 :
                document.write("你是未成年人呢...") ;
                break ;
        }

        document.write("<hr/>");

        var i = "b" ;  //和Java语言一样,case后面可以常量,
        var b = "b" ;
        switch(i){
            case "a" :
                document.write("a") ;
                break ;
            case b :
                document.write("b") ;
                break ;
            case "c" :
                document.write("c") ;
                break ;
            case "d":
                document.write("d") ;
                break ;
        }
</script>

JavaScript中的循环语句：

        如：do-while，for，while 循环语句与java中的循环语法结构相同；

        练习：

<script type="text/javascript">
	
	//显示"*"形,第一行有一个...
	for(var i = 0 ; i<5; i++){//外层循环控制行数
		for(var j= 0 ; j<=i; j ++){//内层循环控制列数
			document.write("* ") ; //  空格 转义字符
			
		}
		document.write("<br/>") ;
	}
	
	
	document.write("<hr/>") ;
	
	//table标签:  使用js里面嵌套表格标签
	//document.write("<table align=&#39;center&#39;>") ;
	for(var i = 1 ; i <=9 ; i++){
		//
		for(var j = 1 ; j<=i ;j++){
			document.write(i+"*"+j+"="+(i*j)+" ") ;
		}
		document.write("<br/>") ;
	}
</script>


wIth语句：

        格式：
                with(document){
                        语句；

                }

        特点：将document对象当做witch语句参数,然后直接使用它里面的write()；

        举例：

<script type="text/javascript">
	
	//with语句:格式 with(document){....}
	//将document对象当做witch语句参数,然后直接使用它里面的write() ;
	
	//with语句
	with(document){
		for(var i = 0 ; i < 5 ; i ++){
			for(var j = 0 ; j <=i ; j++){
				write("* ");
			}
			write("<br/>") ;
		}
		
		
		write("<hr/>") ;
		
		for(var i = 1 ; i <=9 ; i++){
			for(var j = 1 ; j <= i ;j++){
				write(i+"*"+j+"="+(i*j)+" ") ;
			}
			write("<br/>") ;
		}
	}
	
</script>

for-in语句：

        作用：针对数组或者对象进行遍历；
        格式：
                for(var 遍历的变量名 in 数组名称/对象名称){
                        输出变量名；
                }
        举例：

<script type="text/javascript">
    var arr = [10,20,30,40] ; //类似于Java中的静态初始化
	
	for(var i =0 ; i < arr.length; i++){
		document.write(arr[i] +" ") ;
	}
	
	document.write("<hr/>");
	
	//使用for-in语句
	for(var i in arr){
		document.write(arr[i] +" ") ;
	}
2cacc6d41bbb37262a98f745aa00fbf0

函数：

        格式：

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

                }

        函数调用：

                函数名称(实际参数列表)；

        函数中注意的问题：
                1> 函数的形式参数不能有var关键字定义，否则报错；
                2> 在js中函数是可以有return语句的，直接return，但是没有返回值；
                3> 在js中，函数是不存在的重载概念，后面定义的函数回覆盖掉前面定义的函数；
                4> 当实际参数的数量小于形式参数的数量，就会出现一个值肯定是NaN；
                      如果实际参数大于形式参数，那么最终会计算前面的值，然后将后面的数据丢弃掉；

                5> 在js的每一个函数中，里面存在默认的数组：arguments，它的作用就是将实际参数从左到右依次赋值给形式参数(从左到右)；

        举例：

<script type="text/javascript">

	//定义一个函数
	//只写参数名称
	function add(var a, var b, var c){// a =10 ,b =20 , c= 30  d =40(实际没有了,就会丢弃掉)
		
		for(var i = 0 ; i < arguments.length ; i++){
			document.write(arguments[i] +" ") ;
		}
		
		var result = a+b + c;	//NaN:None a None 没有具体结果
		//var result =10 +20 + NaN = NaN;
		document.write("result:"+result);
	}
	
	
	//调用函数
	var s = add(10,20) ;
	document.write("s:"+s) ;  //输出NaN
	
	var s1=add(10,20,30,40) ;  //输出前三项的和
        document.write("s1:"+s1);
</script>

        练习：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>函数练习</title>
		<!--
			如果大月，显示“该月有31天”
			如果小月,显示“该月有30天”
			如果2月，显示“该月有28天“
		-->
		<script type="text/javascript">
			//定义一个函数
			function check() {

				//alert("hello") ;

				//获取用户在表单中输入的值:DOM编程  通过标签中的id来获取标签对象
				var month = document.getElementById("month").value; //通过获取到input标签对象,然后通过标签对象.value:获取表单的值

				//在js中string类型的数据和number类型的整数在进行比较(==)的时候,默认转换提升为number类型
				//使用if选择结构语句
				if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
					alert("当前月份有31天...");
				} else if(month == 4 || month == 6 || month == 9 || month == 11) {
					alert("该月份有30天");
				} else if(month == 2) {
					alert("该月份有28天");
				} else {
					alert("没有该月份");
				}

			}
		</script>
	</head>

	<body>
		请您输入要查询的月份:<input type="text" id="month" /><input type="button" value="查询" onclick="check()" />
		<!-- 绑定单击点击事件-->
	</body>

</html>

String对象：

        表现形式：
                方式1：String str = new String() ;
                        例：var str1 = new String("hello") ;
                方式2：var str = "字符串";
                        例：var str = "hello" ;

                注意：在js中valueOf()：默认比较的是他们的内容是否相同；

        常用方法：
                chatAt()：返回指定索引位置处的字符；
                indexOf()：表示某个子字符串在当前字符串中第一次出现的索引；
                lastindexOf()：表示墨云歌字符串在当前字符串中最后一次出现的索引；
                fontColor()：给当前字符串设置一个颜色标记；
                substring(start,end)：截取功能(从索引start开始到索引end之前结束)；

                substr(start,length)：截取功能(从索引start开始，读取长度为length个字符)；

        举例：

<script type="text/javascript">

        var str = "hellojava" ;	

	document.write(str.charAt(4)+"<br/>") ;
	document.write(str.indexOf("a")+"<br/>");
	document.write(str.lastIndexOf("a")+"<br/>");
	document.write(str.fontcolor("#00ff00")+"<br/>") ;
	document.write(str.substring(4,9)+"<br/>") ;
	document.write(str.substr(3,4)+"<br/>") ;

</script>

Number对象：

        表现形式：
                方式1：var num1 = new Number(100) ;
                方式2：var num1 = 100 ;

                注意：在js中valueOf()：默认比较的是他们的内容是否相同；


Math对象：

        举例：

<script type="text/javascript">
	//向上取整	//在整数位置+1
	var num = 4.30 ;	
	document.write(Math.ceil(num)+"<br/>");
	//向下取整 :如果有小数部分,将小数部分去除掉,保留整数位
	document.write(Math.floor(num)+"<br/>");
	//四舍五入  
	document.write(Math.round(num)+"<br/>");
	//获随机数  random():包含0,但是不包含1
	document.write(Math.random()*100+"<br/>") ;
	//max/min
	document.write(Math.max(num,100)) ;

</script>


Date对象：

        举例：

<script type="text/javascript">
	
	//如何创建一个Date对象	
	var date  = new Date() ;
	//alert(date) ;	//Sun Jun 17 2018 16:05:35 GMT+0800 (中国标准时间)
	
	//获取系统时间:  2018年6月17日	XXX时:xx分:xx秒		--->Java中存在一个类:SimpleDateFormat
	//getFullYear :获取年份
	document.write(date.getFullYear()+"年") ;
	
	//获取月份:getMonth 方法返回一个处于 0 到 11 之间的整数，
	document.write((date.getMonth()+1)+"月") ;
	
	//获取月份中的日期
	document.write(date.getDate()+"日"+"  ") ;
	
	//获取一天当中的小时
	document.write(date.getHours()+":") ;
	
	//获取分
	document.write(date.getSeconds()+":") ;
	
	//获取分钟的秒
	document.write(date.getMinutes()) ;

</script>

练习：简单动态时钟；

<html>
	<head>
		<meta charset="UTF-8">
		<title>网页时钟</title>
	</head>
	<body>
		当前系统时间为:<span id="dateTip"></span>
	</body>
<script type="text/javascript">

	function newDate(){
		//生成一个系统时间的格式:2018-6-17 时:分:秒
		//创建Date对象
		var date = new Date() ;
		
		//dateStr就是系统时间
		var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+
					date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
		
		//获取span标签对象,通过id获取
		var dateTip = document.getElementById("dateTip") ; //dateTip is null 
		//设置span标签的innerHTML属性:文本属性
		dateTip.innerHTML = dateStr;
	}

	//定时器
	//1)setInterval("任务",毫秒值) ; 每经过多少毫秒重复执行这个任务(函数)
	//2)timeout("任务",毫秒值) ;经过多少毫秒后执行一次这个任务
	
	window.setInterval("newDate()",1000) ;
	
</script>
</html>

本文将讲解了关于JavaScript基础的相关讲解，更多相关内容请关注php中文网。

相关推荐：

关于面向对象设计的相关讲解

php文件包含目录配置open_basedir的使用与性能分析

Linux 使用pwgen命令创建随机密码

以上がJavaScript の基本に関する関連説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Java php JavaScript 数据类型 String Boolean Object NULL 常量 运算符 算术运算符 比较运算符 逻辑运算符 三元运算符 if switch for while 面向对象 date math 字符串 循环 整数类型 Length var JS number undefined function 对象 linux
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Electron を使用して React+Webpack デスクトップ アプリケーションを構築する (詳細なチュートリアル)次の記事：Electron を使用して React+Webpack デスクトップ アプリケーションを構築する (詳細なチュートリアル)

関連記事

続きを見る