JavaScript学习笔记（基础篇）

最新推荐文章于 2024-05-30 16:03:48 发布
最新推荐文章于 2024-05-30 16:03:48 发布
阅读量553 收藏 10
点赞数 1
分类专栏： JavaScript Java学习 文章标签： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40146789/article/details/88784034
版权

JavaScript学习笔记（基础篇）

 

第一章 问候JavaScript 他大爷

第一节：JavaScript 简介

百度百科：

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

组成部分：

ECMAScript，描述了该语言的语法和基本对象。

 

第二章 JavaScript 基本语法

第一节：JavaScript 引入方式

内部

<script type="text/javascript">

    alert("可放于head或body");

</script>

外部

另建js文件my.js

引入：<script type="text/javascript" src="my.js"></script>

 

第二节：JavaScript 注释

单行： // ； 多行： /* */ ；

 

第三节：JavaScript 变量

JavaScript 是弱类型语言，统一用 var 来定义变量；

 

第四节：JavaScript 基本数据类型

数值类型；字符串类型；布尔类型； Undefined(表示变量不含有值) Null(置空变量)

    var a=1;

    document.write("数值类型a="+a+"<br/>");

    var b="字符串";

    document.write("字符串类型b="+b+"<br/>");

    var c=true;

    document.write("布尔类型c="+c+"<br/>");

   

    var d; //undefined表示变量不含值

    document.write("d="+d+"<br/>");

    var e="我想置空";

    document.write("e="+e+"<br/>");

    e=null;       //变量置空

    document.write("e="+e+"<br/>");

第五节：JavaScript 运算符

1，算术运算符；

加+         减-        乘*         除/         求余%     自增       自减

2，赋值运算符；

       x+=y      x-=y       x*=y        x/=y       x%=y

3，比较运算符；

      

4，逻辑运算符；

      

5，三目运算符；

      

6，字符串连接“+”

<script type="text/javascript">

 var x=10,y='4';

 document.write("x="+x+",y="+y+"<br/>");

 document.write("(x+y),结果"+(x+y)+"<br/>");

</script>

      

第六节：JavaScript 选择与循环语句

1，if...else 语句；

<script type="text/javascript">

 var a=1;

 if(a>2){

     alert("a>2");

 }else{

     alert("a<=2");

 }

 

 var month=6;

 if(month>=1&&month<=3){

     alert("春天");

 }else if(month>=4&&month<=6){

     alert("夏天");

 }else if(month>=7&&month<=9){

     alert("秋天");

 }else if(month>=10&&month<=12){

     alert("冬天");

 }else{

     alert("逆天了");

 }

</script>

  1. switch 语句；

<script type="text/javascript">

 var d=6;

 switch(d){

 case 1:alert("周一");break;

 case 2:alert("周二");break;

 case 3:alert("周三");break;

 case 4:alert("周四");break;

 case 5:alert("周五");break;

 case 6:alert("周六");break;

 case 7:alert("周日");break;

 default:alert("逆天了");

 }

</script>

  1. for 循环语句；

<script type="text/javascript">

 for(var i=0;i<10;i++){

     document.write("i="+i+"<br/>");

 }

</script>

4，while/do..while 语句；

<script type="text/javascript">

 var i=0;

 while(i<10){

     document.write("i="+i+"<br/>");

     i++;

 }

 

 var j=0;

 do{

     document.write("j="+j+"<br/>");

     j++;

 }while(j<10);

</script>

 

第七节：JavaScript 函数

<body>

<script type="text/javascript">

 function fun1(){

     alert("我的第一个方法");

 }

 

 function fun2(param1){

     alert(param1);

 }

 

 function fun3(param1,param2){

     alert(param1+" "+param2);

 }

 

 function fun4(param1,param2){

     return param1+" "+param2;

 }

 fun1();

 fun2("fuck");

 fun3("fuck","you");

 var result=fun4("fuck","you");

 alert(result);

</script>

</body>

第八节：Break VS Continue

<script type="text/javascript">

   document.write("break;<br/>");

   for(var i=0;i<10;i++){

       if(i==5){

          break;

       }

       document.write("i="+i+"<br/>");

   }

   document.write("<hr/>");

   document.write("continue;<br/>");

   for(var j=0;j<10;j++){

       if(j==5){

          continue;

       }

       document.write("j="+j+"<br/>");

   }

