JS学习笔记上

最新推荐文章于 2024-10-07 21:15:54 发布
最新推荐文章于 2024-10-07 21:15:54 发布
阅读量447 收藏
点赞数
分类专栏： js Web 文章标签： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/43574039
版权
Web 同时被 2 个专栏收录
145 篇文章 0 订阅
订阅专栏
js
21 篇文章 0 订阅
订阅专栏

1.基础教程

JavaScript介绍:

1.JavaScript是互联网上最流行的脚本语言,这门语言可以用于web和HTML,
更可广泛用于服务器,pc端,移动端.
2.JavaScript脚本语言
JavaScript是一种轻量级的编程语言
JavaScript是可插入HTNL页面的编程代码
JavaScript插入HTML页面后,可由所有浏览器执行

JavaScript实现:
1.JavaScript用法:
HTML中的脚本必须位于<script></script>标签之间
脚本可被放置在HTML页面的<body>和<head>部分中
2.JavaScript标签:
在HTML中插入JavaScript,使用<script>标签
在<script></script>直接按书写代码
3.JavaScript使用限制:
在HTML中,不限制脚本数量
通常会把脚本放置与<head>标签中,以不干扰页面内容 
document.write("hello!");

JavaScript输出
1.JavaScript通常用来操作HTML
2.文档输出: 
    document.write("<p>this is my first JavsScript</p>");

JavaScript语法:
1.JavaScript语句:
JavaScript语句向浏览器发出的命令.语句的作用是告诉浏览器该做什么
2.分号:
语句之间的分割是分号(;)
注意:分号是可选项,有时候看到不以分号隔开的
3.JavaScript代码:
按照编写顺序依次执行
4.标识符:
JavaScript标识符必须以字母,下划线或美元符号开始
JavaScript关键字
5.JavaScript对大小写敏感
JavaScript同样对大小写很敏感
6.空格
JavaScript会忽略掉多余的空格
7.代码换行
不要拆单词
8.保留字

JavaScript注释
1.单行注释
//
2.多行注释

/**/

JvaScript变量
1.变量是用来存储信息的"容器"
例:var x = 10;
var y = 10.1;
var z = "hello";

JvaScript数据类型
1.字符串(String)
2.数字(Number)
3.布尔(Boolean)
4.数组(Array)
5.对象(Object)
6.空(null)
7.未定义
8.可以通过赋值为null的方式清除变量

var arr = [1,true,"hello",4];
//alert(arr[1]);

var arr2 = new Array(1,"hello",true);

var arr3 = new Array();//数组不用规定大小,动态
arr3[0] = 10;

2.语法详解

JavaScript运算符
1.算数运算符
+,-,*,%,/,++,--
2.赋值运算符
=,+=,-=,*=,/=,%=
3.字符串操作
4.比较运算符(返回的是boolean类型)
==,===,!=,!==,>,<,>=,<=
5.逻辑运算符:
&&,||,!
6.条件运算符:
例:x<10? "x比10小" : "x比10大" 

var a = 10;
var b = "10";
alert(a == b);//true   不需满足类型相同   !=  也是这规则
alert(a ===b);//false  必须满足类型相同   !== 也是这规则
JavaScript条件语句
1.if...else
2.switch 
var i = 2;
switch (i){
    case 1:
        document.write("i = 1");
        break;//跳出当前的循环
    case 2:
        document.write("i = 2");
        break;
    case 3:
        document.write("i = 3");
        break;
    default ://不满足任何case
        document.write("条件不满足");
        break;
}
JavaScript循环语句
1.for循环,for/in
2.while循环,do...while 

var i=[1,2,3,4,5,6];
var j;
for(j in i){
    document.write(i[j]);//123456
}

var k = 11;
do{//while是先判断再执行,do...while是先执行一次,在判断,执行
    document.write(k);
    k++;
}while(k<=10){

}
JavaScript跳转语句
1.break 跳出当前循环,没有下一次循环
2.continue 结束本次循环,进行下一次循环

3.函数

了解函数

