Understand JavaScript basics (very detailed)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Understand JavaScript basics (very detailed)

coldplay.xixi

Feb 24, 2021 am 10:23 AM

Understand JavaScript basics (very detailed)

Free learning recommendation: javascript video tutorial

##What isJavaScript

##JavaScript is a scripting language that is object- and event-driven and has security features. It has been widely used in Web application development. It is often used to add various dynamic functions to web pages and provide users with Smoother and more beautiful browsing effect. Usually JavaScript scripts realize their functions by embedding them in HTML. JavaScript

Features is an interpretive script Language (the code is not precompiled).

is mainly used to add interactive behaviors to HTML (an application under Standard Universal Markup Language) pages.
can be directly embedded in HTML pages, but writing it as a separate js file is beneficial to the separation of structure and behavior.
Cross-platform features, with the support of most browsers, can run on multiple platforms (such as Windows, Linux, Mac, Android, iOS, etc.).

Composed

Daily uses of JavaScript

Embed dynamic text into HTML pages.

Respond to browser events.
Read and write HTML elements.
Validate data before it is submitted to the server.
Detect the visitor’s browser information.
Control cookies, including creation and modification.
Server-side programming based on Node.js technology.

<script type="text/javascript">
    <!—
          JavaScript 语句;
    —>
</script >

Example:

……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
    document.write("初学JavaScript");
    document.write("<h1 id="Hello-JavaScript">Hello，JavaScript</h1>");
</script>
</body>
</html>

JavaScript

Execution principle

## Method1.Use<script> </script>

Tags2.ExternalJS

File

<script src="export.js"  type="text/javascript"></script>

3. Directly in HTML

tag

<input name="btn" type="button" value="弹出消息框"   
   onclick="javascript:alert(&#39;欢迎你&#39;);"/>

JavaScript

Core syntax:

1. Variable

①Declare the variable first and then assign the value

var width;

width = 5;

var - Keywords used to declare variables

width -Variable name

② Declare and assign variables at the same time

var catName= "Pipi";

var x, y, z = 10;

③Direct assignment without declaration [generally not used]

width=5;

Variables can be passed through Declare and use it directly, but this method is error-prone and difficult to find and troubleshoot, so it is not recommended.

2. Data type

①undefined: Example: var width;

The variable width has no initial value, Will be assigned the value undefined

②null: represents a null value, which is equal to the undefined value

###③number:######var iNum=23; //Integer###

var iNum=23.0; //浮点数

④Boolean：true和false 但是JS会把他们解析成1；0

⑤String：一组被引号（单引号或双引号）括起来的文本 var string1="This is a string";

3. typeof运算符

typeof检测变量的返回值；typeof运算符返回值如下：

①undefined：变量被声明后，但未被赋值.

②string：用单引号或双引号来声明的字符串。

③boolean：true或false。

④number：整数或浮点数。

⑤object：javascript中的对象、数组和null。

4. String对象

①属性：

字符串对象.length

var str="this is JavaScript";
var strLength=str.length;      //长度是18

②方法：

字符串对象.方法名();

split(str)：如果语法写成width.split(" ")【冒号中间有空格】此时：width height hello world会被拆分成：width,height,hello,world；如果语法写成width.split("")【冒号中间没有空格】此时：width height hello world会被拆分成：w,i,d,t,h, ,h,e,i,g,h,t, ,h,e,l,l,o, ,w,o,r,l,d

5. 数组：

①创建数组：

②为数组元素赋值：

方法一：

var fruit= new Array("apple", "orange", " peach","banana");

方法二：

var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";

③访问数组：

数组名[下标]

6. 数组的常用属性和方法：

7. 运算符号

8. 逻辑控制语句

①if条件语句

if(条件)