</script>

第三章 JavaScript 操作 DOM 节点

第一节：JavaScript 处理 DOM 事件

<title>JavaScript处理DOM事件</title>

<script type="text/javascript">

    function fuck(){

       alert("点我干嘛？");

    }

</script>

</head>

<body>

<input type="button" value="点我一下" onclick="fuck()"/>

</body>

点击后弹框如下：

 

第二节：JavaScript 操作 DOM 节点

1，JavaScript 修改 DOM 节点

2，JavaScript 添加 DOM 节点

3，JavaScript 删除 DOM 节点

<title>JavaScript 操作 DOM节点</title>

</head>

<script type="text/javascript">

    //修改DOM节点

    function modifyDOM()

    {

       document.getElementById("txt").innerHTML="用户名：";    //font是容器，用innerHTML

       document.getElementById("userName").value="Luffy";

    }

   

    function addDOM()

    {  

       //在son1前添加DOM节点

       var para=document.createElement("p");

       var node=document.createTextNode("我在前面");

       para.appendChild(node);

       var parent=document.getElementById("parent");

       var son1=document.getElementById("son1");

       parent.insertBefore(para,son1); //insertBefore：在对象parent里面的son1前加para

       //在son1后添加DOM节点

       var para2=document.createElement("p");

       var node2=document.createTextNode("我在后面");

       para2.appendChild(node2);

       parent.appendChild(para2);  //appendChild：在对象parent里面的后面加para2

    }

    //删除son1节点

    function removeDOM()

    {

       var parent=document.getElementById("parent");

       var son1=document.getElementById("son1");

       parent.removeChild(son1);

    }

</script>

<body>

<div id="parent">

    <div id="son1">

       <font id="txt">:</font><input type="text" id="userName" name="userName"/>

    </div>

</div>

<input type="button" value="修改DOM节点" onclick="modifyDOM()"/>

<input type="button" value="添加DOM节点" onclick="addDOM()"/>

<input type="button" value="删除DOM节点" onclick="removeDOM()"/>

</body>

依次点击按钮，结果如下：

1）

2）

3）

第三节：JavaScript 修改 DOM 节点 CSS 样式

<title>JavaScript修改DOM节点CSS样式</title>

<script type="text/javascript">

    function modifyDOMCSS(){

       document.getElementById("gril").style.color="red";

    }

</script>

</head>

<body>

<p id="gril">女程序猿</p>

<input type="button" value="修改DOM节点样式" onclick="modifyDOMCSS()"/>

</body>

 ——>

 

第四章 JavaScript 对象

第一节：JavaScript 对象

1，JavaScript 对象定义

2，JavaScript 动态的添加属性和方法

3，JavaScript 动态的删除属性和方法

<script type="text/javascript">

    function speak(something)

    {

       alert(something);

    }

    var p=new Object();

    p.name="Luffy";   //动态添加属性

    alert(p.name);

    p.func=speak; //动态添加方法

    p.func("I am something!");

   

    delete p.name;    //动态删除属性

    alert(p.name);

    delete p.func;    //动态删除方法

//  p.func("I am something!");

</script>

 

4，JavaScript 对象构造方法

    //Javascript对象构造方法

    function person(name1,age1)

    {

       this.name=name1;

       this.age=age1;

       function speak(something)   //可包含方法

       {          alert(something);

       }

       this.func=speak;

    }

    var pers=new person("Luffy",19);

    alert(pers.name);

    pers.func("你老婆真棒！");

 

第二节：JavaScript 字符串对象

1，字符串对象实例化方法

2，字符串length属性

3，字符串indexOf()方法     使用indexOf()来定位字符串中某一个指定的字符首次出现的位置

4，字符串replace()方法     使用replace()方法在字符串中用某些字符替换另一些字符

<script type="text/javascript">

    var s1="实例化字符串方式一";

    var s2=new String("实例化字符串abc方式二");

    document.write(s1+"<br/>");

    document.write(s2+"<br/>");

    document.write(s2+"的长度是："+s2.length+" <br/>");

    document.write(s2.indexOf("abc", 0)+"<br/>");

    document.write(s2.replace("abc", "java1234")+"<br/>");

</script>

 

第三节：JavaScript 日期对象

1，日期对象实例化

