1、 JavaScript(弱类型语言):是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性能的脚本语言。

特点:1、主要用来在HTML页面中添加交互行为。

         2、是一种脚本语言,语法和Java类似。

         3、一般用于编写客户端的脚本。

         4、是一种解释性语言,边执行边解释。

2、JavaScript的组成:

组成:1、ECMAScript标准:规定了脚本语言的标准,主要描述:语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象,是一个描述,规定了语言脚本的所有属性、方法和对象的标准,在使用web客户端脚本语言编码时一定要遵守此标准;

         2、浏览器对象模型(Browser Object Model)(BOM):提供独立于内容与浏览器进行交互的对象;

         3、文档对象模型(Document Object Model)(DOM):访问和操纵HTML文档;

组成:

3、 JavaScript的基本结构:

语法:

       <script type="text/javascript">

                 JavaScript 语句;

       </script >

注:type是<scrip>标签的属性,用于指定文本使用的语言类别为text/javascript

    有的网页中默认type="text/javascript",这种写法是正确的,因为HTML5中可以省略type属性HTML5默为"text/javascript";

JavaScript:写入 HTML 输出: document.write("内容");

  注:<script>…</script>可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可;

       建议放在</body>的前面;

4、JavaScript的执行原理:

分析:★浏览器客户端向服务器发送请求:一个用户浏览器的地址输入要访问的页面(页面中包含JavaScript程序);

      ★数据处理:服务端将某个包含JavaScript的页面进行处理;

      ★发送响应:服务端将包含有JavaScript的HTML文件处理页面发送到浏览器客户端,然后由浏览器客户端从上到下逐条解析HTML标签和JavaScript,并将页面效果呈现给用户;

使用客户端脚本的好处:

     ●包含JavaScript的页面只要下载一次即可,这样能减少不必要的网络通信;

     ●JavaScript程序由浏览器客户端执行,而不是由服务器执行,因此能减轻服务器的压力;

网页中引用JavaScript的方式:

          ●内部JavaScript 文件:直接使用<script>标签将JavaScript代码加入HTML文档中;

          ●使用外部JavaScript 文件;

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

          ●直接在HTML标签中;

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

          注:alert("输出语句"),提示对话框:prompt( ”提示语句”, 给的默认值):单引号 双引号都可以

三种方式的应用场合:

      ●内部JavaScript文件适用于JavaScript特效代码量少,仅用于单个页面;

      ●外部js文件则适用于代码较多,重复应用于多个页面;

      ●直接在HTML标签中写JavaScript则适用于极少代码,仅用于当前标签,会增加代码,很少使用;

5、JavaScript核心语法:

变量(变量名区分大小写):

◆var -  用于声明变量的关键字;

      ◆变量可以不经声明而直接使用,

             但这种方法很容易出错,也很难查找排错,不推荐使用

      ●先声明变量再赋值

            eg: var   width;

                    width = 5;

      ●同时声明和赋值变量:

            eg:var catName= "皮皮";

                   var x, y, z = 10;

      ●不声明直接赋值:

            eg:width=5;

数据类型:

  • ●undefined(未定义类型):

            eg:var width;变量width没有初始值,将被赋予值undefined

  • ●null(空类型):表示一个空值,与undefined值相等
  • ●number(数值类型):

             eg:var iNum=23;   //整数

                    var iNum=23.0;   //浮点数

  • ●boolean(布尔类型):true和false;
  • ●String(字符串类型):一组被引号(单引号或双引号)括起来的文本;

              eg;var string1="This is a string";

typeof运算符:typeof检测变量的返回值:

语法:typeof(变量或值)

typeof运算符返回值如下

undefined:变量被声明后,但未被赋值

String:用单引号或双引号来声明的字符串

boolean:true或false

number:整数或浮点数

object:javascript中的对象、数组和null

运算符号:

     ===表示恒等(严格比较,数据类型不匹配就返回false);

     !==表示不恒等;

String对象:

  • ●字符串对象.length

            Eg:var str="this is JavaScript";

                  var strLength=str.length;    //长度是18

方法的调用:

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

方法名称

说      明

charAt(index)

返回在指定位置的字符

indexOf(str,index)

查找某个指定的字符串在字符串中首次出现的位置,找到返回索引值,否则返回-1

substring(index1,index2)

返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符

split(str)

将字符串分割为字符串数组

toLowerCase()

将字符串转换为大写

toUpperCase()

将字符串转换为小写

数组:

  • ●创建数组语法:

               eg: var  数组名称 = new Array(size);//Array:数组的关键字;size:表示数组中可存放的元素总数

  • ●为数组赋值:声明数组时可以为数组元素直接赋值;

             //赋值方式1:

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

            //赋值方式2:

                    eg:var fruit=new Array(1);

                             fruit[0]=”apple”;

            //赋值方式3:

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

         ●访问数组元素:

                     数组名[下标]

  ●数组的常用属性和方法:

