JavaScript基础

最新推荐文章于 2025-10-09 01:13:06 发布
原创 最新推荐文章于 2025-10-09 01:13:06 发布 · 2.1w 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript

JavaScript的引入方式

方式一：直接写在HTML中，嵌套在script中
<script>            
    ........
</script>
方式二：导入式
<script src="tsets.js"></script>

JS基本数据类型

JavaScript有五种基本数据类型
1.Number
2.String
3.Boolean
4.Null  值仅有：null，针对尚未存在的对象
5.Undefined  值仅有：undefined  未定义
#######NaN：not a number属于Number的一种，其他类型转Number失败时为该值
<script>
    var x;   #  JS是弱变量类型，均用var声明变量。
    x = 12;
    y = 12;
    x = 15;
    alert(x);
    console.log(x);
    console.log(y);


    var name = "cunzhang", age = 28;

    // myFirstName="刘"   # 单行注释//   多行注释/*    */
    // MyFirstName="刘"

    function f() {       # function关键字声明函数
        console.log(123)
    }

    console.log(true + 1);   # 类型转换
    console.log(false + 1);
    console.log("hello" + 2);
    console.log("hello" + true);
    console.log(2 + true);
    console.log(parseInt(6.9234454));

    //NAN: not a number,属于Number的一种
    console.log(parseInt("hello")); //NAN
    console.log(parseInt("123"));   //123
    console.log(parseInt("123abc"));//123
    console.log(parseInt("abc1234"));//NAN


    //typeof :区分基本数据类型,对引用数据类型仅返回object

    console.log(typeof 123);
    console.log(typeof "hello");
    console.log(typeof true);
    console.log(typeof null);
    console.log(typeof undefined);

    console.log(typeof [12, 3, 4]);
    console.log(typeof {"name": "123"});

    #  区分： ++i  --i i++ i--   
    var i = 10;
    i++;
    console.log(i)

    console.log(i++)
    console.log(++i)


    var n = NaN;

    console.log(n > 5);//
    console.log(n < 5);//
    console.log(n == 5);//
    console.log(n == NaN);//NAN只要参与比较，布尔值一定是false,除非！=
    console.log(n != NaN);


    逻辑运算符&&，||,!   判断是否相等==
    console.log("hello" && 4)
    if ("hello" && 4) {

    }

    console.log(2 == 2);
    console.log("2" == 2);
    console.log(2 === "2")

    console.log(3 > 20);
    console.log(3 > "20");
    console.log("3" > "28")
</script>

JS创建函数

<script>
//    函数的创建方式一

   function f(x,y) {
       alert(123);
       return x+y;          
   }
   console.log(f(23,5678));


   function foo(name,age) {
       console.log("hello"+name)
   }



//    用对象：函数的创建方式二

   var obj=new Function("name","console.log(\"hello\"+name)")
   obj("武大");

   console.log(foo.length)

// 函数的调用


   function add(x,y,z) {
       return x+y+z
   }

   console.log(add(1,2,3,4,5,6));
   console.log(add(1,2));
   console.log(add("hello","world"));


 # 面试题
   function f(x,y) {
       return x+y
   }

   var f=1;
   var b=2;
   f(f,b)   # 报错 f 被覆盖


     function f() {
         console.log(arguments);

         return a+b
     }
     f(1,2,45,6,7,78);

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

   console.log(ADD(1,2))

# 匿名函数
       var func = function(arg){
           alert(arg)
           };

       func("hello");

(function(arg){
           alert(arg)
           })("YUAN")

</script>

JS控制语句

<script>

// ------    if else
   var name="alex";
   if (name=="lijie")
   {
       alert("俗气")
   }
   else if(name=="zhichao")
   {
       alert("洋气")
   }
   else{
       alert("this is ALEX!")
   }

// -----    switch
   var week="Monday";
   var week=3;

   switch (week){

       case "Monday" :alert("星期一");break;
       case "Tuesday":alert("星期二");break;
       case 3:alert("星期三");break;
       case 4:alert("星期四");break;
       case 5:alert("星期五");break;
       case 6:alert("星期六");break;
       case 7:alert("星期日");break;
       default:alert("nothing");
   }

//循环 for while

   for(var i=0; i<10; i++){
       document.write("welcome"+i+"<br>")
   }


   var attr=[111,222,333];

   for (var i=0;i<attr.length;i++){
       document.write(i);
       document.write("<br>");
       document.write(attr[i]);
       document.write("<br>");
   }

   for (var i in attr){

       document.write(i);
       document.write("<br>");
       document.write(attr[i]);
       document.write("<br>");
   }

   var eles_P=document.getElementsByTagName("p");
   console.log(eles_P);

//    for (var i in eles_P){
//        console.log(i)
//    }

   for (var i=0;i<eles_P.length;i++){
       console.log(i);
       console.log(eles_P[i]);
   }

while 循环
   var x=0;
   var i=1;
   while (i<=100){
       x+=i;
       i++;
   }
   console.log(x)

for 循环实现
   var sum=0;
   for (var i=0;i<101;i++){
       sum+=i;
   }
   console.log(sum)