2，getTime()方法，返回 1970 年 1 月 1 日至今的毫秒数。

3，getFullYear() 从 Date 对象以四位数字返回年份。

4，getMonth() 从 Date 对象返回月份 (0 ~ 11)。

5，getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

6，getHours() 返回 Date 对象的小时 (0 ~ 23)。

7，getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

8，getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

9，getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

 

<body>

<script type="text/javascript">

    var date=new Date();

    document.write(date.getTime()+"<br/>");

    document.write(date.getFullYear()+"<br/>");

    document.write((date.getMonth()+1)+"<br/>");

    document.write(date.getDate()+"<br/>");

    var today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";

    document.write(today+"<br/>");

    document.write(date.getHours()+"<br/>");

    document.write(date.getMinutes()+"<br/>");

    document.write(date.getSeconds()+"<br/>");

    today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日  "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

    document.write(today+"<br/>");

    var day=date.getDay();

    var week;

    switch(day){

    case 0:week="星期日";break;

    case 1:week="星期一";break;

    case 2:week="星期二";break;

    case 3:week="星期三";break;

    case 4:week="星期四";break;

    case 5:week="星期五";break;

    case 6:week="星期六";break;

    }

    document.write(week+"<br/>");

    today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日  "+week+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

    document.write(today+"<br/>");

</script>

</body>

 

第四节：JavaScript 数组

1，数组的声明；

2，数组的遍历；

3，数组元素排序 sort()方法；

4，数组元素组合成字符串 join()方法；

5，合并数组元素 concat()方法；

6，颠倒数组元素 reverse()方法；

 

<body>

<script type="text/javascript">

    var arr=new Array();

    var arr2=new Array(3);

    arr[0]="jack";

    arr[1]="marry";

    arr[2]="tom";

    arr[3]="lucy";

    arr[4]="june";

   

    arr2[0]=2;

    arr2[1]=1;

    arr2[2]=5;

   

    for(var i=0;i<arr.length;i++){

       document.write(arr[i]+"<br/>");

    }

    document.write("<hr/>");

    for(var j in arr2){      //i是数组下标

       document.write(arr2[j]+"<br/>");

    }

    document.write("<hr/>");

    document.write("sort()"+arr.sort()+"<br/>");

    document.write("sort()"+arr2.sort()+"<br/>");

    document.write("<hr/>");

    document.write("join()"+arr.join()+"<br/>");  //数组元素组合成字符串 join()方法；默认用逗号隔开

    document.write("join()"+arr2.join("-")+"<br/>");

    document.write("<hr/>");

    document.write("concat()"+arr.concat(arr2)+"<br/>"); //合并数组元素 concat()方法

    document.write("<hr/>");

    document.write("reverse()"+arr.reverse()+"<br/>");   //颠倒数组元素 reverse()方法；

</script>

</body>

 

第五章 JavaScript 常用函数

第一节：JavaScript 全局函数

全局函数不属于任何一个内置对象。

JavaScript 包含以下 7 个全局函数，用于一些常用的功能：

eval(),escape(),unescape(),isNan(),isFinite(),parseFloat(),parseInt()。

 

eval()：计算某个字符串，并执行其中的的 JavaScript 代码。

<script type="text/javascript">

    document.write(eval("1+2+3")+"<br/>");

    var x=10;

    document.write(eval(x+17)+"<br/>");

    eval("x=10;y=20;document.write(x*y)");

</script>

escape(): 对字符串进行编码，这样就可以在所有的计算机上读取该字符串。该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。

unescape():可对通过 escape() 编码的字符串进行解码。

    var test1="Visit W3School!";

    document.write(test1+"<br/>");

    test1=escape(test1);

    document.write(test1+"<br/>");

    test1=unescape(test1);

    document.write(test1+"<br/>"); 

isNan():用于检查其参数是否是非数字值。如果参数是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true；如果参数是其他值,则返回 false。

    document.write(isNaN(5-2)+"<br/>");

    document.write(isNaN(0)+"<br/>");

    document.write(isNaN("Hello")+"<br/>");

    document.write(isNaN("2005/12/12")+"<br/>");

isFinite():用于检查其参数是否是无穷大。如果 number 是有限数字（或可转换为有限数字），那么返回 true。否则，如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。

    document.write(isFinite(5-2)+"<br/>");

    document.write(isFinite(0)+"<br/>");

    document.write(isFinite("Hello")+"<br/>");

    document.write(isFinite("2005/12/12")+"<br/>"); 