1.函数
函数是由时间驱动的或者当它被调用时执行的可重复使用的代码块

例:实现10组数字的和

定义函数
1.定义函数:
function 函数名(){
函数体;(代码块)
}
2.注意:
JavaScript对大小写十分敏感,所以这里的function必须小写.
在函数调用时,也必须按照函数的相同名称来调用函数

函数调用
1.函数调用:
函数在定义好之后,不能自动执行,需要进行调用
2.调用方式:
1).在<script>标签内调用
2).在HTML文件中调用

function biaoqianneidiaoyong(){
    alert("在<script>标签内调用");
}
biaoqianneidiaoyong();

带参数的函数
1.函数参数
在函数调用中,也可以传递值,这些值被称为参数
例:demo(arg1,arg2);
2.参数的个数可以任意多，，每个参数通过","隔开
3.注意:
参数在传递时,其顺序必须一致
4.参数意义：
通过传递参数的个数以及阐述的类型不同完成不同的功能

带返回值的函数
1.返回值
有时,我们需要将函数的值返回给调用他的地方
通过return语句就可以实现
注意:在使用return语句时,函数会停止执行,同时返回值

function demo(a,b){
    if(a>b){
        return alert("a大");//不介意这么用
    }else{
        return alert("b大");
    }
}
//demo(10,20);
var i = demo(10,20);

/*局部变量和全局变量*/
var n =10;    m=10;//全局变量   任何地方都可以使用
function demo(){
    var i = 10;//局部变量,只能在当前函数中使用,要在函数调用后才可以使用
    x = 10;//全局变量   任何地方都可以使用
    n=1;
}
demo();
//alert(i); //没反应,算出错
alert(x);   //输出10
alert(n);   //输出1
alert(m);   //输出10

4.异常处理和事件处理

异常捕获
1.异常
当JavaScript引擎执行JavaScript代码时,发生了错误,导致程序停止运行
2.异常抛出
当异常产生，并且将这个异常生成一个错误信息
3.异常捕获
try{
发生异常的代码块;
}catch(err){
错误信息处理;
}

function demo() {
//    alert(str);
    try {
        alert(str);
    } catch (err) {
        alert(err);
    }
}
//demo();
4.Throw语句:
通过throw语句创建一个自定义错误 
function d() {
    var e = document.getElementById("txt").value;
    try {
        if (e == "") {
            throw "请输入";
        }
    } catch (err) {
        alert(err);//若为"",弹出 "请输入"
    }
}

事件
1.什么是事件
时间是可以被JavaScript侦测到的行为
2.主要事件:
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件 (指选中内容而不是点击文本框)
onFocus 光标聚集事件 (点击文本框)
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件 
/*<input type="text" οnselect="selectm(this)">*/
function selectm(m){
    m.style.background="red";
}

/*<body οnlοad="mg()">*/
function mg(){
    alert("网页加载事件");
}

5.DOM对象

DOM简介
1.HTML DOM:
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model) 
                           Document
                              |
                          Root element<HTML>
                              |
  ---------------------------------------------------------
  |                                                       |
 Element:                                              Element:
 <head>                                                <body>
   |                                                     |
 Element:                  --------------------------------------------
  <title>                  |                     |                   |
   |                    Attribute:          Element:              Element:
  Text:                  "href"               <a>                    <h1>
  "My title"                                   |                      |
                                              Text:                 Text:
                                             "My link"           "My header"

2.DOM操作HTML:
1):JavaScript能够改变页面中的所有HTML元素
2):JavaScript能够改变页面中的所有HTML属性
3):JavaScript能够改变页面中的所有CSS样式
4):JavaScript能够对页面中的所有事件做出反应


DOM操作HTML:
1.改变HTML输出流
注意:绝对不要在文档加载完成后使用document.write().这会覆盖该文档
2.寻找元素:
通过id找到HTML元素
通过标签名找到HTML元素
3.改变HTML内容
使用属性:innerHTML
4.改变HTML属性
使用属性:attribute

