优雅的JavaScript-基础

最新推荐文章于 2024-09-11 16:11:52 发布

熙哲数

最新推荐文章于 2024-09-11 16:11:52 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript JavaScript基础 JavaScript基本语法

本文链接：https://blog.youkuaiyun.com/sun13921881708/article/details/76078642

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了JavaScript的基础知识，包括其特点、组成原理及基本语法。详细解释了如何在HTML中使用JavaScript，涵盖内部添加、链接外部文件等多种方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是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   byte
case    catch   char    class*  const
continue    debugger    default delete  do
double  else    enum*   eval    export*
extends*    false   final   finally float
for function    goto    if  implements
import* in  instanceof  int interface
let long    native  new null
package private protected   public  return
short   static  super*  switch  synchronized
this    throw   throws  transient   true
try typeof  var void    volatile
while   with    yield       
abstract    arguments   boolean break   byte
case    catch   char    class*  const
continue    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>