JavaScript 简单学习

最新推荐文章于 2022-10-10 19:16:14 发布

weixin_46008168

最新推荐文章于 2022-10-10 19:16:14 发布

阅读量200

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/weixin_46008168/article/details/106101475

版权

java 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

函数
1.创建
函数创建有三种方法

方法一： var fun = new Function(形式参数列表,方法体);
方法二：function 方法名称(形式参数列表){
方法体
}

方法三： var 方法名 = function(形式参数列表){
方法体
}
主要使用方法2
例：function fun2(a , b){
alert(a + b);
}
注意：在形参列表中是不要写类型的，直接写值就好了。
这就是和java的区别。
特点：
1.形参的类型不用写,返回值类型也不写。
2.方法是一个对象，如果定义名称相同的方法，会覆盖
3.在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数。
上面这四点与java有所差别，需要引起注意。
特点4有关应用：

function add (){
           var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

        document.write(add(1,2,3,4,5,6));

Array:数组对象
1.创建
var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];
2.方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3.特点
1.js中，数组类型可变的
2.js中，数组长度可变的
测试如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>
    var arr = [1,"aaa",true];
    document.write(arr[0] + "<br>");
    document.write(arr[1] + "<br>");
    document.write(arr[2] + "<br>");
    arr[10] = "hehe";
    document.write(arr[10] + "<br>");
    document.write(arr.length);
</script>
</body>
</html>

可以看到arr[10]成功加入，并且能够输出数组长度为11。
Math:数学对象
创建：

特点：Math对象不用创建，直接使用。 Math.方法名();
方法：
random():返回 0 ~ 1 之间的随机数。含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
例：Math.ceil(4.3) = 5
正则表达式
正则表达式：定义字符串的组成规则。
单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省： {,n}:最多n次
* n如果缺省：{m,} 最少m次
开始结束符号
* ^:开始
* $KaTeX parse error: Got function '\newline' with no arguments as superscript at position 1: \̲n̲e̲w̲l̲i̲n̲e̲$ ");\w代表的是单个字符，{6，12}代表的是判断单个字符在6到12之间。
//验证
var flag = reg.test(“abcdef”);判断结果为true；
Global
特点：全局对象，直接使用，都不需要对象。
方法：
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
eval():将 JavaScript 字符串，并把它作为脚本代码来执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>

    var str = "你好，我是小卢";
    var encode = encodeURI(str);
    document.write(encode +"<br>");//%E4%BD%A0%E5%A5%BD%EF%BC%8C%E6%88%91%E6%98%AF%E5%B0%8F%E5%8D%A2
    var s = decodeURI(encode);
    document.write(s +"<br>");//你好，我是小卢
    var str = "22a234abc";
    var number = parseInt(str);//将前面部分数字进行输出
    document.write(number +"<br>");//输出结果为22
</script>
</body>
</html>

eval()的功能：比如"document.write(“hello”)"这是一个字符串，用上eval函数就可以执行里面的代码了。
DOM
一、获取页面标签对象：Element
document.getElementById(“id值”):通过元素的id获取元素对象。
注意：这个获取到的是标签对象，比如说标签，则它获取到的就是img这个标签。此时，比如说想对它的src进行更改，就可以用
var light = document.getElementById(“light”);
light.src = “img/on.gif”;
这种方式进行更改。
二、innerHTML的使用
例：

	<body>
  

  <h1 id="title">悔创阿里杰克马</h1>

<script>
//1.获取h1标签对象
  var title = document.getElementById("title");
  alert("我要换内容了。。。");
  //2.修改内容
  title.innerHTML = "不识妻美刘强东";
</script>
</body>

innerHTML在使用的过程中，需要知道，它进行替换数据的。就是说把h1标签里面的数据进行替换，修改标签体的内容。
事件
onclick：单击事件执行相应的函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button onclick="test()">test</button>
<script>

 function test(){
     alert("事件测试");
 }
</script>
</body>
</html>

BOM