function d(){
    document.getElementsByTagName("p");//相同元素的第一个
}
DOM操作CSS
1.通过DOM对象改变CSS
语法:document.getElementById(id).style.property=new styl 
function m(){
    alert(1)
    /*<button οnclick="m()">按钮</button>*/
    document.getElementById("d").style.background="yellow";
}

DOM EventListener
1.DOM EventListener:
方法:addEventListener();
removeEventListener();
2.addEventListener(): ("事件",做什么) 句柄之间不会覆盖
方法用于向指定元素添加事件句柄
3.removeEventListener(): 同上
溢出方法添加的事件句柄 

function d() {
    document.getElementById("div").innerHTML = "2";
}
<p id="div">hello</p>
<button οnclick="d()">按钮</button>
<hr>
<button id="btn">按钮</button>
<button id="btn2">按钮2</button>
<script>
    document.getElementById("btn").addEventListener("click", function () {
        alert("hello")
    });

    var a = document.getElementById("btn2");
    a.addEventListener("click",f1);//不用括号   句柄
    a.addEventListener("click",f2());//加载完就运行,点击没反应
    a.removeEventListener("click",f1);
    a.removeEventListener("click",f2());//加载完弹出2次!错误
    function f1(){
        alert(1)
    }
    function f2(){
        alert("不能加括号")
    }

</script>

6.事件详解

事件流
1.事件流:
描述的是在页面中接受事件的顺序
2.事件冒泡
由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点(文档)
3.事件捕获:
最不具体的节点先接收事件,而最具体的节点应该是最后接收事件

事件处理
1.HTML事件处理:
直接添加到HTML结构中
2.DOM0级事件处理 //写法方便但会被覆盖
把一个函数复制给一个事件处理程序属性
3.DOM2级事件处理
addEventListener("事件名","事件处理函数","布尔值");
true:事件捕获
false:事件冒泡
removeEventListener();
4.IE事件处理程序(IE8及以下) 只是名称不一样
attachEvent
detachEvent

<button id="btn1">按钮DON0</button>
<script>
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function () {
        alert("DOM0级事件处理1");
    }
    btn1.onclick = function () {//缺点,1被覆盖
        alert("DOM0级事件处理2");
    }
    //        btn1.onclick = null;//清除事件
</script>
<hr>
<button id="btn2">DOM2</button>
<script>
    var btn2 = document.getElementById("btn2").addEventListener("click", function () {
        alert("DOM2")
    })
    var btn20 = document.getElementById("btn2");
    btn20.addEventListener("click", a);
    btn20.addEventListener("click", b);
    btn20.addEventListener("click", a);//无效
    function a() {
        alert("DOM2-2");
    }
    function b() {
        alert("DOM2-3");
    }
    btn20.removeEventListener("click", b);
</script>
<hr>
<button id="btn3">3333</button>
<script>
    var btn20 = document.getElementById("btn3");
    if (btn20.addEventListener) {
        btn20.addEventListener("click", d);
    } else if (btn20.attachEvent) {
        btn20.attachEvent("onclick", d);
    } else {//DOM0
        btn20.onclick = d();
    }

    function d() {
        alert("hello");
    }
</script>

事件对象
1.事件对象
在出发DOM事件的时候都会产生一个对象
2.事件对象event:
1):type:获取事件类型
2):target:获取事件目标
3):stopPropagation():阻止事件冒泡
4):preventDefault():阻止事件默认行为 

<div id="div">
    <button id="btn1">按钮</button>
    <a href="http://www.baidu.com" id="aid">百度</a>
</div>
<script>
    document.getElementById("btn1").addEventListener("click", show);
    function show(event) {
        //       alert(event.type)//获取事件类型
        alert(event.target)//获取事件目标
    }

    document.getElementById("div").addEventListener("click",showDiv);
    function showDiv(){
        alert("事件的冒泡");
    }

    document.getElementById("aid").addEventListener("click",showa);
    function showa(event){
   //     event.stopPropagation();//阻止事件冒泡
        event.preventDefault();//阻止事件默认行为 即不会跳转了
    }
</script>

7.内置对象