parseFloat()：可解析一个字符串，并返回一个浮点数。如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。（开头和结尾的空格是允许的）

    document.write(parseFloat("10")+"<br/>");

    document.write(parseFloat("10.33")+"<br/>");

    document.write(parseFloat("34 45 66")+"<br/>");

    document.write(parseFloat(" 60 ")+"<br/>");    

    document.write(parseFloat("He was 40")+"<br/>");

parseInt()：函数可解析一个字符串，并返回一个整数。

parseInt(string,radix)

参数

描述

string

必需。要被解析的字符串。

radix

可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

如果省略该参数或其值为 0，则数字将以 10 为基础来解析。

 

 

 

 

 

parseInt("10");          //返回 10

parseInt("19",10);       //返回 19  (10+9)

parseInt("11",2);    //返回 3  (2+1)

parseInt("17",8);    //返回 15  (8+7)

parseInt("1f",16);       //返回 31  (16+15)

parseInt("010");     //未定：返回 10 或 8

 

第二节：JavaScript window 对象常用方法及事件

alert():用于显示带有一条指定消息和一个 OK 按钮的警告框。

    window.alert("window对象的alert方法"); //可省略window

 

confirm(): 用于显示一个带有指定消息和 OK 及取消按钮的对话框。

    var r=confirm("Press a button");

    if (r==true)

      {

      document.write("You pressed OK!")

      }

    else

      {

      document.write("You pressed Cancel!")

      }

 

prompt(text,defaultText):用于显示可提示用户进行输入的对话框。如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。

text可选，要在对话框中显示的纯文本（而不是 HTML 格式的文本）；

defaultText可选，默认的输入文本。

    var name=prompt("Please enter your name","Luffy");    //"Luffy"可选，默认的输入文本

    if (name!=null && name!="")

      {

       document.write("Hello " + name + "!")

      }  

 

setTimeout()；执行一次

    function dzt(){

       alert("5秒后屌炸天");

    }

    window.setTimeout("dzt()", 5000);  //5000毫秒后执行一次

 

setInterval ()；执行多次

    function setDateTime()

{

       var date=new Date();

       var day=date.getDay();

       var week;

       switch(day){

       case 0:week="星期日";break;

       case 1:week="星期一";break;

       case 2:week="星期二";break;

       case 3:week="星期三";break;

       case 4:week="星期四";break;

       case 5:week="星期五";break;

       case 6:week="星期六";break;

       }

       var today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日  "+week+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

       document.getElementById("today").innerHTML=today;

    }

    // <div id="today"></div>

    window.setInterval("setDateTime()", 1000);   //1000毫秒，执行多次

 

open();打开窗口

    window.open("http://www.java1234.com");

   

Window.onload 发生在文档全部下载完毕的时候。

    window.οnlοad=function(){

           alert("文档加载完毕了");

       }

Window.onresize 发生在窗口大小发生变化的时候。

    window.οnresize=function(){

           alert("窗体大小发生了变化！");

       }

 

【基础篇 完】

