JavaScript基础知识

最新推荐文章于 2023-11-01 13:12:27 发布
最新推荐文章于 2023-11-01 13:12:27 发布
阅读量234 收藏
点赞数 1
分类专栏： javascript 文章标签： JavaScript基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40197494/article/details/81104014
版权

http://www.runoob.com/js/js-output.html
1、JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

程序中调试是测试，查找及减少bug(错误)的过程。

2、变量和字面量
变量是一个名称。字面量是一个值。
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = “Johnson”; // String 通过字符串字面量赋值
var cars = [“Saab”, “Volvo”, “BMW”]; // Array 通过数组字面量赋值
var person = {firstName:”John”, lastName:”Doe”}; // Object 通过对象字面量赋值
这里写图片描述

3、JavaScript 弱类型，但是字母大小写敏感
4、分号 ;
分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

您也可能看到不带有分号的案例。
在 JavaScript 中，用分号来结束语句是可选的。

5、JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
6、您可以在文本字符串中使用反斜杠对代码行进行换行
7、如果用户不能确定浏览器是否支持JavaScript脚本，那么可以应用HTML提供的注释符号进行验证。HTML注释符号是以 <– 开始以 –> 结束的。如果在此注释符号内编写 JavaScrip t脚本，对于不支持 JavaScript 的浏览器，将会把编写的 JavaScript 脚本作为注释处理。

使用 JavaScript 脚本在页面中输出一个字符串，将 JavaScript 脚本编写在 HTML 注释中，如果浏览器支持 JavaScript 将输出此字符串，如果不支持将不输出此字符串，代码如下:

<script>
<!--
document.write("您的浏览器支持JavaScript脚本!");
//-->
</script>

注意：注释行结尾处的两条斜杠 // 是 JavaScript 注释符号。这可以避免 JavaScript 执行 –> 标签。
8、申明变量类型
当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

9、js对象
这里写图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
    person.firstName + " 现在 " + person.age + " 岁.";
</script>

</body>
</html>

这里写图片描述
10、对象方法
这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
</script>

</body>
</html>

11、js事件
这里写图片描述
12、js转义字符
这里写图片描述
13、比较运算符
这里写图片描述
14、逻辑运算符
这里写图片描述
15、条件运算符

<!--比较时间，可获得问候-->
<p id="demo13"></p>
<button onclick="wenhou()">点击获得问候</button>
<p id="demo14"></p>
<script>
    function wenhou() {
        var wenhhou = "";
        var shijian = new Date().getHours();
        if (shijian < 18) {
            wenhou = "白天好"
        } else {
            wenhou = "晚上好"
        }
        console.log(shijian)
        document.getElementById("demo14").innerHTML = wenhou;
    }
</script>
<!--期待周末-->
<button onclick="qidai()">点击这里</button>
<p id="demo15"></p>
<script>
    function qidai() {
        var x;
        var day = new Date().getDay();
        switch (day) {
            case 6 :
                x = "今天周六";
                break;
            case 0:
                x = "今天周日";
                break;
            default:
                ;
                x = "期待周末";
        }
        document.getElementById("demo15").innerHTML = x;
    }

16、js数据类型
这里写图片描述
17、js正则表达式
这里写图片描述

练习：外部引入的js文件只是一个方法，就不再上传

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/name.js"></script>
<script src="js/changeimage.js"></script>
<script src="js/inshuzi.js"></script>
</head>
<body>
    <script>document.write("<h1>标题</h1>")</script>
    <h1>你叫什么名字</h1>
    <p id="demo"></p>
    <button type="button" onclick="displayDate()">我叫</button>
    <button type="button" onclick="alert('欢迎')">点我</button>
    <img src="img/dengclose.png" width="114" height="192" id="changeimg">
    <button type="button" onclick="chim()">开灯</button>
    <input id="shuzi" type="text">
    <button type="button" onclick="inshuzi()">请输入数字</button>
    <p id="change">段落修改</p>
    <button id="xianshishijian" onclick="shijian()">显示时间</button>
    <!--
<script>
    window.alert(5 + 6)
</script>
-->
    <script>
    document.getElementById("change").innerHTML = ("修改好了")
</script>
    <script>
    function shijian() {
        document.write(Date())
    }
</script>
    <script>
    a = 1;
    b = 2;
    console.log(a + b);
</script>
    <!--js变量 -->
    <p id="changdu">长度</p>
    <script>
    var length;
    length = 12;
    document.getElementById("changdu").innerHTML = length
</script>
    <p id="pbiaoqian">我是一个段落</p>
    <div id="divbiaoqian">我是一个div</div>
    <button onclick="changeText()">改变语句</button>
    <script>
    function changeText() {
        document.getElementById("pbiaoqian").innerHTML = "改变段落"
        document.getElementById("divbiaoqian").innerHTML = "改变div"
    }
