前端篇----JavaScript-CSDN博客

本文链接：https://blog.csdn.net/qq_21467113/article/details/88776554

一、JavaScript基础规范

1.JavaScript的引入方式

{#1 直接编写#}
    <script>
        alert('hello yuan')
    </script>
{#2 导入文件#}
    <script src="hello.js"></script>

2. JavaScript的基础

①变量：声明变量时不用声明变量类型，全使用var关键字

②注释：支持多行注释和单行注释. /* */ //

③代码规范：每行结束可以不加分号. 没有分号会以换行符作为每行的结束；

使用{}来封装代码块。

3.JavaScript的函数

function 函数名 (参数){ 
    函数体;
    return 返回值;
}

注：保留字指js中代表特定含义的词，不允许再定义。

函数的功能说明：

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return

匿名函数：

// 匿名函数
    var func = function(arg){
        return "tony";
    }

// 匿名函数的应用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
    })('123')

4.JavaScript的数据类型、运算符、控制语句与循环

与C语言中的语法规范大致一致

二、JavaScript的数组对象

1.创建数组对象

Array 对象用于在单个的变量中存储多个值。
语法:

创建方式1:
var a=[1,2,3];

创建方式2:
new Array();     //  创建数组时允许指定元素个数也可以不指定元素个数。
new Array(size);//if 1个参数且为数字,即代表size,not content
    初始化数组对象:
    var cnweek=new Array(7);
        cnweek[0]="星期日";
        cnweek[1]="星期一";
        ...
        cnweek[6]="星期六";

new Array(element0, element1, ..., elementn)//也可以直接在建立对象时初始化数组元素，元素类型允许不同

var test=new Array(100,"a",true);

2.Array对象的方法

3.连接数组的方法

//连接数组-join方法
//书写格式
//x.join(bystr)
//使用注解
//
//x代表数组对象
//bystr作为连接数组中元素的字符串
//返回连接后的字符串
//与字符串的split功能刚好相反
    
var arr1=[1, 2, 3, 4, 5, 6, 7];

var str1=arr1.join("-");

alert(str1);
//结果为"1-2-3-4-5-6-7"
__________________________________________________________________________________
//连接数组-concat方法
//
//x.concat(value,...)


var a = [1,2,3];
var a = new Array(1,2,3);
var b=a.concat(4,5) ;


alert(a.toString());
//返回结果为1,2,3
alert(b.toString());
//返回结果为1,2,3,4,5

三、 JavaScript的window对象

BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

1.Window对象的方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

2.定时器的使用示例

①setInterval clearInterval

<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
    function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;
    }
    var clock;
    function begin(){
        if (clock==undefined){
             showTime();
             clock=setInterval(showTime,1000);
        }
    }
    function end(){
        clearInterval(clock);
    }
</script>

② setTimeout clearTimeout

var ID = setTimeout(abc,2000); // 只调用一次对应函数.
            clearTimeout(ID);
    function abc(){
        alert('aaa');
    }

四、 JavaScript的History 对象和Location 对象

1.History 对象

①History 对象属性

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

length  返回浏览器历史列表中的 URL 数量。

②History 对象方法

back()    加载 history 列表中的前一个 URL。
forward()    加载 history 列表中的下一个 URL。
go()    加载 history 列表中的某个具体页面。
————————————————————————————————————————————————————————————————————————————————
<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

2.Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象方法：

location.assign(URL)
location.reload()
location.replace(newURL)//注意与assign的区别

五、 JavaScript的DOM节点

JavaScript的DOM节点

六、JavaScript关于onsubmit事件与组织事件

1.阻止表单的提交

onsubmit:是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

<form id="form">
            <input type="text"/>
            <input type="submit" value="点我!" />
</form>

<script type="text/javascript">
            //阻止表单提交方式1().
            //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.

            var ele=document.getElementById("form");
            ele.onsubmit=function(event) {
//                alert("验证失败 表单不会提交!");
//                return false;
                
            // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
             alert("验证失败 表单不会提交!");
             event.preventDefault();

    }