JavaScript

JavaScript

一名合格的后端人员必须要精通JavaScript!

JS,是一门最流行的脚本语言,严格区分大小写,并且<script></script>必须成对出现。

历史背景:

Nombas 和 ScriptEase

大概在 1992 年,一家称作 Nombas 的公司开发了一种叫做 C 减减(C-minus-minus,简称 Cmm)的嵌入式脚本语言。Cmm 背后的理念很简单:一个足够强大可以替代宏操作(macro)的脚本语言,同时保持与 C (和 C ++)足够的相似性,以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中,它首次向开发人员展示了这种语言的威力。

Nombas 最终把 Cmm 的名字改成了 ScriptEase,原因是后面的部分(mm)听起来过于消极,同时字母 C “令人害怕”。现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力。

Netscape 发明了 JavaScript

当 Netscape Navigator 崭露头角时,Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page(浓咖啡般的页面),它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。

当网上冲浪越来越流行时,对于开发客户端脚本的需求也逐渐增大。此时,大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络,即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是,仅仅为了简单的表单有效性验证,就要与服务器进行多次地往返交互。设想一下,用户填完一个表单,点击提交按钮,等待了 30 秒的处理后,看到的却是一条告诉你忘记填写一个必要的字段。

那时正处于技术革新最前沿的 Netscape,开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。

Netscape 的 Brendan Eich (布伦丹·艾奇),开始着手开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。Netscape 与 Sun 共同完成 LiveScript 实现。就在 Netscape Navigator 2.0 即将正式发布前,Netscape 将其更名JavaScript,目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报,JavaScript 从此变成了因特网的必备组件。

数据类型

  • number:不区分整数和小数

  • 字符串

  • 布尔值

  • 逻辑运算:&& || !

  • 比较运算:> < = == ===绝对等于

    • ==是js的一个缺陷,值一样类型不一样也会判断为true
    • NaN与所有的数值都不相等,包括自己,只能通过isNaN()来判断这个数是否是NaN

    js中的数组对象的定义和赋值

            /* 数组【】 */
            var arr = [1, 2, 5, 4, 6, 3];
            /* 对象{} ,赋值为:*/
            var object = {
                name: "db",
                age: 18,
                tags: ['java', 'as', 'mysql']
            }
    

    js中数组:可以包含任意的数据类型

    • 数组中的方法:

      toUpperCase();  //转为大写
      toUpperCase();  //转为小写
      substring(0,10);  //截取字符串 [) 左闭右开
      
      push('a','b');  //将a,b压入数组尾部
      pop();  //弹出尾部的一个元素
      
      unshift('a','b');  //压入到头部
      shift();  //弹出头部的一个元素
      
      sort();     //升序排序
      reverse();  //元素反转
      
      concat();  //
      join('-');  //连接符
      

    js中的对象:

    • 赋值
    var person={
    name : 'java',
    age : 18
    }
    
    • 动态增、删对象的属性
    delete person.name;
    
    person.name='mysql';
    
    • 判断属性是否在这个对象中,关键字in
    'name' in person;
    
    • Map和Set
    /* Map */
    var names = new Map([
                ["tom", 1],
                ["cat", 2],
                ["rose", 3]
            ]);
    	names.set("admin", 123456);
    	names.get("admin");
    	names.delete("admin");
    
    var set = new Set([3,1,1,1,22,22]);  //Set可以去重
    set.add(100);
    set.delete(1);
    
    
    • 遍历数组,Map,Set
    /* for of 输出数组中所有值 */
    for (var num of nums) {
                console.log(num);
            }
    
    /* for in 输出数组的下标 */
    for (var num in nums) {
                console.log(num);
            }
    
    /* foreach 输出value */
    names.forEach(function name(value) {
                console.log(value);
            });
    

严格检查模式---strict

var,let:用于定义局部变量,尽量使用 let

       /* 启用严格检查模式 */ 
	   'use strict';
        /* 变量没有声明,会报错:is not defined */
        arr1 = [4, 5, 6];
 	    let arr1 = [4, 5, 6];

字符串

  • 使用单引号,双引号嵌套
  • 转义字符:\' \n \t

函数

定义

所有的方法都由function来定义。

获取参数之外的所有参数 -->rest,只能写在所有参数之后,必须带有标识...rest

function f_name(a,b,...rest){
    console.log(a);
    console.log(b);
    console.log(rest);
}

变量的作用域

  • 在函数体中声明的变量,在函数体外部不可使用
  • 全局对象window
  • 局部作用域变量--->let
  • 常量--->const,赋值后不可以被改变

方法的定义和apply()

/* this指向当前对象 */
var person = {
            name: 'keke',
            birth: 1997,
            age: function() {
                no = new Date().getFullYear();
                return no - this.birth;
            }
        }
/*apply(Object, []),控制this的指向 */
function getAge() {
                no = new Date().getFullYear();
                return no - this.birth;
            }