类别

描述

属性

设置或返回数组中元素的数目

方法

把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔

对数组排序

向数组末尾添加一个或更多 元素,并返回新的长度

更多方法可查阅JavaScrpt Array对象参考手册:http://www.w3school.com.cn/js/jsref_obj_array.asp

逻辑控制语句:

if条件语句

     if(条件)

{

        //JavaScript代码;

}

else

{

        //JavaScript代码;

}

*switch多分支语句

switch (表达式){    

case 常量1 :

       //JavaScript语句1;

    break;

   case 常量2 :

      //JavaScript语句2;

     break;

      ...

   default :

       //JavaScript语句3;   

}

*for循环语句

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

 {

          JavaScript代码;
 }

*do-while循环语句

do 

 {

          JavaScript代码;

} while(条件)

*while循环语句

while(条件)

 {

          JavaScript代码;

}

*for-in循环

    语法:

        for(变量 in 对象){

             //JavaSacript语句;

          }

Eg

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

for(var i in fruit){

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

}

结果:

中断循环:

◆break:

    立刻退出整个循环;

◆continue:

   退出当前循环,

    进入下一次循环;

注释:

  单行注释以 // 开始,以行末结束

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

常用的输入/输出:

警告:alert()

         alert("提示信息");

     注意:console.log();建议使用此方法打印;

提示:prompt():弹出一个提示你对话框,

         等待用户输入一行数据;

eg:三种方式:

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

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

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

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

       注:(第二个参数省略会显示undefined)

语法约定:

1、代码区分大小写:

     ★JavaScript的关键字,永远都是小写;eg:for、if;

     ★内置对象;eg:Date、Math都是以大写字母开头;

     ★对象名通常都小写;

2、变量、对象和函数的名称:

     ★名称可以包括大小写字母、数字、下划线、美元符号;

     ★但是必须以字母、下划线、美元符号($)开头;

3、 分号:

      ★JavaScript运行开发这自行决定是否以分号结束一行代码;

      ★如果没有分号,JavaScript就将行代码的结尾看作该语句的结尾;

JavaScript关键字和保留字:

●不能把关键字、保留字、true、false和null用作标识符。

●js中的关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等。按照规则,关键字也是语言保留的,不能用作标识符。

以下就是ECMAScription的全部关键字(带*号上标的是第5版新增的关键字):

                break、else、new、var、 case、  finally 、 return、 void 、
catch  、for 

                switch 、 while 、 continue、 
function  、this 、 with 、default
、 if

                throw 、 delete 、 in 、 
try 、do 、 instranceof、  typeof、debugger*

●ECMA还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定的用途,但它们有可能将来被用作关键字。

下面是ECMA第3版定义的全部保留字:

                 abstract 、 enum   、int 、 short 、 boolean  、export  、interface、  static 

                 byte 
、extends 、 long 、
super 、 char 、 final  、native  、synchronized

                 class 
、float 、 package  、throws 、 const  、goto  、private 、transient 

                debugger 、 implements  、protected 、 volatile 、 double  、import  、public

●第5版把在非严格模式下运行时的保留字缩减为下列这些:

                 class、enum、extends、super、const、export、import

●在严格模式下,第5版还对以下保留字施加了限制:

                    implements、package、public、interface、private、static、let、protected、yield

注:let和yield是第5版新增的保留字;其他保留字都是第3版定义的

6、程序调试:

Chrome开发工具的八个模块:

Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。

Network 标签页:用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等。

Source 标签页:用于查看和调试当前页面所加载的脚本的源文件。

TimeLine 标签页: 用于查看脚本的执行时间、页面元素渲染时间等信息。

Profiles 标签页:用于查看 CPU 执行时间与内存占用等信息。

Resource 标签页:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等。

Audits 标签页:用于优化前端页面,加速网页加载速度等。

Console 标签页:用于显示脚本中所输出的调试信息,或运行测试脚本等。

Chrome开发人员工具五个图标代表的含义:

、停止断点调试

、单步调试,不进入函数体内部

、单步调试,进入函数体内部

、跳出当前函数

、禁用所有的断点,不做任何调试

alert()方法:可以通过此方法将不确定的数据信息以信息框的方式展示,以此来判断出现错误的位置;

7、 函数:

函数的含义:类似于Java中的方法,是完成特定任务的代码语句块

使用更简单:不用定义属于某个类,直接使用

函数分类:系统函数和自定义函数

系统函数:

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

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

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

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

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

自定义函数:

1、定义函数:

  语法:

     function 函数名(参数1,参数2,参数3,…){  
     // function 是定义函数关键字必须存在;参数可有可无:有参函数和无参函数;

   
       
//JavaScript语句

   
        
[return 返回值]         //可有可无;return用来规定函数返回的值;

}                            //{}定义了函数的开始和结束;

