JavaScript基础

最新推荐文章于 2021-04-20 23:32:16 发布

沈君

最新推荐文章于 2021-04-20 23:32:16 发布

阅读量597

点赞数 1

文章标签： javascript 脚本语言

本文链接：https://blog.csdn.net/qq1131410679/article/details/70358474

版权

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

1、JavaScript的特点：

1、跨平台
2、安全性（JavaScript的代码不能直接访问硬盘的内容）

2、JavaScript是基于对象的语言。

JavaScript是解释型语言（不需要经过任何的编译过程），java是解释，编译型语言。
JavaScript是弱类型语言。java中声明的变量的时候，必须声明变量的类型，而JavaScript声明变量时不需要明确数据的类型，任何的变量都是使用一个关键字var去声明即可。

3、JavaScript组成部分

1、EMCScript（基本语法）
2、BOM(browser object Model)浏览器对象模型，浏览器对象模型中把浏览器的各个部分用了一个对象进行描述，如果我们要操作浏览器的一些属性，就可以通过浏览器对象模型的对象进行操作。
3、DOM(Document Object Model)文档对象模型，一个html页面被浏览器加载的时候，浏览器就会对整个html页面上所有标签都会创建一个对应的对象进行描述。

一、JavaScript的引入

方式1：可以在<script>标签内进行编写

<script type="text/javascript">
    alert("hellow world!");
</script>

方式2：可以引入外部的JavaScript文件

<script src="test.js" type="text/javascript"></script>

方式2要注意的是：script标签是有开始标签和结束标签，不能在一个标签体内结束。标签体内不允许再写入内容(内容会无效)。一般我们会使用引入外部的JavaScript文件（复用性高），不会与其他的html代码混杂在一起。

网页的注释：
html <!– –>
css /* */
JavaScript //（单行注释）和/* */（多行注释）

二、JavaScript的基本语法

1、声明变量

//JavaScript的变量声明，格式： var 变量名=数据
//后定义的同名变量会覆盖前定义的同名变量
    var a = 10;
    var a = 11;
    alert(a);

//声明变量可以不写var，可以省略。因为JavaScript中的变量数据类型是根据存储的数据类型决定的
    var b = "狗娃";
    b = true; //对b重复赋值为不同的数据类型是被允许的
    document.write(b);

2、JavaScript的数据类型

typeof 查看变量的数据类型
使用格式：typeof 变量名

JavaScript的数据类型，全部数字都是number类型，全部字符都是String类型

number：小数和整数类型
string：字符和字符串类型
boolean：布尔类型
undefined：未定义类型（当一个变量没有经过定义的时候，使用typeof查看其数据类型的时候是undefined）

字符串转换数字的函数
parseInt（）
parseFloat（）

var a = 12;
alert(typeof parseInt(a));

//字符串中，数字更随着非数字字符，会去掉非数字字符
var b = "12a";
alert(parseInt(b)); 
//当字符串中，以非数字字符开头，会解析不成成功。
//会显示 NaN (not a number)
b = "a12";
alert(parseInt(b)); 

//以0x开头的字符串，会将其当做一个16进制的数据处理
b = "0x10"；
alert(parseInt(b)); 

//这里true与number类型相加，是作1使用的
var c = 1+true;
document.write(c);

//当我们==判断时，会将字符串转换数字进行比较，当转换不了的时候，则比较字符的长度

3、控制流程

这里一些与java一样的if-else，for，while，do-while，switch,break,continue等流程控制就不再做出讲解



//for-in循环，遍历一个数组
var array = [1,2,3,4]
for(var index in array){
    document.write(arr[index]);
}


//2、还可以循环一个对象属性
//定义一个对象的构造方法
function Person(id , name){
    this.id = id;
    this.name = name;
}
//创建一个对象
var p = new Person(110,"Lee");
//循环输出一个对象的属性
for(var prop : p){
    document.write(p[prop]);
}

with语句:在存储对象的属性和调用对象的方法就不用重复指定对象

with语句的格式：
with(对象){}

with（document）{
    //省略document这个对象的书写，直接使用document的write方法
    write（“123”）；
}