今天超市大减价
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。...这些类型构成了JS编程的基础，理解和掌握它们是学习JavaScript的第一步。
JavaScript 学习笔记之基础中的基础
10-24
主要介绍了JavaScript 学习笔记系列的第一篇文章，跟所有开篇一样，本文我们介绍的都是些基础中的基础知识，虽然都是基础，但建议大家不要略过此
python web py入门（33）- 在HTML网页里嵌入JavaScript脚本
大坡3D软件开发
03-20 8221
在前面已经学习过在浏览器的console运行JS，那么在网页里又是怎么样运行JS的呢？如果不明白这个，就要跟着本节课来学习了，其实还是蛮简单的。对了，前面已经编辑了一个比较小的网页，并保存成文件了。就以那个网页为基础，在里面写一些脚本来运行。在写脚本之前，需要学习一个HTML的标签：&lt;script&gt; &lt;/script&gt;，有了这个标签之后，才可以在网页里嵌入脚本，JS的代码就...
javascript全程笔记
qq_38850792的博客
03-17 807
2.类型转换 （1）隐式类型转换： （2）显式类型转换（强制类型转换） 3.进制转换 （1）其他进制转换成10进制 （2）十进制转换成其他进制 4. 常用方法 (1)任何涉及NaN的操作，都返回NaN (2)NaN与任何值都不相等，包括t他本身NaN 5、常见面试题 6、Boolean类型 Boolean() 7. undefined类型 1、 变量只声明，未赋值 2、 alert( c ) //报错 3、函数没有返回值，默认undefined
JavaScript基础学习笔记
最新发布
hyqwsq的博客
05-30 735
可以理解为是一种无序的数据集合，注意数组是有序的数据集合。
JavaScript学习笔记
saidailuo的博客
07-01 447
JavaScript是一门强大而灵活的编程语言，学习它给我带来了许多收获和感悟。以下是我个人在学习JavaScript过程中的一些体会：1.JavaScript的广泛应用：JavaScript是一门在前端和后端开发中广泛应用的语言，它可以帮助我们构建交互式的网页、开发跨平台的移动应用、构建服务器端应用等。这种广泛应用使得学习JavaScript变得非常有价值，它不仅仅是一门语言，而是打开了许多技术发展的大门。2.JavaScript的动态性。
js必须掌握的知识点,javascript总结笔记
chatgpt001的博客
12-05 1089
JavaScript 最开始是专门为浏览器设计的一门语言，但是现在也被用于很多其他的环境。如今，JavaScript 已经成为了与 HTML/CSS 完全集成的，使用最广泛的浏览器语言GPT改写。有很多其他的语言可以被“编译”成 JavaScript，这些语言还提供了更多的功能。建议最好了解一下这些语言，至少在掌握了 JavaScript 之后大致的了解一下。我们可以正常地从 Error 和其他内建的 error 类中进行继承，。我们只需要注意 name 属性以及不要忘了调用 super。
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 6303
JavaScript基础语法学习笔记，视频教程链接放在末尾
JavaScript李立超基础篇笔记.docx
02-02
总的来说，李立超的JavaScript基础篇教程涵盖了语言的基础知识，包括其历史、特点、基本语法、数据类型、变量和标识符的使用，以及代码编写的位置和方式，是学习JavaScript入门的宝贵资料。通过深入理解和实践这些...
Javascript基础学习笔记(菜鸟必看篇)
10-21
下面小编就为大家带来一篇Javascript基础学习笔记(菜鸟必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
史上最全，熬夜整理56个JavaScript高级的手写知识点，专业扫盲
VIP129370的博客
03-29 1132
外链图片转存中…(img-3km3jMUr-1711693348842)][外链图片转存中…(img-KAVJsx4I-1711693348842)]
【前端学习笔记】JavaScript 教程（部分）
2401_84304834的博客
04-20 1042
JavaScript 教程（部分）
Javascript学习笔记
weixin_44164945的博客
08-30 1508
Javascript学东西笔记
JavaScript 基础笔记总结(全部)
IT_Holmes的博客
12-20 1万+
文章目录1.声明变量 var2.变量命名的规则3.数据类型以及注意事项4.代码注释5.其他类型转换为字符串6.数值类型转换7.布尔类型转换8.算数操作符9.一元运算符10.逻辑运算符11.比较运算符12.赋值运算符13.运算优先级14.流程控制15.JS中的数组15.1 数组格式15.2 获取数组中的元素15.3 遍历数组15.4 数组求和16. 函数16.1 函数的声明以及调用16.2 函数的形参和实参16.3 函数的返回值16.4 匿名函数16.5 函数做为参数16.6 函数作用域16.7 函数的作用域
JS基础知识学习总结
爱玲姐姐的博客
04-29 1064
JS 学习总结 1. typeof能判断的类型？（JS变量类型） 答：undefined、number、string、boolean、symbol、object、function 2. 何时使用===，何时使用==（强制类型转换） 答：任何时候都用===，除非是判断==null 3. window.onload和DOMContentLoaded的区别（页面加载过程） 答：window.onload...
Js学习笔记(一)
一个有深度的博客
03-10 4831
1、基本的数据类型 number(包含整型和浮点型)、null(空)、undefined(当函数没有返回值时打印)、Boolean、string。 2、常用函数 typeof 和Pythono中type函数功能一样，trim()函数和python的strip()函数功能一样。 NaN只要参与比较，结果一定是false。 比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成...
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值