什么是对象
1.什么是对象:
JavaScript 中的所有事物都是对象:字符串,数值,数组,函数...
每个对象带有属性和方法
JavaScript 允许自定义对象
2.自定义对象:
1):定义并创建对象实例
2):使用函数来定义对象,然后创建新的对象实例 
<!-- 创建对象-->
   <script>
       people = new Object();
       people.name = "iwen";
       people.age = "30";

       people2 = {name:"iwen2",age:"31"};

       function people3(name1,age1){
           this.name = name1;
           this.age = age1;
       }
       son=new people3("iwan3",32);
       document.write(son.name+son.age1)//iwan3undefined
   </script>

String字符串对象
1.String对象
String对象用于处理已有的字符串
字符串可以使用双引号或单引号
2.在字符串中查找字符串:indexOf()
3.内容匹配:match();
4.替换内容:replace()
5.字符串大小写转换:toUpperCase()/toLowerCase()
6.字符串转为数组:strong>split() 
<script>
    var str = "Hello World";
    //    document.write(str.length);//11
    //    document.write(str.indexOf("World"));//存在返回开始位置,否则-1
    //    document.write((str.match("World")));//存在返回字符串,否则返回null
    //     document.write(str.replace("World","修改成这个"));//左边是本来存在的
    //   document.write(str.toUpperCase());
    var str1 = "hello,world,hehe";
    var s = str1.split(",");
    document.write(s[1]);//world
</script>

Date日期对象
1.Date对象
日期对象用于处理日期和时间
2.获得当日的日期
3.常用方法:
getFullYear();获取年份
getTime();获取毫秒
setFullYear();设置具体的日期
getDay();获取星期 

<script>
    window.οnlοad=startTime;
    var date = new Date();
    //        document.write(date.getFullYear());
    //        document.write(date.getTime())

    /* date.setFullYear(2010,1,1)
     document.write(date);*///Mon Feb 01 2010 20:17:17 GMT+0800 (中国标准时间)

    // 时钟
    function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById("timetxt").innerHTML = h + ":" + m + ":" + s;
        t = setTimeout(function () {
            startTime();
        }, 500)
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }

</script>
<div id="timetxt"></div>

Array数组对象
1.Array对象
使用单独的变量名来储存一些列的值
2.数组的创建
例:var myArray=["Hello","iwen","ime"];
3.数组的访问:
通过指定数组名以及索引号码,你可以访问某个特定的元素
注意:[0]是数组的第一个严肃.[1]是数组的第二个元素.
4.数组常用方法:
concat():合并数组
sort():排序
push():末尾追加元素
reverse():数组元素翻转 

<script>
    var a = ["hello", "world"];
    var b = ["iwen", "ime"];
    var c = a.concat(b);
    //        document.write(c);//hello,world,iwen,ime
/*    var d = [1, 3, 2, 0, 9]
    document.write(d.sort());//0,1,2,3,9
    document.write(d.sort(function (a, b) {//9,3,2,1,0
        return b - a;
    }))*/

   /* var e = ["a","b"];
    document.write(e.push("c"));//3
    document.write(e);//a,b,c*/

    var f = ["c","b","a","6"];
    document.write(f.reverse());//6,a,b,c
</script>

Math对象
1.Math对象
执行常见的算数任务
2.常用方法
round():四舍五入
random():返回0-1之间的随机数
max():返回最高值
min():返回中的最低值
abs():返回绝对值 

<script>
    //    document.write(Math.round(2.5));//3
    //   document.write(Math.random());
    //   document.write(parseInt(Math.random() * 10))//0-9整数
    //    document.write(Math.max(1,2,10,3));//10
    //    document.write(Math.abs(-10));//10
</script>