1 . 概念：Browser Object Model浏览器对象模型
将浏览器的各个组成部分封装成对象。
2.组成：
Window：窗口对象
Navigator:浏览器对象
Screen：显示器对象
History:历史记录对象
Location:地址栏对象
3.Window：窗口对象(一个浏览器窗口一个Window对象)
1. 创建
2. 方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。(一次定时器)
* 参数：
参数1. js代码或者方法对象
参数2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。（循环定时器，和一次定时器参数设置一样）
clearInterval() 取消由 setInterval() 设置的 timeout。
3. 属性：
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
4. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。方法名();
测试：
测试确认框 confirm();

  <script>
 var flag = confirm("您确定要退出吗？");
 if(flag){
     //退出操作
     alert("欢迎再次光临！");
 }else{
     //提示：手别抖...
     alert("手别抖...");
 }
</script>

测试输入框

<script>
    var result =  prompt("请输入用户名");
    alert(result);
</script>

打开一个新网页测试

<body>
<h1 id = "openBtn"> test</h1>

<script>
    var openBtn = document.getElementById("openBtn");
        var newWindow;
        openBtn.onclick = function(){
            //打开新窗口
            newWindow = open("https://www.baidu.com");
        }
</script>
</body>

关闭当前网页测试

<button id = "closeBtn"> test</button>
<script>
    var closeBtn = document.getElementById("closeBtn");
    closeBtn.onclick = function(){
        // 关闭窗口
        close();
    }
</script>

关闭新的窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="opentest()">open</button>
<button onclick="closetest()"> close</button>
<script>
    var newwindow;
    function opentest() {
        newwindow = open("https://www.baidu.com");
    }
    function closetest() {
        newwindow.close();
    }
</script>
</body>
</html>

注意两个点，第一命名函数的时候，不要写open、或者close，这样会冲突的。第二点，newwindow代表的是一个新的window对象，用它来进行赋值的话，就可以代表close谁就关闭谁。
setTimeout()测试

<script>
    setTimeout("opentest()",2000);
    function opentest() {
        document.write("222");
    }
</script>

clearTimeout()取消单次定时器

<script>
     var id = setTimeout(opentest,2000);
    clearTimeout(id);
    function opentest() {
        document.write("222");
    }

</script>

clearInterval（）取消循环定时器

<script>
     var id = setInterval(opentest,2000);
    clearInterval(id);
    function opentest() {
        document.write("222");
    }

</script>

定时器的小测试：及其对应的注意事项。
例：轮播图函数的书写。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作一个轮播图</title>
</head>
<script>
    var number = 1;
    //设置一个函数
    function f() {
        number++;
        if(number >3){
            number = 0;
        }
        var img = document.getElementById("img");
        img.src = "img/banner_" + number +".jpg";
    }
    //定义定时器，每三秒调用一次f函数
    setInterval(f,3000);
</script>
<body>
        <img id="img" src="img/banner_1.jpg" width="">
</body>
</html>

代码分析：
正常javascript代码写在了body上面会有问题，
在这里插入图片描述
此时，img还没有加载，是f（）不可以调用document.getElementById()的，但是，这个例子可以的原因是有定时器，3秒后才进行调用f()函数，此时肯定加载完全了。

window，可以获取其他BOM对象
1.history
2.location
3.Navigator
4.Screen
代码如下：

<script>
    var a = history;
    var b = location;
    var c = Navigator;
    var d = Screen;
    alert(a);
    alert(b);
    alert(c);
    alert(d);

</script>

Location对象
window.location
Location 对象就是浏览器中的那个路径。
例子：

<body>
<button οnclick="f1()">test</button>
<button οnclick="f2()">test2</button>
<button οnclick="f3()">test3</button>
<script>
    function f1() {
        location.reload();
    }
    function f2() {
        location.href = "https://www.baidu.com";
    }
    function f3(){
        var a = location;
        alert(a);
    }
</script>
</body>

小案例 5秒后跳转网页

<body>
<p id = "test"></p>
<script>
    var b = 5;
    function f2() {
        if(b>0){
            var a = document.getElementById("test").innerHTML=b + "s后跳转网页....";
            b = b-1;
        }else{
            location.href = "https://www.baidu.com";
        }
    }
    setInterval(f2,1000);
