js basic knowledge-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

js basic knowledge

hzc

Jun 08, 2020 pm 04:26 PM

javascript

Basic concepts of js

Local variables and global variables of js

js basic knowledge

js The data type

var is a weak data type, but js can recognize its data type

<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript">
   function abc(){
    var a=1;
    var b="张三";
    var c=true;
    var d=new Date();
     
    alert("a的数据类型："+typeof(a));
    alert("b的数据类型："+typeof(b));
    alert("c的数据类型："+typeof(c));
    alert("d的数据类型："+typeof(d));
   }
  </script>
 </head>
 <body>
  <input type="button" name="" id="" value="js的数据类型" onclick="abc()"/>
 </body>

Copy after login

About js methods

Writing of methods

<script type="text/javascript">
  function test(){
   console.log("不传参数");
  }
  function test1(a){
   console.log("传1个参数"+a);
  }
  function test2(a,b){
   console.log("传2个参数：" +a+"第二个参数:"+b);
  }
  function abc(a){
   console.log("这是在abc的方法的值："+a);
   return a;
  }
  function test3(a){
   var m=abc(a);
   console.log("调用了别人的返回值的方法"+m)
  }
   
 </script>
 <body>
  <input type="button" name="" id="" value="不传参数的按钮" onclick="test()" /><br />
  <input type="button" name="" id="" value="传1个参数" onclick="test1(12)" /><br />
  <input type="button" name="" id="" value="传2个参数" onclick="test2(1,&#39;张三&#39;)" /><br />
  <input type="button" name="" id="" value="调用了一个有返回值的按钮" onclick="test3(&#39;张三&#39;)" /><br />
 </body>

Copy after login

Method coverage

Unlike Java, there is no duplication of methods in js Load, only method override

as long as the method name is the same. No matter how many parameters there are, js will only recognize the last method (method override)