4、函数

函数的定义：function 函数名（形参列表）{函数体；}

1、在JavaScript中函数定义形参是不能使用var关键字
2、不需要表明返回值的类型
3、在JavaScript中是没有函数重载的，后面定义的同名的函数会覆盖前面的同名函数
4、在JavaScript中任何函数内部都隐式的维护了一个argument的对象，当调用函数传递数据的时候，是会先传递给argument的对象，再由argument对象分配给形参。

    function add(a,b){
        document.write(a+b);        
        return sum;
    }
    //调用函数，当没有返回值的时候，res接受到的值为undefined
    var res = add(1,2);
    document.write(res);

    //即使没有定义形参，但我调用函数的时候依然能传递参数进去，因为其隐式地维护了一个argument对象
    function test(){
        document.write(argument.length);
        for(var i=0;i<argument.length;i++){
            document.write(argument[i]);
        }
    }
    //当我们调用test时，传入参数的时候，时会先出传递给argument对象
    //结果是 -> 3
    test（1,2,3）;

三、JavaScript的内置对象

1、String对象

    //比较的是对象，不是比较的是内容
    var s1 = new String("hellow");
    var s2 = new String("hellow");
    document.write(s1==s2);

    //当我们要比较值时,没有equals方法,必须调用String对象的toString方法来进行比较
    document.write(s1.toString==s2.toString);

    //Stirng对象常用的方法
    //1、Anchor() 产生锚点，会将字符串产生一个<a>标签，并且将其命名为传入的字符串参数
    document.write("123".Anchor("five"));

    //2、bink() 为元素添加blink标签

    //3、charAt 返回指定索引位置处的字符
    document.write("123".charAt(1));

    //4、cahrCodeAt返回一个整数，代表指定位置字符的编码

    //5、Fontcolor() 给字符串添加一个<font>标签，并且设置其颜色属性值

    //6、indexOf() 返回字符串中，第一次出现指定字符串的index

    //7、lastIndexOf()返回字符串中，最后一次出现指定字符串的index

    //8、italics() 给字符串添加一个<i>斜体标签

    //9、link() 给字符串添加一个<a>标签
    document.write("123".link("http://www.baidu.com"));

    //10、Replace() 返回根据正则表达式进行文字替换后的字符串参数
    document.write("123".replace(“”，“”)); 

    //11、split() 切割字符串

    //12、substr() 截取子字符串

    //13、toUpperCase() toLowerCase() 转大小写

2、Date对象

<html>
<head>
<script type="text/javascript">
/*
    最美的不是下雨天，而是曾与你躲过雨的屋檐。
*/

    //获取当前系统时间
    vat date = new Date();
    document.write(date.toLocaleString());

    function getCurrentTime(){
        var time = new Date();
        var span = document.getElementById("span");
        span.innerHTML = time.toLocaleString();
    }       


</script>
</head>
<body>
        <!--给span标签注册一个点击事件，获取当前时间-->
        <span id="span" onclick="getCurrentTime()">点击这里获取当前时间...</span>
</body>
</html>

3、number对象

//格式：
//var num = new Number("数字");
//var num = "数字";

    //常用的方法：
    //1、toString();把数字转换成指定进制形式的字符串形式
        document.write("二进制"+(new Number(1).toString(2)));

    //2、toFixed();指定保留的小数位，四舍五入

4、数组对象

JavaScript中数组的长度是可以发生变化的

//创建数组对象
var a1 = new Array();
var a2 = new Array(100);即使指定长度，也可以改变长度
var a3 = new Array("元素1","元素2","元素3");
var a4 = ["元素1","元素2","元素3"];

//1、concat 将两个数组组成一个新的数组返回 arr1 = arr1.concat(arr2);

//2、join 返回一个字符串，包含着所有元素，并且元素由指定的分割符连接

//3、pop 移出数组中的最后一个元素，并且返回这个元素

//3、push 将新元素添加到一个数组中，并返回数组长度

//4、reverse 返回一个元素颠倒的新数组