</script>
    <!--此处竟然不会换行-->
    <script>
    <!--
    document.write("你好 \
世界!");
    -->
</script>
    <script>
    var pi = 3.14;
    var name = "jingpin";
    var answer = "yes,i can!";
    document.write("<br>" + pi + "<br>");
    document.write(name + "<br>");
    document.write(answer + "<br>")
</script>
    <!-- js对象练习 -->
    <p id="duixiang"></p>
    <p id="duixiang1"></p>
    <script>
    var jack = {
        name: "jack",
        age: 50
    };
    <!-- 引用对象的2种方式 -->
    document.getElementById("duixiang").innerHTML = jack.name + jack.age + "岁";
    document.getElementById("duixiang1").innerHTML = jack["name"] + jack["age"] + "岁";
</script>
    <!-- 访问方法的2种方式 -->
    <p id="fangfa1"></p>
    <p id="fangfa2"></p>
    <script>
    var person = {
        firstName: "arya",
        lastName: "stack",
        age: 18,
        fullName: function () {
            return this.firstName + this.lastName
        }
    }
    document.getElementById("fangfa1").innerHTML = "不加括号输出" + person.fullName;
    document.getElementById("fangfa2").innerHTML = "加括号输出" + person.fullName();
</script>
    <!-- js函数-->
    <button onclick="dianji()">点击我</button>
    <script>
    function dianji() {
        alert("hello world")
    }
</script>
    <!-- 有参函数-->
    <button onclick="youcan('jack','worker')">有参函数</button>
    <script>
    function youcan(name, work) {
        alert("the" + work + "is" + name)
    }
</script>
    <!--返回值参数-->
    <button id="demo2">3*4=?</button>
    <script>
    function fanhui(a, b) {
        return a * b;
    }

    document.getElementById("demo2").innerHTML = fanhui(3, 4)
</script>
    <!-- 局部变量在声明的函数外不可以访问-->
    <!-- 太诡异了一样的-->
    <p>局部变量在声明的函数外不可以访问。</p>
    <p id="demo5"></p>
    <script>
    myFunction();
    document.getElementById("demo5").innerHTML = "carName 的类型是：" + typeof carName;

    function myFunction() {
        var carName = "Volvo";
    }
</script>
    <p id="demo4"></p>
    <script>
    myFunction();
    document.getElementById("demo4").innerHTML = "name的类型是" + typeof name;

    function myFunction() {
        var name = "jingpin";
    }
</script>
    <!--改变别的标签-->
    <button onclick="getElementById('demo6').innerHTML=Date()">现在的时间是</button>
    <p id="demo6"></p>
    <br>
    <!--改变自己的标签-->
    <button id="demo7" onclick="getElementById('demo7').innerHTML=Date()">现在的时间是</button>
    <!--另外一种方式-->
    <button onclick="this.innerHTML=Date()">现在的时间是2</button>
    <br>
    <!--测试鼠标事件-->
    <button onmouseout="this.innerHTML=Date()">鼠标出去看时间</button>
    <br>
    <!--截取字符串-->
    <p id="demo8" onclick="jiequ()">jack的首字母是</p>
    <script>
    var name = 'jack';

    function jiequ() {
        document.getElementById("demo8").innerHTML = name[0];
    }
</script>
    <!--测试双引号包裹的标签-->
    <script>
    var txt = "hello world";
    document.write("<br>" + txt.length + "</br>");
    var txt = "hhhahhhhh world";
    document.write("<br>" + txt.length + "</br>");
</script>
    <!--类型与对象-->
    <p id="demo10"></p>
    <script>
    var zi = "jingpin";
    var duixiang = new String("jingpin");
    document.getElementById("demo10").innerHTML = "zi的类型是" + typeof zi + "<br>" + "duixiang的类型是" + typeof duixiang;
    document.write(zi === duixiang)
</script>
    <!--比较运算符-->
    <p>请输入年龄，检测是否达标</p>
    请输入年龄
    <input id="demo11">
    <button onclick="jiance()">年龄检测</button>
    <p id="demo12"></p>
    <script>
    function jiance() {
        var age = document.getElementById("demo11").value;
        document.getElementById("demo12").innerHTML = (age > 18) ? "年龄达标" : "年龄不达标"
    }
</script>
    <!--比较时间，可获得问候-->
    <p id="demo13"></p>
    <button onclick="wenhou()">点击获得问候</button>
    <p id="demo14"></p>
    <script>
    function wenhou() {
        var wenhhou = "";
        var shijian = new Date().getHours();
        if (shijian < 18) {
            wenhou = "白天好"
        } else {
            wenhou = "晚上好"
        }
        console.log(shijian)
        document.getElementById("demo14").innerHTML = wenhou;
    }