2、调用函数:函数调用一般和表单元素的事件一起使用;

调用格式:事件名= "函数名( )" ;

8、变量的作用域:全局变量和局部变量;

9、事件:

名称

说明

  • onload

一个页面或一幅图像完成加载

  • onlick

鼠标单击某个对象

  • onmouseover

鼠标指导移到某元素上

  • onkeydown

某个键盘按键被按下

  • onchange

域的内容被改变

JQuery制作网页—— 第一章 JavaScript基础的更多相关文章

  1. JQuery制作网页—— 第二章 JavaScript操作BOM对象

    1.window对象: 浏览器对象模型(BOM)是javascript的组成之一, 它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HTML的交互. 它的作用是将相关的元素组织包装 ...

  2. 使用jQuery快速高效制作网页交互特效第一章JavaScript基础

    JavaScript 一.JavaScript概念: JavaScript面向对象事件驱动具有安全性的脚本语言,面向对象 JavaScript特点: 1.解释性语言,边运行边解释 2.和HTML页面实 ...

  3. 第一章 Javascript基础

    一.Javascript概述(知道) a.一种基于对象和事件驱动的脚本语言 b.作用: 给页面添加动态效果 c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAscipt. d.特 ...

  4. JQuery制作网页——第九章 表单验证

    1.  表单验证:减轻服务器的压力.保证输入的数据符合要求: 2.  常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3.  表单验证的思路: 1.     ...

  5. 学习笔记 第十五章 JavaScript基础

    第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...

  6. 第五模块·WEB开发基础-第2章JavaScript基础

    第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...

  7. Jquery真的不难~第一回 编程基础知识

    Jquery真的不难~第一回 编程基础知识   回到目录 前言 说Jquery之前,先来学习一下Javascript(以后简称为JS)语言中的基础知识问题,其时对于每种编程语言来说基础知识都是大同小异 ...

  8. 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础

    第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1    初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...

  9. [Python笔记][第一章Python基础]

    2016/1/27学习内容 第一章 Python基础 Python内置函数 见Python内置函数.md del命令 显式删除操作,列表中也可以使用. 基本输入输出 input() 读入进来永远是字符 ...

随机推荐

  1. 移动Web开发与适配笔记

    项目要是适配手机端,想透彻的把相关内容弄清楚,现在总结一下. 一.移动端开发有如下特点: 1.跑在手机端的web 页面就是h5页面 2.具有跨平台性(web 安卓 iOS都适应) 3.基于webvie ...

  2. 集成Springboot+MyBatis+JPA

    1.前言 Springboot最近可谓是非常的火,本人也在项目中尝到了甜头.之前一直使用Springboot+JPA,用了一段时间发现JPA不是太灵活,也有可能是我不精通JPA,总之为了多学学Spri ...

  3. intellijidea课程 intellijidea神器使用技巧 5-2 localhistory

    Ctrl shift A  ==>localhistory ==> show history 查看文件本地历史记录(idea每次修改在本地会生成历史记录) Ctrl shift A  == ...

  4. nopcommerce3.6中文包

    nopCommerce 语言包,xml文件 点击下载:3.60_language_pack_zh.rar (60.82 kb) 下载后解压通过后台导入即可使用.如何导入?点击这里

  5. ansible的安装及命令相关模块

    ansible 第一步:下载epel源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos- ...

  6. ArcGIS Runtime SDK for Android 各版本下载地址

    ArcGIS Runtime SDK for Android各版本下载地址:ArcGIS Runtime SDK交流群:249819194 SDK包中主要包含以下内容: 其中里面比较重要的有以下几项: ...

  7. Qt开发北斗定位系统融合百度地图API及Qt程序打包发布

    Qt开发北斗定位系统融合百度地图API及Qt程序打包发布 1.上位机介绍 最近有个接了一个小型项目,内容很简单,就是解析北斗GPS的串口数据然后输出经纬度,但接过来觉得太简单,就发挥了主观能动性,增加 ...

  8. CentOS7下SSH服务学习笔记

    测试环境: [root@nmserver-7 ~]# uname -aLinux nmserver-7.test.com 3.10.0-514.el7.centos.plus.i686 #1 SMP ...

  9. 两台windows内网之间快速复制大量(上百万个)小文件(可用于两台服务器之间)

    用各种FTP工具(各种主动被动)都不好使.经测试,用以下的(协议.工具等),在双千兆网卡下,传输大量1M的文件可以达到每秒60多M: windows文件共享(SMB协议)(若是08 r2 数据中心版, ...

  10. 使用navigate导出表数据

    以下内容不算技术贴,只能算是技巧贴,要做的一个操作,从数据库A中把元素A1表,导入到数据库B中B1表,且,A1表的数据是部分导出,那么有两种方法进行导出 方法1: 选择数据表,右键,选择“转存储sql ...