</script>
</body>

windos.history
/*
History：历史记录对象
1. 创建(获取)：
1. window.history
2. history

        2. 方法：
            * back()	加载 history 列表中的前一个 URL。
            * forward()	加载 history 列表中的下一个 URL。
            * go(参数)	    加载 history 列表中的某个具体页面。
                * 参数：
                    * 正数：前进几个历史记录
                    * 负数：后退几个历史记录
        3. 属性：
            * length	返回当前窗口历史列表中的 URL 数量。


 */

代码分析

<body>

<input type="button" id="btn" value="获取历史记录个数">
<a href="https://www.baidu.com">baidu</a>
<input type="button" id="forward" value="前进">
<input type="button" id="back" value="后退">
<script>
   
    //1.获取按钮
    var btn = document.getElementById("btn");
    //2.绑定单机事件
    btn.onclick = function(){
        //3.获取当前窗口历史记录个数
        var length = history.length;
        alert(length);
    }


    //1.获取按钮
    var forward = document.getElementById("forward");
    //2.绑定单机事件
    forward.onclick = function(){
        //前进
        // history.forward();
        history.go(1);
    }
    //1.获取按钮
    var forward = document.getElementById("back");
    //2.绑定单机事件
    forward.onclick = function(){
        //前进
        // history.forward();
        history.go(-1);
    }


</script>

</body>

DOM

概念：三个单词首字母的缩写：
Document Object Model 文档对象模型，意思：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
BOM是浏览器对象模型，对浏览器（window）进行操作的，DOM是对html进行操作的。

W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
  - Document：文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment:注释对象
  - Node：节点对象，其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
  学习的是DOM模型，Document,Element,Node 这三个部分。
  Document：文档对象
  1. 创建(获取)：在html dom模型中可以使用window对象来获取
    1. window.document
    2. document
  2. 他的方法：
    1. 获取Element对象：
      1. getElementById() ：根据id属性值获取元素对象。id属性值一般唯一
      2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
      3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
      4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
    2. 创建其他DOM对象：(这个创建指在html中创建了这个标签，暂时没啥作用)
      createAttribute(name)
      createComment()
      createElement()
      createTextNode()
  3. 属性
    代码演示：

<body>

<div id="div1">div1</div>
<div id="div2">div2</div>

<div id="div3">div3</div>

<div class="cls1">div4</div>
<div class="cls1">div5</div>

<input type="text" name="username">
<script>
    var div1 = document.getElementById("div1");
    alert(div1);
    //2.根据元素名称获取元素对象们。返回值是一个数组
    var divs = document.getElementsByTagName("div");
    alert(divs.length);
    //3.根据Class属性值获取元素对象们。返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
    alert(div_cls.length);
    //4.根据name属性值获取元素对象们。返回值是一个数组
    var ele_username = document.getElementsByName("username");
    alert(ele_username.length);
    var table = document.createElement("table");
    alert(table);
</script>
</body>

Element相关方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性、
比如说一个a标签，他本身是没有属性（href）的，我通过setAttribute给他设置属性。
代码如下：

<body>
<a id = "test">hello world</a>
<button onclick="f()">设置</button>

<script>
    function f() {
        var a = document.getElementById("test");
        a.setAttribute("href","https://www.baidu.com");
    }
</script>
</body>

这时候效果如下：当启动的时候，hello world是没有href属性的，此时你点击它也没有效果，当你点击了设置以后，a就有href属性了，可以点击了。
删除属性同理也可以得到。

Node:节点对象，（先不学习）
HTML DOM

标签体的设置和获取：innerHTML
使用html元素对象的属性
控制元素样式
一.获取文件内容：

<body>
<div id="div1">
    Hello World
</div>

<script >
    var div = document.getElementById("div1");
    var innerHTML = div.innerHTML;
    alert(innerHTML);
</script>
</body>

这样输出结果就是Hello World.

<body>
<div id="div1">
    Hello World
</div>

<script >
    var div = document.getElementById("div1");
    div.innerHTML = "<input type = 'test'>";
</script>
</body>

此时会将Hello World替换成为文本输入框。
HTMLDOM控制样式

<body>

    <div id="div1">
        div1
    </div>

    <div id="div2">
        div2
    </div>


<script>
    var div1 = document.getElementById("div1");
    div1.onclick = function(){
        //修改样式方式1
        div1.style.border = "1px solid red";

        div1.style.width = "200px";

        //font-size--> fontSize
        div1.style.fontSize = "20px";
    }
    var div2 = document.getElementById("div2");
    div2.onclick = function(){
        div2.className = "d1";
    }


</script>

</body>

常见的事件
概念：某些组件被执行了某些操作后，触发某些代码的执行。
事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
事件源：组件。如：按钮文本输入框…
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点。（百度输入框没东西闪）
* 一般用于表单验证，比如：在失去焦点的时候来判断用户名有没有输入。
2. onfocus:元素获得焦点。（比如百度输入框有东西在闪）

        3. 加载事件：
            1. onload：一张页面或一幅图像完成加载。

        4. 鼠标事件：
            1. onmousedown	鼠标按钮被按下。
                * 定义方法时，定义一个形参，接受event对象。
                * event对象的button属性可以获取鼠标按钮键被点击了。
            2. onmouseup	鼠标按键被松开。
            3. onmousemove	鼠标被移动。
            4. onmouseover	鼠标移到某元素之上。
            5. onmouseout	鼠标从某元素移开。


        5. 键盘事件：
            1. onkeydown	某个键盘按键被按下。
            2. onkeyup		某个键盘按键被松开。
            3. onkeypress	某个键盘按键被按下并松开。

        6. 选择和改变
            1. onchange	域的内容被改变。
            2. onselect	文本被选中。

        7. 表单事件：
            1. onsubmit	确认按钮被点击。
                * 可以阻止表单的提交
                    * 方法返回false则表单被阻止提交。
            2. onreset	重置按钮被点击。

测试代码：

   <body>
<input id="username">
<script>
   //1.失去焦点事件
   document.getElementById("username").onblur = function(){
       alert("失去焦点了...");
   }
</script>

</body>
   ```
   onload作用：可以将script代码写在body上面了，等body加载完毕，在加载script。

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTMLDOM</title>
</head>
<script>
   //等所有页面加载完成了再回来执行函数
   window.onload = function f(){
       //1.失去焦点事件
       document.getElementById("username").onblur = function(){
           alert("失去焦点了...");
       }
   }
</script>
<body>
<input id="username">
</body>
</html>

onchange:假设里面是一个文本框，当里面数据改变的时候，会执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
</head>
<script>
    //等所有页面加载完成了再回来执行函数
    window.onload = function f(){
        //1.失去焦点事件
        document.getElementById("username").onchange = function(){
            alert("里面内容改变了...");
        }
    }

</script>
<body>
<input id="username">


</body>
</html>

当输入aa时，结果如下：
在这里插入图片描述
onsubmit 在提交表单校验的时候用
代码如下：因为flag=false 所有无法提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
</head>
<script>
    //等所有页面加载完成了再回来执行函数
    window.onload = function f(){

        document.getElementById("form").onsubmit = function(){
            //校验用户名格式是否正确
            var flag = false;


            return flag;
        }
            

</script>
<body>
<form action ="#" id = "form">
<input name ="username" id="username">
<input type = "submit" value="提交">
</form>
</body>
</html>

weixin_46008168

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 简单学习

函数1.创建函数创建有三种方法方法一： var fun = new Function(形式参数列表,方法体);方法二：function 方法名称(形式参数列表){方法体}方法三： var 方法名 = function(形式参数列表){方法体}主要使用方法2例：function fun2(a , b){alert(a + b);}注意：在形参列表中是不要写类型的，直接写值就好了。这就是和java的区别。特点：1.形参的类型不用写,返回值类型也不写。2.方法是一个对象，如果定
复制链接

扫一扫