Javascript学习

发表于 | 分类于

Javascript

  • JavaScript 使 HTML 页面具有更强的动态和交互性。
    ECMAScript 是JavaScript所基于的规范。通过阅读 ECMAScript 规范，你将学会如何创建脚本语言。通过阅读 JavaScript 文档，你将学习如何使用脚本语言.

JavaScript 语法：

  • 语句的分隔是分号（;） 有时分号也可不写。
  • 按照编写顺序依次执行;
  • javascript对大小写敏感;
  • javascript会忽略多余的空格;

JavaScript组成

  • ECMAScript(核心)
  • DOM(文档对象模型)
  • BOM(浏览器对象模型)

JavaScript 数据类型

  • 字符串（String）
  • 数字（Number）
  • 布尔（Boolean）
  • 数组（Array）
  • 对象（Object）
  • 空（null）
    可通过赋值为null的方式清除变量
    1
    2
    3
    4
    var string ="hello";
    var num =10;
    var flag =true;
    var arr=[1,2,3,4];

变量命名

驼峰命名法：第一个单词全部小写从第二个单词开始首字母大写

引用外部js文件

在script标签中的src属性中引入js文件

1
<script src="zdy.js"></script>

内部js编码

  • <script>:一个html页面中可包含多个<script>标签

    标签用于定义客户端脚本,如：JavaScript

    1
    2
    3
    <script type="text/javascript">
    document.write("Hello World!")
    </script>

  • <noscript> 标签

    <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时

  • 无法识别<script>标签时

    如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上,可以将脚本隐藏在注释标签当中

    1
    2
    3
    4
    5
    <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
    </script>

  • 行内样式：HTML标签中引入JavaScript

    onclick=”javascript:alert(‘JS欢迎你’)”

    1
    <input type="button" name="btn" value="点击一下" onclick="javascript:alert('JS欢迎你')" />

事件

  • 输出：
    可输出字符串，也可输出带标签格式的
    1
    2
    document.write("Hello World");
    document.write("<p>Hello World</p>")

getElementById 通过id寻找元素
getElementsByTagName 通过标签寻找元素
innerHTML 改变HTML 内容
(attribute)改变HTML属性

1
document.getElementById("aid").href="  ";   改变aid中的href属性值

  • DOM事件句柄 (DOM2级事件处理)

    添加句柄 addEventListener(“事件名”,”事件处理函数”,”布尔值”)
    true：事件捕获
    false：事件冒泡
    click ：给id为btn的元素的click事件添加句柄
    demo 方法：触发click事件后执行demo方法 。
    alert(“Hello”)：弹出对话框”Hello”.
    例：

    1
    2
    3
    4
    5
     var x =  document.getElementById("btn");
     x.addEventListener("click",demo);
    function demo(){
        alert("Hello");
    }

添加事件句柄的好处，直接在addEventListener中更改事件的执行，不用修改多处。

移除句柄 removeEventListener 使用方法同上。

javaScript 函数

1
2
3
function 函数名(){
	函数体;(代码块)
}

函数必须要调用才会执行

函数调用

  • <script>标签内调用
  • HTML文件中调用

history对象

  • history.bank(); 退回到上一个页面
  • history.forward(); 前进
  • history.go();进入历史中某个页面

弹出文本框

  • alert(“你好！”)—弹出信息，只有确定按钮
  • prompt(“提示信息”,”输入框的默认信息”)—有输入框
  • confirm(“确定要删除此条信息？”)—弹出信息，有确认和取消按钮。该语句会返回boolean类型值