</script>
    <!--期待周末-->
    <button onclick="qidai()">点击这里</button>
    <p id="demo15"></p>
    <script>
    function qidai() {
        var x;
        var day = new Date().getDay();
        switch (day) {
            case 6 :
                x = "今天周六";
                break;
            case 0:
                x = "今天周日";
                break;
            default:
                ;
                x = "期待周末";
        }
        document.getElementById("demo15").innerHTML = x;
    }
</script>
    <!--遍历数组-->
    <p id="demo16" onmouseout="fenjie()">分解啊</p>
    <!--<script>
    function fenjie() {
        cars=["bmw","volvo","saab","ford"];
        for (var i=0;i<cars.length;i++){
            document.write(cars[i]+"<br>")
        }
    }
</script>-->
    <!--搜索字符串，并显示起始位置-->
    <p>搜索字符串，并显示起始位置</p>
    <button onclick="sousuo()">点我</button>
    <p id="demo17"></p>
    <script>
function sousuo() {
    var star="jason benjime";
    var n=star.search("benjime");
    document.getElementById("demo17").innerHTML=n;
}
</script>
    <!--替换-->
    <p>替换</p>
    <button onclick="tihuan()">点我</button>
    <p id="demo18">我叫jingla</p>
    <script>
    function tihuan() {
        var txt=document.getElementById("demo18").innerHTML;
        var txt1=txt.replace("jingla","jinglaji");
     document.getElementById("demo18").innerHTML=txt1;
    }
</script>
    <!--测试一个-->
    <script>
var txt="";
function message(){
    try{
        adddlert("welcome guest");
    }
    catch(err){
        txt="本页有一个错误。\n\n";
        txt+="错误描述:"+err.message+"\n\n";
        txt+="点击确定继续。\n\n";
        alert(txt);
    }
}
</script>
    <input type="button" value="查看消息" onclick="message()">
    <p>请输入一个5到10之间的数字：</p>
    <input id="demo19" type="text">
    <button type="button" onclick="paochu()">测试输入</button>
    <p id="message"></p>
    <script>