异常

   try{
       console.log(123);
       throw Error("define error")
   }
   catch(e) {
       console.log(e)
   }
   finally {
       console.log("finally")
   }

</script>

JS中的对象

<script>
    //创建字符串对象两种方式
   var str1="hello";

   var str2=new String("hello2");

   console.log(typeof str1);
   console.log(typeof str2);

    //字符串的属性
   console.log(str1.length);
   // 字符串的方法
   //编排方法
   console.log(str1.italics());  //      <i>hello</i>
   console.log(str1.bold());    //      <i>hello</i>
   console.log(str1.anchor());  //      <i>hello</i>
    查询字符串索引
   var str="welcome to the world of JS!";

   var str2=str.indexOf("l");
   var str3=str.lastIndexOf("l");
   alert(str2);
   //结果为2
   alert(str3);
   //结果为18

    // substr substring
   console.log(str1.substr(1,3));
   console.log(str1.substring(1,3));

   console.log(str1.slice(1,4));
   console.log(str1.slice(-3,-1))


    //-------------------------------Array-----------------------------

//    //创建方式
   var arr1=[1,"hello",[11,2],{"name":"Yuan"}];
   var arr2=new Array(3);
   var arr3=new Array(1,"world",true,[1,2,3]);

   console.log(typeof arr1);
   console.log(typeof arr2);
   console.log(typeof arr3);

   // 注意： var arr4=new Array(10) 10是size
   console.log(arr1.length);

    // Array对象的方法
    // join方法
   var arr5=[1,2,3,4,"1234"];
   var ret=arr5.join("**");
   console.log(ret);
   console.log(typeof ret)

    toString()
   var ret2=arr1.toString();
   console.log(ret2);
   console.log(typeof ret2);

    concat()
       var arr5=[1,2,3];
       var ret3=arr5.concat([5,66]);

       console.log(ret3);
       console.log(typeof ret3);

    // reverse 
    var arr6=[23,45,37,88];
   var arr6=[10,45,100,88];

   console.log(arr6.reverse());
   console.log(arr6.sort()) ;   //按第一个元素排序：10,45,88,100

   function f(a,b) {

       if(a>b){
           return 4
       }
       else if(a<b){
         return -4
       }
       else {
           return 0
       }
   }

   function f2(a,b) {
       return a-b
   }

   console.log(arr6.sort(f2))

    // push pop:栈操作

   var arr7=[1,2,3];
   arr7.push([7,8,0]);
   arr7.push("hello",5);
   console.log(arr7);
   console.log(arr7.length);

   console.log(arr7.pop());
   console.log(arr7.pop());
   console.log(arr7.length);

    // shift unshift: 栈操作

   var arr8=[4,5,6];
   arr8.unshift([11,222]);
   arr8.unshift(true,"yes");//[true,"yes",[11,22],4,5,6]

   arr8.shift();//["yes",[11,22],4,5,6]
   console.log(arr8);
   console.log(arr8.length)

</script>

window对象提供的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // window对象的方法
    //alert  提示
   window.alert("hello")
    //confirm   让用户确认
   var ret=window.confirm("hello Yuan");
   console.log(ret);
    // prompt  让用户输入信息
   var ret2=window.prompt("hello....")
   console.log(ret2)


    // open("http://www.baidu.com")

    setInterval(f,1000);

    function f(){
             console.log(666)
    }
</script>
</body>
</html>

简单定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>

<input type="text" id="id1" onclick="begin()">  # 绑定事件
<button onclick="end()">停止</button>

<script>

    function showTime() {
             var current_time=new Date().toLocaleString();
             var ele=document.getElementById("id1")
             ele.value=current_time
    }
    var clock1;
    function begin() {
        if(clock1==undefined){
            showTime();
           clock1=setInterval(showTime,1000)
        }

    }

    function end() {
        clearInterval(clock1);
        clock1=undefined
    }


</script>
</body>
</html>

JS的DOM对象提供的方法：

// 通过：id
document.getElementById()  
// 通过：class名
document.getElementsByClassName()
// 通过：标签
document.getElementsByTagName()
// 通过：属性
document.getElementsByName()

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

<div class="div1">
    <p name="littleP" class="p1">hello p</p>
    <div class="div2">hello div
         <div>div3</div>
         <a href="">click</a>
    </div>
    <span>span</span>
</div>
<span>spanspanspanspan</span>
<div>hhhhh</div>

<script>
    var ele=document.getElementById();
   var ele=document.getElementsByClassName("p1")[0];

    console.log(ele);
   console.log(ele.nodeName);
   console.log(ele.nodeType);
   console.log(ele.nodeValue);
   console.log(ele.innerHTML);
   ele.innerHTML="hello world";

   var p_ele=ele.parentNode;
   console.log(p_ele.nodeName);
    var b_ele=ele.nextSibling;
   console.log(b_ele.nodeName);

    var b_ele2=ele.nextElementSibling;
   console.log(b_ele2.nodeName);
   console.log(b_ele2.innerHTML);

   var ele3=document.getElementsByClassName("div1")[0];
   console.log(ele3.children[1].children);

    eg:
    var ele4=document.getElementsByName("littleP")[0];
   var ele5=ele4.nextElementSibling;
   console.log(ele5.innerHTML);
   console.log(ele5.innerText);

   ele5.innerHTML="<h1>YUAN</h1>";

    //局部查找仅getElementsByClassName和getElementsByTagName两种方法

     var ele6=document.getElementsByClassName("div1")[0];
     var ele7=ele6.getElementsByTagName("span");
    console.log(ele7[0].innerHTML)
