Home > Article > Web Front-end > Related explanations about JavaScript basics

Related explanations about JavaScript basics

jackloveOriginal: 2018-06-20 15:37:351830browse

Variable and data type issues in JavaScript:

About variable definitions in JavaScript:

var variable name = value; In js, var can be used to define variables of any data type and can be omitted, but it is not recommended; Because JavaScript is a weakly typed language, and Java is a strongly typed language;

3> If a variable has no value (undefined), the undefined variable cannot be used directly; They are all number type (lowercase);
3>

<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>

Data conversion function:
String----Integer of type number
parseInt (variable);

STIRNG ---- Number Type of Number Parsefloat (variable);
Example:

Operators in JavaScript:
Arithmetic operators: (addition), - (subtraction), * (multiplication), / (division); Comparison operators: > ;=, 6ccbb8b0f4c668de47d964671fff91b7 . . . ; Logical operators: && (logical double AND), || (logical double OR), ! (logical NOT);

Ternary operation Symbol: expression? The result of true: the result of false;

Note:

In JavaScript, true represents 1 and false represents 0;

Example:

<script type="text/javascript">
	//定义一个变量
	var a = "10" ; //string :里面的值10
	document.write("转换前a的数据类型是:"+typeof(a)+"<br/>") ;
	
	//转换
	a = parseInt(a) ;
	document.write("转换后a的数据类型是:"+typeof(a)+",值是:"+a) ;
	
	document.write("<hr/>") ;
	
	var b = "3.14" ;
	document.write("转换前b的数据类型是:"+typeof(b)+"<br/>");
		
	//转换
	b = parseFloat(b) ;
	document.write("转换后b的数据类型是:"+typeof(b)+",值是:"+b+"<br/") ;
	
</script>

Process statement:

if statement:

Format:

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='center'>") ; 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>  <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命令创建随机密码

The above is the detailed content of Related explanations about JavaScript basics. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Build React+Webpack desktop application using Electron (detailed tutorial)Next article：Build React+Webpack desktop application using Electron (detailed tutorial)

See more

Related explanations about JavaScript basics

Variable and data type issues in JavaScript:

In JavaScript, true represents 1 and false represents 0;

JavaScript中的循环语句：

wIth语句：

for-in语句：

函数：

String对象：

Number对象：

Math对象：

Date对象：

Related articles