<head>
  <meta charset="utf-8">
  <title></title>
   
  <script type="text/javascript">
   function abc(a){
    //var name=&#39;张三&#39;;//在方法体内部的局部变量，只能自己用
    alert(&#39;这是第一个方法&#39;+a);
   }
    
   function abc(){
    alert(&#39;这是第二个方法&#39;);
   }
    
   function abc(){
    alert(&#39;这是真的&#39;);
   }
  </script>
 </head>
  
 <body>
  <!-- js中不会重载，只有方法覆盖啊 -->
  <input type="button"  value="方法重载和多态" onclick="abc(44)"/> 
  <!-- 输出：这是真的 -->
 </body>

Copy after login

js data type conversion

Although js only A var is used to describe a variable (weak data type), but the system can identify its data type and can also perform data type conversion

<script type="text/javascript">
  function test(){
   var x=&#39;12.3&#39;;
   console.log("x的数据类型是："+typeof(x));
   var m=parseInt(x);
   console.log("x转换后的数据类型是："+typeof(m)+"值是："+m);
    
   var y=&#39;12.111&#39;;
   console.log("y的数据类型是："+typeof(x));
   var m1=parseFloat(y);
   console.log("y转换后的数据类型是："+typeof(m1)+"值是："+m1);
    
   var z=&#39;3*4&#39;;
   console.log("z的数据类型是："+typeof(z)+"z的值是："+z);
   var m2=eval(z);
   console.log("z计算后的数据类型是："+typeof(m2)+"值是："+m2);
    
   var l=true;
   console.log("l的数据类型是："+typeof(l)+"l的值是："+l);
   var m3=l.toString();
   console.log("l转换后的数据类型是："+typeof(m3)+"值是："+m3);
  }
 </script>
 <body>
  <input type="button" name="" id="" value="数据类型的转换"  onclick="test()"/>
  </body>

Copy after login

Operation calculations in js

The operation rules of js are the same as Java (but special attention: x= y)

function abc(){
    var a=&#39;10&#39;;
    var b=&#39;8&#39;;
    console.log("b的值 "+b+"  b的数据类型转换成 "+typeof(b)+"  "+a)
    /* =+ a先转换成number 再给a的值复制给b */
    /* += 等价与 b+=a == b=b+a */
   }

Copy after login

js basic knowledge

Select statement and loop statement

Omitted: Same as java

js main object

window object

Time intervaler

<script type="text/javascript">
   function test(){  
    console.log(&#39;test方法开始执行了&#39;);
    /* 参数： 执行的方法， 等待的时间（毫秒单位） */
    window.setTimeout("hello()",1000);
   }
   function hello(){
    console.log(&#39;hello&#39;);
   }
   function test1(){
    console.log(&#39;test1方法开始执行了&#39;);
    window.setInterval("hello()",1000);
   }
  </script>
 </head>
 <body>
  <input type="button" value="等待一定时间,再执行" onclick="test()" /><br />
  <input type="button" name="" id="" value="每间隔一定时间,反复执行" onclick="test1()"/>
 </body>

Copy after login

js basic knowledge

Use of array

<script type="text/javascript">
  function test(){
   /* 第一种声明方式 */
   var a=[1,2,3,4,5,6,7,8,9];
   for (var i = 0; i < a.length; i++) {
    console.log("当前数组的角标："+i+"当前的值："+a[i]);
   }
  }
  function test1(){
   /* 第二种声明方式 */
   var a=new Array();
   a[0]=[1,2,3];
   a[1]=[&#39;张三&#39;,&#39;李四&#39;,&#39;王五&#39;];
   a[2]=[2,5,1,3,6];
   for (var i = 0; i < a.length; i++) {
    for (var j = 0; j < a[i].length; j++) {
     console.log("当前数组的角标："+i+", "+j+"当前位置的值："+a[i][j]);
    }
   }
  }
  function test2(){
   /* join(分隔符) 将数组元素中加分割符号后串接并返回一个字符串 */
   var a=[1,3,2,9,7,8,5];
   console.log(a.join("*"));
   /* reverse() 将数组元素按照原先相反位置存放 */
   console.log("数组的取反："+a.reverse());
   /* slice(始[,终) 返回一个子数组  （前包后不包)*/
   console.log(a.slice(1,4));
   /* sort() 按照字母排序 */
   console.log(a.sort());
  }
 </script>
 <body>
  <input type="button"  value="一维数组的遍历" onclick="test()"/>
  <input type="button"  value="二维数组的遍历" onclick="test1()"/>
  <input type="button"  value="数组的操作" onclick="test2()"/>
 </body>

Copy after login

js basic knowledge

Basic operations on strings

<script type="text/javascript">
  function test(){
   var a="hello world";
   var index_a=a.indexOf("o");//第一个字母的位置
   var index_b=a.indexOf("p");//没有就返回-1
   console.log("o的角标位置："+index_a);
   /* 字符截取（前包后不包） */
   var new_a=a.substring(1,3);
   console.log(new_a);
   /* 根据特定字符，格式化字符串 */
   var ip=&#39;192.168.0.1&#39;;
   var ip_array=ip.split(".");
   for (var i = 0; i < ip_array.length; i++) {
    console.log(ip_array[i]);
   }
   /* 大小写转换 */
   var b=&#39;abc&#39;;
   console.log(b.toUpperCase());
   var c=&#39;ABC&#39;;
   console.log(c.toLowerCase());
  }
 </script>
 <body>
  <input type="button" value="字符串处理" onclick="test()"/>
 </body>

Copy after login

js basic knowledge

Formatting of js time

<script src="../js/dateFormat.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  function test(){
   var date=new Date();
   console.log(date);
   //方法1：引入控件
   var sdate=date.format(&#39;yyyy-MM-dd&#39;);
   var stime=date.format(&#39;yyyy-MM-dd HH:mm:ss&#39;)
   console.log(sdate);
   console.log(stime);
    
   //方法2：
   var y=date.getFullYear();//年
   var mon=date.getMonth()+1;//月
   var d=date.getDate();//日
   var h=date.getHours();//时
   var m=date.getMinutes();//分
   var s=date.getSeconds();//秒
   var weeks=date.getDay();
   var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
   console.log(y+"年 "+mon+"月 "+d+"日  "+h+":"+m+":"+s+"  "+weekday[weeks])
  }
 </script>
 <body>
  <input type="button" value="日期处理" onclick="test()" />
 </body>

Copy after login

js basic knowledge

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7530

CakePHP Tutorial

1378

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

How to use insertBefore in javascript Nov 24, 2023 am 11:56 AM

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

JavaScript and WebSocket: Building an efficient real-time image processing system Dec 17, 2023 am 08:41 AM

JavaScript is a programming language widely used in web development, while WebSocket is a network protocol used for real-time communication. Combining the powerful functions of the two, we can create an efficient real-time image processing system. This article will introduce how to implement this system using JavaScript and WebSocket, and provide specific code examples. First, we need to clarify the requirements and goals of the real-time image processing system. Suppose we have a camera device that can collect real-time image data

See all articles

js basic knowledge

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics