优雅的JavaScript-基础

时间:2022-08-22 17:38:04

什么是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:描述了处理网页内容的方法和接口,通过DOM可以访问所有的HTML元素,连同他们所包含的文本和属性,可以对其内容进行修改和删除
      同时可以创建新的元素
  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>