{  //JavaScript代码;  }

else

{  //JavaScript代码;  }

If·中0，null，” ”，undefined，NaN，false--------结果是false；其他的都是true！

②switch多分支语句

switch (表达式)

{  case 常量1 :

      JavaScript语句1;

  break;

   case 常量2 :

        JavaScript语句2;

  break;

default :

      JavaScript语句3;  }

③for、while循环语句

for(初始化;  条件;  增量)

 {  JavaScript代码;  }

while(条件)

 {  JavaScript代码;  }

④for-in

var fruit=[ "apple", "orange", "peach","banana"];

for(var i in fruit){

   document.write(fruit[i]+"<br/>");  }

i就是数组的下标，in这个数组要查询所有的数组下标

9. 循环中断

①break

<script type="text/javascript">

var i=0;

for(i=0;i<=5;i++){

if(i==3){  break;  }

  document.write("这个数字是："+i+"<br/>");  }

</script>

②continue

<script type="text/javascript">

var i=0;

for(i=0;i<=5;i++){

if(i==3){  continue;  }

  document.write("这个数字是："+i+"<br/>");  }

</script>

10. 注释

①单行注释以 // 开始，以行末结束：

//alert("恭喜你！注册会员成功");

//在页同上弹出注册会员成功的提示框

//注释

如果在页面里单行注释中回车打一些东西此时就会报错：Uncaught ReferenceError: XXXX is not defined

②多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示中间的语句是该程序中的注释

/* 使用for循环运行“document.write("

Hello World

");”5次

使用document.write在页面上输出“Hello World” */

11. 常用的输入/输出

【输出一般使用alert；输入使用prompt；但是后期不建议使用alert，在真实的开发中一般使用console.Log( )】

①alert()【一般用在一些警告或者提示中】：

alert("提示信息");

②prompt()

prompt("提示信息", "输入框的默认信息");

prompt("请输入你喜欢的颜色","红色");

prompt("请输入你喜欢的颜色","");

12. 语法约定

①代码区分大小写

小写写成大写会报错：Uncaught SyntaxError: Unexpected identifier

②变量、对象和函数的名称

当声明变量、对象和函数的名称时大小写，数字，下划线，美元符号都可以，但是必须以字母，下划线，美元符号开头

否则会报错：Uncaught SyntaxError: Invalid or unexpected token

③分号

如果不写会报错：Uncaught SyntaxError: Invalid or unexpected token

程序调试：

Chrome开发人员工具：

停止断点调试
单步调试，不进入函数体内部
单步调试，进入函数体内部
跳出当前函数
禁用所有的断点，不做任何调试

alert()方法：

直接打印信息，直接在页面上看到具体信息

【但是一般使用console.Log( )，因为使用alert( )很容易忘掉删除，当使用alert( )进行弹出时，最后产品上线后，会降低用户体验，所以使用console.Log( )就会避免这个问题】

函数：

什么是函数？

函数的含义：类似于Java中的方法，是完成特定任务的代码语句块；使用更简单：不用定义属于某个类，直接使用；函数分类：系统函数和自定义函数

常用系统函数：

parseInt ("字符串")：将字符串转换为整型数字

如: parseInt ("86")将字符串“86“转换为整型值86

当为parseInt ("86a")时输出还是86

当为parseInt ("86a21")时输出还是86

当为parseInt ("a86a")时输出NaN

parseFloat("字符串")：将字符串转换为浮点型数字

如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45

isNaN( )：用于检查其参数是否是非数字

isNaN("111")会输出false

isNaN(true)会输出false

isNaN("true")会输出true

isNaN("aaa")会输出true

isNaN("111a")会输出true

自定义函数

1.定义函数

2.调用函数

函数调用一般和表单元素的事件一起使用，调用格式

事件名＝ "函数名( )" ;

一、调用无参函数

调用无参函数，输出5次“欢迎学习JavaScript”

示例：

function study( ){
        for(var i=0;i<5;i++){
            document.write("<h4 id="欢迎学习JavaScript">欢迎学习JavaScript</h4>");
        }
    }

单击此按钮时，调用函数study( )，执行函数体中的代码

<input name="btn" type="button"
   value="显示5次欢迎学习JavaScript"  onclick="study( )" />

二、调用有参函数

根据输入的次数，显示“欢迎学习JavaScript“

示例：

function study(count){
        for(var i=0;i<count;i++){
            document.write("<h4 id="欢迎学习JavaScript">欢迎学习JavaScript</h4>");
        }
    }

单击此按钮时，调用函数study (count )，执行函数体中的代码

<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
  onclick="study(prompt(&#39;请输入显示欢迎学习JavaScript的次数:&#39;,&#39;&#39;))" />

变量的作用域:

全局变量
局部变量

<body onload="second( )">

    var i=20;    【这是一个全局变量】

    function first( ){

        var i=5;    【这是一个局部变量】

        for(var j=0;j<i;j++){

            document.write("    "+j);  }  }

    function second( ){

        var t=prompt("输入一个数","")

        if(t>i)     【此时t和全局变量i作比较】

            document.write(t);

        else

            document.write(i);

        first( );  }

事件

相关免费学习推荐：javascript（视频）

The above is the detailed content of Understand JavaScript basics (very detailed). For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:CSDN. If there is any infringement, please contact admin@php.cn delete

Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AM

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

10 Mobile Cheat Sheets for Mobile DevelopmentMar 05, 2025 am 12:43 AM

This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig

Improve Your jQuery Knowledge with the Source ViewerMar 05, 2025 am 12:54 AM

jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI

10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AM

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the

See all articles