优雅的JavaScript-基础

来源：互联网发布：jeeplus 工作流源码编辑：程序博客网时间：2024/05/22 13:37

什么是JavaScript

1.JavaScript主要用于HTML的页面，嵌入在HTML的源码中2.JavaScript是因特网上醉流行的脚本语言，它存在于全世界所有的web浏览器中能够增强用户和web站点和web应用之间的交互3.JavaScript是一种弱类型的语言，没有类型声明，他的变量不必须具有一个明确的类型4.JavaScript是脚本语言：可以用来编程并且直接执行源代码的语言5.JavaScript也是一种解释性语言：在运行时将程序直接翻译成机器语言6.JavaScript是一种基于对象（object）和事件驱动，并具有安全性能的脚本语言，广泛用于服务器，pc,移动设备7.HTML5以后突出了JavaScript的重要性，如：   HTML5的绘图支持，本地存储，离线应用，客户端通信等

JavaScript的特点

简单性：    他是基于Java基本语句和控制语句之上的简单而紧凑的设计，是学习Java的很好过渡，而且他的变量类型是弱类型，未采用严格的数据类型    安全性：    JavaScript不允许访问本地的硬盘，不能讲数据存储到服务器上，不允许对网络文档进行修改和删除    只可以通过浏览器实现信息浏览或动态交互，从而有效防止数据丢失    动态性：    JavaScript可以直接对用户或客户输出作出响应，无序经过web程序，他对用户采用事件驱动的方式进行，即某种操作动作引起的响应的事件响应    如：点击鼠标，移动窗口，选择菜单等    跨平台：    JavaScript依赖于浏览器本身，于操作环境无关。

JavaScript的组成

1.JavaScript是ECMAScript,文档对象模型（DOM），浏览器对象模型（BOM）由这三个部分组成    ECMAScript：是JavaScript的核心，描述了giant语言的基本语法和基本对象    DOM：描述了处理网页内容的方法和接口，通过ＤＯＭ可以访问所有的ＨＴＭＬ元素，连同他们所包含的文本和属性，可以对其内容进行修改和删除    　　　　同时可以创建新的元素    BOM:描述了与浏览器进行交互的方法和接口，BOM提供了独立与内容而与浏览器窗口进行交互的对象       如：可以移动，调整浏览器大小的window对象，用于导航的location对象和history对象；

JavaScript原理

JavaScript的使用

JavaScript的基本结构

JavaScript的基本结构：   <script type="text/javascript">   JavaScript语句   </script>说明：    <script>....</script>可以包含在文档中的任何位，只需要保证一点： JavaScript代码在使用前已读取并加载到内容即可      <script>标签有一个必选的属性type:用来指明脚本类型，常用type="text/javascript"      type的可选值：      text/javascript:传统写法，浏览器支持度较好      application/JavaScript ：标准写法，但不是每一个浏览器都支持        text/jScript  ：      text/vbscript  ：      text/x-javascript：X前缀表示是实验性的，不是标准类型，代表实验阶段          例如：     <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        alert("hello javascript");    </script></head><body><p id="test">测试文字</p></body></html>

网页中引用JavaScript的方式

1.内部添加，使用<script>标签   语法：   <script type="text/javascript">   JavaScript语句   </script>      2.链接外部的JavaScript文件语法：   <script type="text/javaScript" src="xxx.js"></script>      例如：      <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!-- <script type="text/javascript">         alert("hello javascript");      </script> --></head><body><script type="text/javascript" src="../js/outer.js"></script></body></html>js代码：  alert("测试");3.HTML标签中，作为某个元素事件属性值或者超链接href属性值：    例如：        <input name="btn" type="button" value ="弹出消息框" onclick="javaScript:alert(欢迎你)"/>注意：   <script type="text/JavaScript" src="jsdemo.js"/>  错误，不可以使用单标签，必须使用双标签

JavaScript的基本语法---注意事项

1.JavaScript的执行顺序；按照HTML中出现的顺序依次执行2.JavaScript书写时尽量严格区分大小写3.JavaScript的语句与语句之间忽略空白符和换行符4.JavaScript通过\对代码进行拆分5.JavaScript使用；结束语句，最后一个可以省略，但不建议6.JavaScript可以使用{}扩成一个语句组，形成一个块block注意：   JavaScript会忽略关键字、变量名、数字、函数名或者其他各元素之间的空格或换行符，我们可以使用缩进换行来使代码整齐，提高可读性