var keke={
    name:'keke',
    birth:2000,
    age:getAge
}
getAge.apply(keke,[]);

内部对象

  1. 标准对象
typeof 1
"number"
typeof '1'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof isNaN
"function"
typeof []
"object"
typeof undefined
"undefined"
  1. 日期Date
getTime() //时间戳==> 全世界统一,从1970-01-01开始到现在的毫秒数
new Date(new Date().getTime())  //把当前 时间戳 转 为时间
getFullYear()
getMonth()
getDate()
  1. JSON

主要两个方法:

  • JOSN.stringify() 把js对象转换成字符串
  • JSON.parse() 把字符串解析成js对象

继承

  1. 原型继承

    object._proto_=anotherObject;
    
  2. class继承,ES6引入class关键字

    /* 定义一个类 */
            class person {
                constructor(name) {
                    this.name = name;
                }
                say() {
                    alert("汪汪汪~");
                }
            }
    
            class people extends person {
                constructor(name, xx) {
                    super(name);
                    this.xx = xx
                }
                mySay() {
                    alert("喵喵喵~");
                }
            }
            var xiaoho = new person('xiaoho');
            var xiaomi = new people('xiaomi ', 'haha');
    

操作BOM对象(重点)

浏览器对象模型---Browser Object Model

浏览器

JavaScript的诞生就是为了能在浏览器中运行

浏览器:

  • IE
  • chrome
  • Firefox
navigator.appCodeName
"Mozilla"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.platform
"Win32"

/* navigator封装了浏览器的信息 */
navigator
Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, userActivation: UserActivation, …}
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
cookieEnabled: true
credentials: CredentialsContainer {}
deviceMemory: 4
language: "zh-CN"
languages: (2) ["zh-CN", "en"]
locks: LockManager {}
platform: "Win32"
product: "Gecko"
productSub: "20030107"
userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
vendor: "Google Inc."

大多数时候都不使用navigator,因为会被人修改。

screen,代表屏幕

screen
Screen {availWidth: 1366, availHeight: 738, width: 1366, height: 768, colorDepth: 24, …}

lacation,代表当前页面的URL信息

location
Location {ancestorOrigins: DOMStringList, href: "file:///D:/Users/%E8%9C%98%E8%9B%9B%E5%95%8A%E5%85…%AB%AF%E5%AD%A6%E4%B9%A0%E4%B9%8B---JS/index.html", origin: "file://", protocol: "file:", host: "", …}
/* 设置新的地址 */
location.assign("https://www.cnblogs.com/")

document(重点),代表当前页面

document.title
"Document"
document.title="柯柯"
"柯柯"

/* 获得具体的文档树节点0 */
document.getElementById(" ");

操作DOM对象

Document Object Model --- 文档对象模型

JavaScript

获取DOM对象

/* 对应css选择器 */
document.getElementsByTagName("h1");
document.getElementById("id");
document.getElementsByClassName("class");

这是原生代码,之后使用的都是jQuery

更新节点

var app=document.getElementById("app")
/* 修改文本的值 */
app.innerText='1233333333'
app.innerHTML='<strong>123654789</strong>'  //可解析html文本标签

/* 修改css */
app.style.color='red'

删除节点

先找到父节点,再通过父节点删除自己

var dl=document.getElementById("id")
dl.parentElement.removeChild(dl)

插入节点

p=document.getElementById("p")
ul=document.getElementById("ul")
/* 移动已有的节点 */
ul.appendChild(p)


/* 创建一个新标签 */
p1=document.createElement("p")
// p1.id="newp"     //不推荐使用
p1.setAttribute("id","newp")  //推荐这中,以键值对形式设置,万能用法
p1.innerText="hello,哈哈!"
/* 插入 */
ul.appendChild(p1)

表单验证

    <div id="app">
        <form name="myForm" action="" method="post">
            姓名:<input type="text" name="fname">
            <input type="submit" onclick="validateForm()" alue="Submit">
        </form>
    </div>

    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == "") {
                alert("必须填写姓名");
                return false;
            }
        }
    </script>

DOM事件

  • onclick,点击触发
  • onchange,离开输入框触发
  • onmouseover 和 onm ouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发
  • onmousedown,鼠标按下触发
  • onmouseup,鼠标松开触发

jQuery

jQuery就是一个js库,装有大量的js函数

获取链接:<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

当网页加载完后,响应事件:

$(function(){

})

选择器$()

$('Tag_name').action()

$('. class_name').action()

$('# id_name').action()

操作HTML

/* 设置html元素 */
t.html("<p>Hello World</p>");
/* 获取html元素 */
t.html();
/* 设置文本内容 */
t.text("Hello China!");

操作css

t.css("font-size","35px");
/* 隐藏 显示*/
t.hide();
t.show();

操作DOM

$("#id").remove();//删除节点
t.parent();//获取父节点
上一篇:CupertinoActionSheet


下一篇:java-非GPS GeoLocation API-GoogleVS.其他(Skyhook / Navizon / Xtify等)