月迷津渡丶
关注
专栏目录
javascript学习笔记
11-24
在实际使用中，JavaScript通常通过`<script>`标签内联嵌入HTML文档，或者引用外部.js文件。需要注意的是，`<script>`标签的位置会影响代码的执行时机，通常建议将其放置在`<head>`或`<body>`标签的底部，以确保在...
JavaScript学习笔记之JS函数
11-27
函数就是包裹在花括号中的代码块，前面使用了关键词function： 复制代码 代码如下: function functionName() {  这里是要执行的代码 } 函数参数 　函数的参数可以任意多个，不用声明变量类型，只用给出变量名： ...
JavaScript 用法（一）
AspenStars
04-29 483
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是脚本语言 JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1141
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
javascript学习笔记——上
最新发布
weixin_64574004的博客
10-07 941
​ 1，HTML定义了网页的内容，CSS定义了网页的布局和网页中内容的样式，而JavaScript控制了网页的行为。​ 2，javascript是一种脚本语言。​ 3，javascript的主要使用范围​ **JavaScript：直接写入HTML输入流：**ducument.write(“HTML语句”)​ **JavaScript：对事件的反应：**onclick​ **JavaScript：改变HTML内容：**DOM。
Javascript入门学习笔记
weixin_61370021的博客
04-27 4678
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
Node.js学习笔记
2301_79614379的博客
07-21 1075
前端工程化：开发项目直到上线，过程中集成的所有技术和工具。Node.js是前端工程化的基础（因为Node.js可以主动读取前端代码内容。Node.js模块化：概念：每个文件当做一个模块，独立作用域，按需加载使用：采用特定的标准语法导出和导入进行使用CommonJs标准：一般应用在Node.js项目环境中ECMAScript标准：一般应用在前端工程化项目中Node.js包：概念：把模块文件，代码文件，其他资料聚合成一个文件夹项目包：编写项目需求和业务逻辑的文件夹。
js学习笔记
angel_791的博客
06-11 5194
JavaScript学习笔记 前端学习
BabylonJS初学习笔记
qq_46098517的博客
01-26 311
初步接触Babylonjs，由于学习跨度会比较大，所以就做了一些笔记，在此分享出来，希望能够对那些和我一样学习的新人有所帮助。
JavaScript学习笔记
qq_53388077的博客
03-30 1628
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
JavaScript学习笔记_js常用函数封装_js包.zip
11-04
本压缩包“JavaScript学习笔记_js常用函数封装_js包.zip”包含了对JavaScript基础及进阶技巧的学习资料，特别关注了函数封装和模块化开发实践。 首先，`tool.js`可能是一个实用工具函数集合，封装了一些常见的...
JavaScript学习笔记之JS对象
11-28
在本篇学习笔记中，我们将重点关注两种基本的对象类型：日期对象（Date）和数组对象（Array）。 首先，让我们来看看日期对象Date。在JavaScript中，Date对象用于处理日期和时间。创建一个Date对象的基本格式是`new ...
保存blob为本地文件
月迷津渡丶的专栏
01-09 9406
var reader = new FileReader() reader.onload = function(){ var buffer = new Buffer(reader.result) //temp文件夹应已存在 fs.writeFile(`temp/${Date.now()}.mp4`, buffer, {}, (err, res) => { if
基于JavaScript的在线语音识别库Julius
月迷津渡丶的专栏
02-23 2679
JuliusJS需要的文件有点多(不包括index.html和js.js): html: 只需要引入julius.js 说一些话 这里显示你说的话(IE11测试不支持,Chrome支持) 在IE11中测试没提示要麦克风,也没有效果,下图为谷歌内核 js.jsvar julius = new Julius();//实例化 julius.onrecognition = fu
完整的可按年份和月份查询数据并显示
月迷津渡丶的专栏
01-29 2184
效果: 页面的数据准备: Map map = findresult(type, date); List list = statisticsService.StatisticsInterrogatelist(map); request.setAttribute("StatisticsResult", list); 这里的JavaBean: public class
TypeScript环境搭建
月迷津渡丶的专栏
02-17 1759
1.介绍 TypeScript介绍 1.TypeScript简介:     TypeScript是微软开发的JavaScript的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行. 2.TypeScript与JavaScript比较:     TypeScript与JavaScript相比进步的地方包括:加入注释,让编译器理解所支持的对象和函数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值