</script>

</body>
</html>
JavaScript基础入门
06-12
JavaScript基础入门，适合初学都下载学习。
JavaScript基础教程（第8版).pdf
02-14
JavaScript基础教程第8版详细介绍了该语言的核心概念，包括语言的语法、程序结构、数据类型、变量、运算符、控制结构、函数、对象、事件处理、表单验证等方面。本书通过大量的实例和练习题，帮助初学者从零开始，...
javascript入门基础
驰骋翱翔
10-30 2405
JavaScript是一种具有面向对象能力、解释性的程序设计语言，它是基于对象和事件驱动的安全的客户端脚本语言。用于验证发往服务器的数据，增加web互动，加强用户体验度。
JavaScript 入门指南：从核心概念到基础语法，零基础也能轻松上手
最新发布
2303_77081844的博客
10-09 563
JavaScript 是一种高级、解释型编程语言，最初为浏览器设计，用于实现网页交互。它和 Java 没有关系（只是名字像），是前端开发的“三驾马车”（HTML、CSS、JS）之一。高级：不用关注底层内存管理，语法接近自然语言，容易理解。解释型：代码不需要提前编译，浏览器会逐行解析执行（和 Python 类似）。这三个关键字是 JS 变量声明的核心，必须分清：特性varletconst是否允许重复声明✅ 允许❌ 不允许❌ 不允许是否允许重新赋值✅ 允许✅ 允许❌ 不允许作用域。
温习之认识JavaScript数据类型基础及模板字符串总结
weixin_40630195的博客
12-05 1129
JavaScript引入方式,变量命名方式,基本数据类型,模板字符串,显试转换,隐试转换
JavaScript入门基础
『愚』的博客
11-06 4064
JavaScript入门基础概述变量的声明变量的作用域基本数据类型Number类型String类型Boolean类型Undefined类型Null类型三大引用类型Object类型Array类型Function类型typeof 操作符js编写的位置js的三种输出方式 概述 JavaScript是世界上最流行的脚本语言，是一种运行在浏览器中的解释型的编程语言，能够实现跨平台、跨浏览器。虽然只是十多天时间的产物，并且有很多的缺陷和陷阱，但也造就了JavaScript的灵活和强大。随着Node.js的兴起，Jav
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript入门篇，JavaScript基础知识
01-05
作为Web开发者，掌握JavaScript是提升用户体验的基础。 JavaScript的学习首先从理解其语法和基本概念开始。这包括学习如何编写代码块，熟悉基本的对象类型（如字符串、数字、数组、对象等），了解变量声明、数据...
Javascript基础.xmind
07-31
JavaScript基础三天总结
JavaScript 基础 入门
shjd_J的博客
05-23 281
JavaScript是什么 JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。 JavaScript作用 JavaScript作用:确定网页的行为交互(教网页做事情) JavaScript组成 ECMAScript - JavaScript的核心 ECMAScript定义了JavaScript的语言规范 JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
javascript 基础入门
lucas的博客
12-25 317
javascript 1、概述 JavaScript是一门世界上最流行的脚本语言 Java和JavaScript没关系 ECMAScript可以理解为JavaScript的一个标准，版本到es6 2、基本 2.1、设定 2.2、引入 2.3、语法 严格区分大小写 其余基本和java相同 2.4、浏览器 元素 控制台 源代码 网络请求 web数据库 2.5、数据类型 number,js不区分小数和整数 字符串 正常字符以单引号，双引号包 转义字符 \ 多行字符串编写``包，ES
JavaScript 基础入门
无法自律的人的博客
04-11 2964
HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。CSS是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。javascript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。JavaScript主要用于HTML的页面，嵌入在HTML的源码中。
javascript基础入门
m0_74018330的博客
03-20 369
同一时期，**微软**和 **Nombas**（一家名为 Nombas 的公司）也分别开发了 **JScript** 和 ScriptEase** 两种脚本语言，与 **JavaScript** 形成了三足鼎立之势。因为 id 元素是唯一的，就是为了在 js 中通过元素 id 来查找元素，document 是页面文档对象，getElementById 是 document 的方法，通过传递的参数（id字符串），是一个标签的id值。即使赋值之后，变量的类型根据重新赋值的数据类型同样进行改变。
pink老师JavaScript基础课程PPT合集
从给定的文件信息中，我们可以提炼出关于JavaScript基础知识点的相关内容。以下是对这些文件内容的详细说明和知识点的整理： 标题：“pink老师Javascript基础PPT.zip” 描述：“2021年pink老师线下班 Javascript...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值