//5、shift 移出数组的第一个元素，并且返回它

//6、slice 返回一个数组中的一段

//7、sort(sortfunction) 传入一个方法，来对数组进行排序。如果这个参数被省略，则元素按照 asc码排序

//8、splice 从数组中移出一个或多个元素，在所移出元素的位置插入新元素，返回所移出的元素（一个参数，开始删除元素的索引值，第二个参数就是删除元素的个数，第三个或多个参数是需要插入的元素）

5、prototype原型

prototype原型解决的问题是如何将一个方法，添加到一个对象中。即是，当我们需要给JavaScript的内置对象添加一些方法时，就可以使用prototype原型来对JavaScript的内置对象添加自定义的方法

1、prototype是函数必备的属性（保留属性，只要实现function就有这个保留属性）
2、prototype的值是一个对象
3、可以任意修改函数的prototype属性的值
4、一个对象会自动拥有prototype的所有成员属性和方法
3、格式：Array.prototype.（方法名） = function(){函数体；}

    //例如，对Array数组对象添加自定义方法
    //Array对象获得了prototype属性的方法了         
    Array.prototype.eat = function(){
        document.write("eat");
    }

    //现在初始化一个Array数组对象后，就能拥有个自定义方法了
    var array = new Array();
    //调用自定义的方法
    var.eat();

四、BOM编程

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型中把浏览器的各个部分用了一个对象进行描述，如果我们要操作浏览器的一些属性，就可以通过浏览器对象模型的对象进行操作。
浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

浏览器对象：

1、window 代表一个窗口对象
2、location 代表了地址栏对象
3、screen 代表了整个屏幕的对象

1、window对象的常用方法

<html>
<head>
<script type="text/javascipt">
//window 对象的方法
//使用window对象的任何属性和方法，都可以省略window

//open方法 打开指定的html新页面，并且可以设置新窗口的一些属性 
function showAd(){
    window.open("ad.html","_blank","height=400px,width=400px,toolbar=no,location=no,top=200px");
}

//resizeTo() 将窗口大大小更改为指定的宽度和高度值

//moveBy() 相对于原来的窗口，移动指定的值

//moveTo() 将窗口，移动到指定的位置

//setInterval() 每经过指定毫秒值，就会自动执行指定代码。并返回该定时任务的ID
var id = window.setInterval("showAd()",1000)；

//clearInterval() 取消定时任务，根据任务的ID取消任务
window.clearInterval(id);

//setTimeout() 经过指定毫秒值后，执行指定的代码一次。      
window.setTimeout("showAd()",2000);


</script>
</head>
<body>
    <input type="button" onclick="showAd()" value="open">
</body>
</html>

2、window对象的注册事件

<html>
<head>
<script type="text/javascipt">
/*
    注册事件的方式： 
    1、直接在html元素标签上直接注册
    <body onload="ready()">
    2、可以使用js代码，获得对应的标签对象进行注册
*/  

    //onload() 当页面加载完成的时候，就会调用该方法   
    function ready(){
        document.write("当body元素被加载完毕，就会调用该方法。");
    }

    //这里要注意的是，html网页是从上而下加载的，因此<script>标签内自行该代码的时候，实际上body标签并没有被加载。因此，是获取不了该body的对象。
    //解决的办法是，可以将<script>标签放到<body>标签后面。或者是，为body标签注册onload事件，当body加载完成之后调用该方法。
    //获得对应的标签对象进行注册事件
    var body = document.getElementById("body");
    body.onload() = function(){
        document.write("当body元素被加载完毕，就会调用该方法。");
    }


</script>
</head>

<!--直接在html元素标签上直接注册,该onload事件是表明：当body标签加载完成后，就会调用该方法-->
<body id="body" onload="ready()">
</body>

</html>

3、window对象的常用事件

鼠标点击事件：

onclick() 单击事件
ondblclick() 双击事件
onmousedown() 鼠标点击事件
onmouseup() 鼠标起来事件

鼠标移动事件：

onmouseout() 当鼠标移出
onmousemove() 当鼠标移动

焦点相关：