JavaScript的基本语法---注释

注释：  单行：   //注释内容  多行：   //注释内容  文档：   //注释内容

JavaScript的基本语法---基本操作

1.页面的弹出框：   alert();       如：        <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script type="text/javascript">   alert("hello"+4+"\n"+9+"javascript");</script></body></html>2.向文档中写内容   docment.write();      输入内容      换行操作      输入标签    说明：       如果在文档已经加载完成后执行docment.write();，整个HTML页面覆盖例如：  <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        a{color: gray; text-decoration: none; white-space: pre;}    </style></head><body><p>测试文字</p>    <p>测试文字1</p></body></html><script type="text/javascript">//    document.write("你"<br/>"好");document.write("<a href='#'>首页\n文字</a>")；</script>

JavaScript基本语法---关键字和保留字

关键字和保留字：在JavaScript中具有特殊含义的单词   JavaScript的保留关键字不可以用作变量、标签或者函数名。   abstract arguments   boolean break   bytecase    catch   char    class*  constcontinue    debugger    default delete  dodouble  else    enum*   eval    export*extends*    false   final   finally floatfor function    goto    if  implementsimport* in  instanceof  int interfacelet long    native  new nullpackage private protected   public  returnshort   static  super*  switch  synchronizedthis    throw   throws  transient   truetry typeof  var void    volatilewhile   with    yield       abstract    arguments   boolean break   bytecase    catch   char    class*  constcontinue    debugger    default delete  do

JavaScript基本语法--标识符

标识符1.定义：给变量、函数、对象等指定的名字标识符的命名规则：   1.区分大小写     标识符首字符可以是下划线（_）/美元符号($)/字母开始，不能是数字     不能包含JavaScript中的保留字和关键字     标识符的命名规范：    采用驼峰式命名，除第一个单词外第一个首字母大写，如：  myCar     代码屏蔽：     如果浏览器不支持JavaScript，可以使用<noscript></noscript>标签显示noscript中的内容     noscript元素用来定义在脚本未被执行时的代替内容(文本)     此标签可悲用于识别<script>,标签但无法支持其中的脚本浏览器

变量

变量：   概念：      javaScript的变量用于保存值或表达式，他的值可以改变          如：       x=2;   x=y+z;  x,   y          命名规则：      1.变量建议以字母开头      2.变量不推荐使用$或者下划线      3.变量名对大小写敏感（y和Y是两个变量）      4.不能以数字开头      5.见名知意              注意：     JavaScript语句和JavaScript变量都对大小写敏感，变量名是标识符，遵循标识符的语法          变量的声明：         声明变量：   var 变量名；         变量赋值：   变量名=值；              说明：       1.如果再次声明JavaScript变量，该变量也不会丢失原始值         如：  var x=5;   var x;       2.重新赋值会覆盖原来的值          如：  var x=5;  var x=7;       3.如果一个变量没有赋值，他的初始化值为undefined       4.可以在同一行声明多个变量       5.声明可以跨行          如：              var userName;              age;                    如：                  <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script type="text/javascript">    //var money=1000*1.5*1.5;//    document.write("本金是1000<br/>");    /var name="lucy",age=18,gender="女",classNo="1618";//    alert("姓名:"+name+"\n年龄"+age);var a,b=9;a=7;alert(a+"  "+b);</script></body></html>

JavaScript的消息框

1.警告框：alert(xx);     警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续下一步操作2.确认框：comfirm(xx);    确认框用于用户可以验证或者接受某些信息，当确认框出现后，用户需要点击确定或取消按钮才能进行下一步操作       如果用户点击确认返回值为true        如果点击取消，返回值为false              如：         <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script type="text/javascript">    var result = confirm("确定删除吗？");    alert(result);</script></body></html>3.输入框：   prompt(XX,默认值)；   提示用户在进入页面前输入某个值，   当提示框出现后，用户需要输入某个值，然后点击   确定按钮 ：返回值为输入的值   取消按钮：  返回值为null     例如：   <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script type="text/javascript"> prompt("请输入您的姓名","张三");</script></body></html>

阅读全文

0 0