一、JavaScript 技术

二、基本语法

变量

体现动态变量的优越性,会根据值的不同,反过来改变变量的类型

  • var

    • 就类似全局变量
    • 能用 window.调用
    • 可以先使用后声明
  • let

    • 作用域在
    • 不能用 window.调用
    • 不能先使用后声明
    • 可以不用初始化
  • const
    • 必须初始化

输出语句

  • window 对象。alert
  • inner.HTML
  • console 控制台输出
  • document.write

表单验证

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

**

JSON

JSON 和 JavaScript 相互转换,JSON 格式化后之后,就是 JavaScript 对象**

三、函数

Function()构造函数

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

箭头函数

ES6 中新加了箭头函数

const funName = (x, y) => {
  x * y;
};

自调用函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>函数可以自动调用:</p>
<p id="demo"></p>
<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>

</body>
</html>

函数调用

实际上是 window 对象调用,知识默认隐藏 window 调用

闭包

对于变量而言,有全局变量和局部变量,对于局部变量 ,其中有一个问题就是,函数内部不能定义局部变量来进行计数功能,只能定义全局变量来实现。
利用子调用函数来解决这个问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

其他

others

  • async 异步,告诉浏览器遇到 script 标签不要中断 HTML 的加载
  • defer 异步,和 async 不同的是,这个是要按照<head>里面的<script>顺序来加载运行的
  • let 变量(旧版本 var)
  • const 常量

函数总结

  • document.querySelector(‘p’);获取 dom 节点
  • addEventListener(‘click’, updateName)事件监听
  • prompt 弹出输入框
  • textContent 改变 dom 节点上的文字内容
  • document.createElement(‘p’);创建节点
  • document.querySelectorAll(‘button’);获取 dom 节点

API


字符串

  • length 字符串长度,返回一个数字
  • indexOf()检索特定字符串,返回索引值
  • slice()查找子字符串并提取出来,类似 numpy 索引,返回一个新的字符串
  • toLowerCase()全部换为小写,返回新的字符串
  • toUpperCase()全部换为大写,返回新的字符串
  • replace()替换字符串的某部分,返回新的字符串

数组

  • length 数组长度
  • split(‘,’)将一串字符串按照”,”划分变成数组
  • join(‘,’)和 split 函数相反,将数组个元素用”,”拼接成一个字符串
  • toString()打印数组
  • push()最后插入元素
  • pop()最后删除元素
  • unshift()第一个元素插入元素
  • shift()第一个元素删除元素

**

Other

var fromBaidu = /^http(s)?:\/\/(\w+?\.)?baidu.com/.test(document.referrer);

  • 返回要给 bool 类型值,/^http(s)?:\/\/(\w+?\.)?baidu.com/正则表达式和document.referrer之间是否匹配
  • document.referrer 返回的是一个 URI, 当前页面就是从这个 URI 所代表的页面 跳转或打开的.