onblur 在对象失去输入焦点触发
onfocus 在对象获取到了输入焦点触发

其他

onchange() 当对象或者选中区的内容改变时触发
onload() 在浏览器完成对象的装载后立即触发
onsubmit() 当表单将要被提交时触发

4、location对象

主要用于操作地址栏的

<html>
<head>
<script type="text/javascript">
/*
属性：
    href        设置或获取整个url为字符串
    protocol    设置或获取url的协议部分
    href        设置或获取href属性中跟在问号后面的部分

方法：
    reload()    重新加载当前页面
*/

    function showURL(){
        //获取当前的URL
        alert(location.href);
    }

    //调用该方法能刷新页面
    function refresh(){
        location.reload();
    }

</script>
</head>
<body>
    <input type="button" onclick="showURL" value="显示当前网址..."/>
</body>
</html>

5、screen对象

screen对象的属性

availHeight 获取系统屏幕的工作区域的高度排除任务栏
avialWidth 获取体统屏幕的工作区域宽度，排除任务栏
height 获取屏幕的出自分辨率
width 获取屏幕的水平分辨率

五、Dom编程

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
一个html页面被浏览器加载的时候，浏览器就会对整个html页面上所有标签都会创建一个对应的对象进行描述，在浏览器上看到的信息只不过就是html对象属性信息而已，我们只要能做找到对应对象的属性，则以改变浏览器当前显示的内容。
文档树的每一标签对象我们都称为一个节点node（）

例如，我们可以来获取一下一个html页面的标签节点，以及其属性。

<html><head><script type="text/javascript">

    //document对象的集合属性：
    //获取html文件中所有标签节点
    var allNodes = document.all;
    for(var i=0;i<allNodes.length;i++)
    {
        alert(allNodes[i].nodeName);
    }   

    //获取html中所有的a标签的href属性
    function test(){
        var links = document.links;
        for(var i=0;i<links.length;i++){
            alert(links.href);
        }
    }


</script></head><body>

<a href="#">连接1</a><a href="#">连接2</a><a href="#">连接3</a>
<input type="button" onclick="test" value="添加连接..."/>

</body></html>

而我们获得html页面的各种节点，有两种方法：

1、根据属性寻找节点
2、通过关系找节点

1、根据属性寻找节点

<html>
<head><script type="text/javascript">
/*
    通过html元素的标签属性寻找节点
    document.getElementById("html元素的id");       
    document.getElementsByTagName("标签名");
    document.getElementsByName("html元素的name");

    innerHTML 是用于设置标签体的内容的 
    value 是用于设置标的value属性的
*/
    function showImg(){
        //根据标签名字获取节点
        var images = document.getElementsByTagName("img");
        for(var i =0;i<image.length;i++){
            //设置该节点的属性
            images[i].src="";
            //此时是不用加上px
            images[i].width="300";
        }
    }

</script></head><body>

<img src="#"/>
<input type="button" onclick="showImg()" value="添加图片.."/>
</body></html>

2、通过关系找节点

<html><head><script type="text/javascript">
/*
    通过关系找标签
    parentNode  获取当前元素的父节点
    childNodes  获取当前元素的所有下一级子元素(空文本，注释也算作一个子节点)
    firstChild  获取当前节点的第一个子节点
    lastChild   获取当秦节点的最后一个子节点
    nextSibling 获取当前节点的下一个节点
    previousSibling 获取当前节点的上一个节点
*/

    var bodyNode = document.getElementsByTagName("body")[0];
    //获取父节点
    var parentNode = bodyNode.parentNode;
    //同时也会获取空白文本，注释的这些节点，所以我们需要进行排除
    var children = bodyNode.childNodes;
    //我们可以通过节点的类型进行判断筛选
    /*
    文本节点的类型 3
    注释节点的类型 8
    标签节点的类型 1
    */
    for(var i=0;i<children.length;i++){
        alert(children[i].nodeName+" "+children[i].nodeType()); 
    }

</script></head><body>

</body></html>

3、创建与插入节点

