`
HotStrong
  • 浏览: 509576 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JavaScript 第一章 基本语法 1~3节

阅读更多

进入 JavaScript 第一章 基本语法 4~7节

 

JavaScript 第一章 基本语法 1~3节

 

1 、为什么学习 JavaScript

通常在表单验证与处理页面动态效果方面使用 JavaScript

      应用场景 1 (注册页面的输入验证):

     

      应用场景 2 (图片无缝滚动效果):

     

      应用场景 3 (内容切换效果):

     

 

2 JavaScript 是什么?

2.1 )先看看 JavaScript 代码的 基本结构(初次体会),如下:

 

<html>

<head>

<title> 脚本的基本结构 </title>

<!-- JavaScript 代码写在 head 标签下的 script 标签内 -->

<script language= " javascript " >

    var number = 3; // 定义一个变量 number

      // 输出内容到页面

      document.write( " 这是使用 JavaScritp 输出的内容! " );

      // 循环输出内容到页面

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

         document.write( " <strong> 欢迎使用 JavaScript</strong> " );

 }

</script>

</head>

<body>

……

</body>

</html>

请打开记事本(强烈推荐初学者在最初的学习过程中使用记事本等纯文本编辑工具编写代码,这是训练基本功的一种非常好的方法哦)编写以上代码并保存为 html 文件执行

 

从以上代码我们可以总结出 JavaScript 脚本的基本结构:

<script language= javascript >

      <!-- 这里加 html 注释,不支持 JavaScript 的浏览器会忽略注释中的代码

           这里写 JavaScript 代码

      -->

</script>

 

2.2 )再讲讲 JS 执行原理:

当浏览器打开 html 页面时,页面中的 HTML 标签和 JavaScript 代码将由浏览器来解析(理解)并执行,执行顺序是从上到下顺序执行

    

3 、掌握 JavaScript 的基本语法 :

3.1 )想想上面的那段代码,是不是与 Java 语言有很多类似的地方,比如:

变量、输出语句、 for 循环、代码注释等等,我们将从以下 5 个方面学习 JS 的基本语法:

 

     3.3 JavaScript 提供了 4 种基本数据类型

            数值型 ( 整数、小数 )

            字符串 ( ' 字符串 ' 字符串 表示 )

            布尔型 (true false)

            空值 (null)

     

     3.4 )变量的声明

JavaScript 采用弱类型 ,变量定义不区分类型,统一用 var 声明 或者不声明直接使用,如下:

声明变量的语法: var 合法变量名 ;

            情况 1 ,使用 var 声明变量:

                 var count = 100;// 整数变量

                 var name = 张三 ;// 字符串变量

                 var flag = true;// 布尔型变量

                 var obj = null;// 对象

           情况 2 ,不使用 var 直接声明变量 ( 这种方式容易出错不推荐使用 )

                 count = 100;

                 name = " 张三 ";

 

         JavaScript 的变量命名规范:

            第一个字符只能是英文字母、美元符号 "$" 、下划线 "_"

           其余字符可以是英文字母、美元符号 "$" 、下划线 "_" 、数字

           不能使用 JavaScript 中已定义的关键字,比如: new for var true

           注意:尽量使用骆驼命名法与 Java 编码风格保持一致

     

      3.5 JavaScript 中的运算符

          1. 算术运算符

=======================================

运算符     运算符说明     示例       示例说明

               +            加法                x + y     如果 x 为整数 2,y 为整数 5, x+y 等于 7

                                                              如果 x 为字符串 ”text1”, y 为字符串 ”fun”,

                                                              x + y 则等于 ”text1fun”

               -             减法                x - y      

               *            乘法                x * y      

               /             除法                x / y      

               %           相除求余数       x % y     如果 x 等于 10, y 等于 3, x%y 结果等于 1

               ++          递增                x++        如果 x 等于 10, x++ 等于 11

               --            递减                y--         如果 y 等于 10, y-- 等于 9

=======================================

 

2.关系运算符

=======================================

运算符    运算符说明       示例        示例说明

               ==         等于                 x == y    如果 x 等于 2, y 等于 2, x==y

               ===       全等于 ,            x===y    如果 x 等于整数 2, y 为字符串 ”2”,

                            值相等 ,                         x===y 不成立

数据类型也相等              

                                  

               >           大于                x > y     

               >=         大于等于           x >= y   

               <           小于                x < y     

               <=         小于等于           x <= y   

               !=          不等于              x != y    

               !==        不全等于           x !== y  

=======================================

 

3.逻辑运算符

=======================================

运算符      运算符说明      示例                       示例说明

               &&          (and)          x < 10 && y > 1  

               !             (not)          !(x==y) 

               ||            (or)            x==8 || y==8

=======================================

 

4.赋值运算符

=======================================

运算符     运算符说明      示例       示例说明

                          赋值                x = 5      将整数 5 这个值赋给变量 x

=======================================

注意:请注意赋值 (=) 和等于 (==) 的区别

 

5.运算符优先级

下表按从最高到最低的优先级列出 JavaScript 运算符,

具有相同优先级的运算符按从左至右的顺序求值

=======================================

运算符                                               描述

               . [] ()                                                字段访问、数组下标、函数调用以及表达式分组

               ++ -- - ~ ! delete new typeof void   一元运算符、返回数据类型、对象创建、未定义值

               * / %                                                乘法、除法、取模

               + - +                                                加法、减法、字符串连接

               << >> >>>                                      移位

               < <= > >= instanceof                      小于、小于等于、大于、大于等于、 instanceof

               == != === !==                                等于、不等于、严格相等、非严格相等

               &                                                      按位与

               ^                                                      按位异或

               |                                                       按位或

               &&                                                    逻辑与

               ||                                                      逻辑或

               ?:                                                     条件

               = oP=                                               赋值、运算赋值

               ,                                                       多重求值

=======================================

 

      3.6 )逻辑控制语句, Java 等语言的语法基本一致

条件语句 语法:

if( 表达式 ){

                      JavaScript 语句 ;

}else{

      JavaScript 语句 ;

}

          

              swith( 表达式 ){

                    case 常量值 1:

                          JavaScript 语句 ;

                    case 常量值 2:

                          JavaScript 语句 ;

                    ......

                    default:

                          JavaScript 语句 ;

}

 

 

           for 循环语句 语法:

              for( 初始化 ; 条件 ; 增量或减量 ){

                      JavaScript 语句 ;

}

          

           while 循环语句 语法:

              while( 条件表达式 ){

                      JavaScript 语句 ;

}

 

      3.7 )注释

           单行注释,以 ”//” 开头,如: // 这里写注释

           多行注释,以 ”/*” 开头,以 ”*/” 结尾,如:

                 /*

                   这里写注释

                 */

 

      3.8 )类型转换:

           情况 1 ,将字符串转换为整数:

                 parseInt("69"); // 将字符串 "69" 转换为整数 69

           情况 2 ,将字符串转换为浮点数:

                 parseFloat("18.68"); // 将字符串 "18.68" 转换为浮点数 18.68

           情况 3 ,转换数字与其他字符的混合字符串:

                 parseFloat("69.96abcd"); // 转换后为浮点数 69.96

           情况 4 ,转换非数字字符串 :

                 parseInt("abcd69"); // 返回 "NaN" 表示非数字

           情况 5 , 验证字符串是否是数字 , 使用系统函数 isNaN(" 数字字符串 ")

                 isNaN("abcd"); // 返回  true 表示不是数字

                 isNaN("200"); // 返回 false 表示是数字  

 

进入 JavaScript 基本语法 4~7节

 

 

3
0
分享到:
评论

相关推荐

    第一章 JavaScript基础语法

    1. JavaScript 的核心定义:主要定义 JavaScript 语言的语法,包括变量、数据类型、运算、语句等 2. 原生对象和内置对象:相当于 Java 语言里的 API,原生对象是 JavaScript 语言核心部分的 API,内置对象是 ECMA ...

    JavaScript第1章的所有答案

    这个名为“JavaScript第1章的所有答案”的压缩包文件显然是一个学习资源,包含了解答JavaScript第一章节所有习题、实验和理论问题的答案。这为初学者提供了一个宝贵的自我检查和学习平台,帮助他们更好地理解和掌握...

    JS的基本语法

    9. **JS_chp1课堂案例**:这部分内容可能包含了一些课堂上的实际示例,帮助学生理解和应用第一章学到的JS基础概念。 通过这些课件,初学者可以系统地学习和掌握JavaScript的基本语法,并通过实例加深理解,为进一步...

    【第九章】JavaScript【ECMAScript语法基础】

    JavaScript函数是第一类对象,可以赋值给变量、作为参数传递和返回。函数定义有两种方式:函数声明和函数表达式。作用域决定变量在哪里可见,全局变量在整个脚本中都可用,而局部变量只在函数内部有效。ES6引入了...

    accp5.0JavaScript第五章上机答案

    本“accp5.0JavaScript第五章上机答案”应当包含了上述知识点的具体实践和解答,帮助学员巩固理论知识,提高动手能力。通过解决上机题目,学员能够更好地理解和运用JavaScript,为后续的Web开发打下坚实基础。

    JavaScript第一章示例代码1.rar

    这个名为"JavaScript第一章示例代码1.rar"的压缩包很可能是为了教学或学习目的而准备的,包含了与JavaScript第一章相关的实践代码示例。在这个章节中,我们通常会接触到JavaScript的基础知识,包括但不限于变量、...

    JavaScript第2章的答案

    本资源"JavaScript第2章的答案"聚焦于这一编程语言的第二章内容,旨在帮助学习者深入理解和掌握JavaScript的基本概念和语法。 首先,JavaScript第二章通常涵盖的基础内容可能包括变量、数据类型和操作符。变量是...

    S2-3使用JavaScript增强交互效果第一章到第三章课件及课后作业答案

    在“S2-3使用JavaScript增强交互效果第一章到第三章”的课程中,我们深入探讨了如何利用JavaScript来提升用户的在线体验。 第一章:JavaScript基础 在这个章节,我们将学习JavaScript的基本语法,包括变量声明、...

    JavaScript第四章的答案

    总的来说,"JavaScript第四章的答案"涵盖了从基本语法到高级概念的广泛内容。这份资料详尽地解答了这一章可能出现的所有问题,无论你是初学者还是有一定经验的开发者,都会从中受益匪浅。务必仔细研读并实践,这将对...

    accp 5.0 s2 javascript 第六章

    在"accp 5.0 s2 javascript 第六章"的学习中,我们聚焦于JavaScript这一强大的编程语言,特别是在上机阶段。JavaScript是互联网应用开发的关键技术,尤其在网页动态交互方面有着不可替代的作用。本章的内容可能包括...

    JavaScript简明语法教程

    #### 第一章 简介 - **JavaScript的特点**:JavaScript是一种弱类型的编程语言,这意味着在定义变量时无需指定其类型,使用`var`关键字即可创建变量。此外,JavaScript是区分大小写的,因此`a`与`A`、`valueof`与`...

    js2阶段的js第一章课后习题答案

    本压缩包文件“js2阶段的js第一章课后习题答案”是针对JavaScript学习者的一个资源,特别是那些正在进行js2阶段学习的学员。这个章节通常涵盖JavaScript的基础概念,包括语法、变量、数据类型、操作符、流程控制以及...

    21天学通JavaScript PDF 第一部分 1~18章

    在"21天学通JavaScript"这本书的第一部分中,涵盖了从基础到进阶的JavaScript知识,包括但不限于以下内容: 1. **JavaScript简介**:介绍JavaScript的历史、作用以及在网页开发中的地位,解释它是如何运行在浏览器...

    JavaScript 语言基础知识点总结(思维导图)

    JavaScript 中函数是第一类对象,可以赋值给变量、作为参数传递或作为其他函数的返回值。函数声明使用 `function` 关键字,ES6 中引入了箭头函数(=&gt;)的简洁语法。 5. 对象: 对象是键值对的集合,通过花括号 `{...

    javascript第1章PPT

    学习JavaScript第1章的内容是迈向Web开发的第一步,这些基础知识将为你打下坚实的基础,使你能够逐步掌握更高级的概念,如异步编程、模块化、Promise、ES6新特性等。通过深入学习和实践,你可以成为一名熟练的...

    javascript教案 JavaScript基础

    第一章 概述 4 1.1 JavaScript的由来 4 1.2 什么是JavaScript 4 1.3 JavaScript的特点 4 1.3.1 javascript的优点 5 1.3.2 javascript的局限性 5 1.4 Java 与 JavaScript 有什么不同 5 第二章 语法...

    JavaScript电子教案1-12章

    这一章通常会介绍JavaScript的历史、用途以及它在浏览器中的运行方式。还会讲解如何在HTML文件中插入JavaScript代码,通过`&lt;script&gt;`标签来实现。同时,会介绍基本的数据类型(如字符串、数字和布尔值)以及变量的...

    JavaScript第十章完整案例

    总的来说,"JavaScript第十章完整案例"是一个全面锻炼JavaScript技能的实践平台,涵盖了从基础语法到高级特性的广泛内容,同时也提供了实际项目经验,对于提升开发者解决问题的能力和理解Web开发的整体流程有着重要...

Global site tag (gtag.js) - Google Analytics