function paochu() {
    var message,x;
    message=document.getElementById("message");
    message.innerHTML="";
    x=document.getElementById("demo19").value;
    try{
        if(x=="") throw "必填项";
        if(isNaN(x)) throw "不是数字";
        x=Number(x);
        if(x<5) throw "太小";
        if(x>10) throw "太大";
    }
    catch(err){
        message.innerHTML="错误："+err;
    }
}
</script>
<!--表单验证-->
<form name="myform" onsubmit="return validate()" method="post">
名字:<input type="text" name="fname">
<input type="submit" value="提交">
</form>
<script>
function validate() {
    var x=document.forms["myform"]["fname"].value;
    if(x==null||x==""){
        alert("需要填写名字");
        return false;
    }
}
</script>
</body>
</html>
涯一涯二涯三
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
最新Javascript 基础知识全总结(持续更新)
weixin_66092620的博客
04-17 8526
本人目前在黑马程序员培训,现将所学的知识整理出来,希望能帮到零基础的初学者,后续会持续更新~~~ 一,JavaScript 是什么 1, JavaScript 是什么 JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果 2, 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 3, JavaScript的组成 E...
JavaScript 基础知识
what_vb的博客
07-18 183
原始数据类型 在 JS 中，存在着 6 种原始值，分别是： null undefined Boolean number string symbol 对象（object）类型 **对象类型与原始类型的区别** 原始类型存储的是值，对象类型存储的是（指针）地址。 接下来我们来看函数参数是对象的情况 function test(person) { person.age = 26 perso...
javascript基础入门教程,javascript零基础入门
阿发狗伪原创
10-24 874
一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了python for语句用法。//局部变量 用let定义let 变量名 = 值;//全局变量 用var定义var 变量名 = 值;//常量定义 constconst 常量名 = 值;//整数类型var a=3;// Boolean类型var b=true;// 定义小数类型 小数和整数类型统称为number类型。
JavaScript基础知识总结
2301_77209411的博客
05-02 1842
JavaScript 最开始是专门为浏览器设计的一门语言，但是现在也被用于很多其他的环境。如今，JavaScript 已经成为了与 HTML/CSS 完全集成的，使用最广泛的浏览器语言。有很多其他的语言可以被“编译”成 JavaScript，这些语言还提供了更多的功能。建议最好了解一下这些语言，至少在掌握了 JavaScript 之后大致的了解一下。我们可以正常地从 Error 和其他内建的 error 类中进行继承，。我们只需要注意 name 属性以及不要忘了调用 super。
JavaScript基本知识总结(全)
IT_Mr_guo的博客
05-24 9462
什么是JS JS是JavaScript的简称，这是一门最流行的运行在浏览器的脚本语言。 JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。 JS是一种轻量级的编程语言，可由所有的现代浏览器执行 JS的作用 DOM操作: 增删改查HTML元素 可以直接操作HMTL 动效: 可以通过JS完成各种动效 让网页动起来 交互: 让用户和网页形成交互 (点击、滑动、拖拽等...
30+个 JavaScript 知识点汇总，你都了解了吗？
高大志leo的博客
02-10 9180
前言 无论你是已经在工作岗位上亦或是正在寻求新的工作机会，掌握常见的 JavaScript 面试知识点，不但可以帮助你扩展知识面、培养逻辑思维，还能帮助你提升自己的工作能力。不妨看看，也许有你所不了解的。 正文 1、JavaScript 的数据类型及其存储方式 截止目前，JavaScript 一共有8种数据类型，可大致分为基本数据类型（也叫原始数据类型）与引用数据类型 基本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值
javascript基础知识整理
10-29
JavaScript是Web开发中不可或缺的一部分，尤其对于初学者来说，掌握其基础知识至关重要。下面将详细讲解JavaScript的基础知识，包括创建脚本、隐藏脚本、处理浏览器兼容性问题、链接外部脚本、注释、输出到浏览器、...
JavaScript基础知识学习笔记
10-25
以上只是JavaScript基础知识的一部分，深入学习JavaScript还需要理解更多高级概念，如模块系统、Promise和async/await、模板字符串、ES6及后续版本的新特性等。对于初学者来说，逐步掌握这些知识，结合实践操作，将...
javaScript基础知识
03-04
根据黑马程序员做的笔记
javascript-基础知识点总结
weixin_49349476的博客
05-17 2225
JavaScript的出现，使得用户可以与页面进行交互（如定义各种鼠标效果），让网页实现更多绚丽的效果
JavaScript基础（超详细全文约一万字）
bguihiub的博客
02-10 8540
回顾整个JavaScript的发展历程, 实际上就是Web发展的历程从最开始的拨号上网方式到现在的100M光纤, 4G/5G移动Web的发展在近20年, 上网的方式发生了翻天复地的变化, 可以说是科技大爆炸.人们在享受越来越便捷的上网的同时, 对Web产品的需求越来越高从单纯的对访问速度的需求, 越来越多的转移到视觉美感, 智能操作交互, 沉浸式虚拟现实, 这些需求又反过来推动了技术的不断创新与进步.
JavaScript小知识点
weixin_50180131的博客
07-28 437
1.1JavaScript简介 JavaScript是一门脚本语言。计算机中除了脚本语言还有一下几种语言，这里我们总结一下： 汇编语言 脚本语言 机器语言 高级语言 以下注解可作为拓展材料： 1、脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。 2、汇编语言（assembly language）是一种用于电子计算机、微处理器、微控制器或其他可编程器件的低级语言，亦称为符号语言。在汇编语言中，用助记符代替机
JavaScript基础知识点
qq_40046544的博客
08-06 1983
JavaScript是一门完备的动态编程语言。当应用于HTML文档时，可为网站提供动态交互特性。由布莱登布兰登·艾克发明。字面量是用于表达源代码中的一个固定值的表示法字面量有数字字面量、字符串字面量、数组字面量、对象字面量等变量是计算机中用来存储数据的容器，简单理解是一个盒子。未定义是比较特殊的类型，只有一个值undefined只声明变量未赋值的情况下，变量的默认值为undefined简介：数组是一种可以按顺序保存数据的数据类型元素：数组中保存的每一个数据都叫做数组元素下标：数组中数据的编号。...
Javascript 基础知识学习
岳来的博客
11-23 7160
javascript 基础学习
JavaScript基础知识总结（持续更新）
zhaoyifei01的博客
01-28 1072
JavaScript基础总结
JS入门基础知识
weixin_53136302的博客
07-26 2601
核心（ECMAScript）：描述了该语言的语法和基本对象。 文档对象模型（DOM）：描述处理网页内容的方法和接口。 浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。
javascript的知识点整理
最新发布
weixin_62304542的博客
11-01 112
javascript的知识点整理
JavaScript基础知识讲解
"JavaScript基础PPT内容概述" JavaScript是一种广泛用于网页和网络应用的脚本语言，它是ECMAScript标准的一种实现。尽管名字中带有“Java”，但JavaScript与Java并无直接关系，它是一种轻量级、解释性的编程语言，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

涯一涯二涯三

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值