<html><head><script type="text/javascript">
/*
创建节点
    document.createElement("标签名");  创建新元素节点
    elt.setAttribute("属性名","属性值")   设置属性
    elt.appendChild(e);         添加元素到elt中的最后的位置

    elt.insertBefore(new,child);        添加子节点到指定的child子节点的前面
    elt.removeChild(child);     删除指定子节点
    (这两个方法都必须要求elt是child的直接父节点)
*/
    function add(){
        //创建节点，并为其设置属性
        var inputNode = document.createElement("input");
        inputNode.setAttribute("type","button");
        inputNode.setAttribute("value","newButton");

        //获得<body>节点
        var bodyNode = document.getElementsByTagName("body");
        //为<body>节点添加子节点
        bodyNode.appendChild(inputNode);


    }

</script><body>

    <input type="button" onclick="add()" value="add" >

</body></html>

<html><head><script type="text/javascript">
    function addFile(){
        //创建<tr>节点，两个<td>节点
        var trNode = document.createElement("tr");
        var tdNode1 = document.createElement("td");
        var tdNode2 = document.createElement("td");

        //为两个<td>节点添加内容（这里与其，特意地创建<input>和<a>节点添加到两个<td>节点当中，不如直接为其添加标签内容更加简便）
        tdNode1.innerHTML= "<input type='file' />";
        tdNode2.innerHTML="<a href='#' onclick='delFile(this)' />";

        //将两个<td>节点添加到<tr>节点当中  
        trNode.appendChild(tdNode1);
        trNode.appendChild(tdNode2);

        //获取<tbody>节点和<table>标签里面最后面的<tr>标签，以达到将新创建的节点添加到指定位置
        var tableNode = document.getElementsByTagName("tbody")[0];
        var lastRow = document.getElementById("lastRow");
        tableNode.insertBefore(trNode,lastRow);
    }

    //删除指定的<tr>节点
    function delFile(aNode){
        var trNode = aNode.parentNode.parentNode;
        var tbodyNode = document.getElementsByTagName("tbody")[0];
        tbodyNode.removeChild(trNode);
    }

</script></head><body>

    <!--table里面的元素，直接的父节点是tbody-->
    <table>
        <tr>
            <td><input type="file"></td><td><a href="#" onclick="delFile(this)"></td>
        </tr>

        <tr id="lastRow">
            <td colspan="2"><input type="button" onclick="addFile()" value="添加" /></td>
        </tr>
    </table>
</body></html>

4、操作节点的css

<html><head><script>
    //获取相应的节点
    var spanNode = document.getElementById("span");
    //操作其style属性
    spanNode.style.fontSize="100px";    
    spanNode.style.color="red";

</script></head><body>

<span id="span">1</span>

</body></html>

六、简单的JavaScript程序

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
    <!--
    这里我们需要做的是一个，标签的联动。就是一个标签的状态的改变会导致其它标签的内容或属性发生改变。
    比如，在<select id="province">标签选择不同的省份，则在<select id="city">标签里显示该省份的相应的一些城市
    -->
    <select onchange="change()" id="province">
        <option>GuangDong</option>
        <option>HuNan</option>
        <option>HuBei</option>
    </select><br>
    <select id="city"></select>
</body>

<script type="text/javascript">
    var citis = [["guangzhou","shenzhen","huizhou","dongguan"],["changsa","zhangjiajie"],["wuhan","jingzhou"]];

    function change(){
        //获取第一个select标签所选择的内容的索引值，获取对应的城市
        var provinceNode = document.getElementById("province");
        var city = citis[provinceNode.selectedIndex];

        //直接设置select标签的option标签长度为零，清空第二select标签的长度
        var cityNode = document.getElementById("city");
        cityNode.options.length=0;

        //创建城市标签，并加入对应的城市
        for(var i=0;i<city.length;i++){
            var option = document.createElement("option");
            option.innerHTML = city[i];
            cityNode.appendChild(option);
        }
    }



</script>
</html>

沈君

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。1、JavaScript的特点：1、跨平台 2、安全性（JavaScript的代码不能直接访问硬盘的内容）2、JavaSc
复制链接

扫一扫