JavaScript学习（一）——基本语法

最新推荐文章于 2024-07-19 16:47:30 发布
最新推荐文章于 2024-07-19 16:47:30 发布
阅读量142 收藏
点赞数
分类专栏： 笔记 js 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41505957/article/details/109746596
版权
笔记 同时被 2 个专栏收录
78 篇文章 0 订阅
订阅专栏
js
7 篇文章 1 订阅
订阅专栏
本文详细介绍了JavaScript的基础概念，包括它的历史、语法特点、与HTML的结合方式、数据类型、变量、运算符、流程控制语句等核心内容。JavaScript是一门客户端脚本语言，主要用来增强用户与HTML页面的交互，提供动态效果。文中还涵盖了JavaScript的类型转换、运算规则以及变量声明和使用方法，是初学者入门JavaScript的宝贵资料。
摘要由CSDN通过智能技术生成

文章目录

JavaScript：

JavaScript的很多语法都和Java类似，但是两者之间没有关系。

概念

  • 一门客户端脚本语言
  • 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
    • 脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能：

  • 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

JavaScript发展史：

  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase
  2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
  3. 1996年，微软抄袭JavaScript开发出JScript语言
  4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
    JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

基本语法

与html结合方式

  1. 内部JS：
    定义< script >，标签体内容就是js代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script>
        alert("JavaScript学习");
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

  1. 外部JS：
    定义< script >，通过src属性引入外部的js文件

js文件：

alert("外部导入js文件");

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script src="js/1.js"></script>

</head>
<body>

</body>
</html>

在这里插入图片描述

  • 注意：
  1. < script >可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
  2. < script >可以定义多个。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/1.js"></script>

</head>
<body>
    <script>
        alert("第二个script标签");
    </script>
</body>
</html>

先出现第一个script标签。
在这里插入图片描述点击确定后出现第二个script标签。
在这里插入图片描述

注释

与Java相同，不用多说

  1. 单行注释：//注释内容
  2. 多行注释：/* 注释内容 */

数据类型：

  • 原始数据类型(基本数据类型)：
    1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
    2. string：字符串。 字符串 “abc” “a” ‘abc’
    3. boolean: true和false
    4. null：一个对象为空的占位符
    5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
  • 引用数据类型：对象

变量

  • Java语言是强类型语言，而JavaScript是弱类型语言。
  • 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
  • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法：var 变量名 = 初始化值;
typeof运算符：获取变量的类型。null运算后得到的是object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
    <script>
        var num = 3;
        document.write("num的值为 ： "+num + "<br>");
        document.write("num数据类型：" + typeof num + "<br>");

        var str = "JavaScript";
        document.write("str的值为 ： " + str + "<br>");
        document.write("str数据类型：" + typeof str + "<br>");

        var bool = true;
        document.write("bool的值为 ： " + bool + "<br>");
        document.write("bool数据类型：" + typeof bool + "<br>");

        var nu = null;
        document.write("nu的值为 ： " + nu + "<br>");
        document.write("nu数据类型：" + typeof nu + "<br>");

        var unde;
        document.write("nude的值为 ： " + unde+ "<br>");
        document.write("unde数据类型：" + typeof unde + "<br>");


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

在这里插入图片描述

运算符

一元运算符
  • 只有一个运算数的运算符
    ++，-- ， +(正号)
    ++ --: 自增(自减)
    +(-)：正负号
  • 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
    • 其他类型转number：
    • string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
    • boolean转number：true转为1，false转为0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        var str = + "123";
        document.write(typeof str + " : "+ str + "<br>");

        var str1 = +"abc"
        document.write(typeof str1 + " : "+ str1 + "<br>");


    </script>

</body>
</html>

在这里插入图片描述

算数运算符
  • 和Java相同：+， -， *， /， % …
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        var num1 = 20;
        var num2 = 8;

        document.write(num1 + num2 + "<br>");
        document.write(num1 - num2 + "<br>");
        document.write(num1 * num2 + "<br>");
        document.write(num1 / num2 + "<br>");
        document.write(num1 % num2 + "<br>");

    </script>

</body>
</html>

在这里插入图片描述

赋值运算符

-和Java相同： = ，+=， -+，…

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

    <script>
        var num1 = 20;

        num1+=50;
        document.write(num1 + "<br>");
        
        num1-=20;
        document.write(num1 + "<br>");


    </script>

</body>
</html>

在这里插入图片描述

比较运算符

  • ， <， >= ，<=， ==， ===(全等于)

  • 比较方式
    1. 类型相同：直接比较
    字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
    2. 类型不同：先进行类型转换，再比较
    ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        var num1 = 20;
        var num2 = 50;
        var num3 = 50;
        var num4 = "50";

        //判断num2是否大于num2
        document.write((num2>=num1) + "<br>");

        //判断num3的数值是否等于num2的数值
        document.write((num3==num2) + "<br>");

        //判断num3的数值是否等于num4的数值
        document.write((num3==num4) + "<br>");

        //判断num3是否全等于num4
        document.write((num3===num4) + "<br>");

    </script>

</body>
</html>

在这里插入图片描述

逻辑运算符
  • 和Java相同： &&， ||， !
  • 其他类型转boolean：
    1. number：0或NaN为假，其他为真
    2. string：除了空字符串(“”)，其他都是true
    3. null&undefined:都是false
    4. 对象：所有对象都为true
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        var bool1 = false;
        var bool2 = false;
        var bool3 = true;
        var bool4 = true;

        document.write(bool1 || bool2 + "<br>" );
        document.write(bool1 || bool3 + "<br>");
        document.write(bool3 && bool4 + "<br>");
        document.write(bool1 && bool3 + "<br>");

    </script>

</body>
</html>

在这里插入图片描述

三元运算符

语法：表达式?值1 : 值2
判断表达式的值，如果是true则取值1，如果是false则取值2；

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

    <script>

        var a = 3;
        var b = 6;
        document.write(a>b?"a是大于b的":"a不大于b");

    </script>

</body>
</html>

在这里插入图片描述

流程控制语句

  • 和Java相同
  1. if…else…
  2. switch:
    在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
    switch(变量):
    case 值:
    在JS中,switch语句可以接受任意的原始数据类型
  3. while
  4. do…while
  5. for

for循环中数据类型为var。

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

    <script>

       var num = 0;
       for(var i = 1; i<=10; i++) {
           num+=i;
       }
       document.write(num);

    </script>

</body>
</html>

在这里插入图片描述

张宜强
关注
专栏目录
前端学习笔记——JavaScript（一）基本语法
qq_44228263的博客
02-27 986
@[TOC]前端学习笔记——JavaScript（一）基本语法 如何插入JS 内部插入 使用<script>标签在HTML网页中插入JavaScript代码。注意，<script>标签要成对出现，并把JavaScript代码写在<script></script>之间。即 <script type="text/javascript"> <!--JavaScript代码写在此处--> </script> <script
JavaScript交互式网页设计——基本语法
qq_62296995的博客
12-14 1290
<1>.放置脚本代码位置的方式 1.将脚本代码放入JavaScript标 签对中，嵌入HTML页面中，与HTML代码一同使用 2.将脚本代码单独放入JavaScript文件中，然后再HTML页面引用 3.将脚本代码嵌入至HTML页面元素的事件属性值或超链接的href属性值 注意：引用JavaScript文件后，JavaScript标签对中不能含有额外的脚本代码 <2>.变量 1.声明变量 JavaScript的变量采用弱类型的形式，声明时不必确认数据类型，而是赋值时或
javascript学习
06-27
学习javascript的pdf资料，素有“javascript圣经”之说。不过全部英文，值得深研。
JavaWeb学习笔记03-JavaScript
wy19961103的博客
11-25 155
1概念： 一门客户端脚本语言.运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器解析执行了 功能： 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 2.JavaScript发展史： 1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为...
JavaScript从入门到精通--学习笔记
最新发布
weixin_56766611的博客
07-19 2145
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。可以实现一些网页特效、验证表单、数据交互、服务端编程（node.js）。JavaScript主要是有以下内容组成的： - ECMAScript：JavaScript语言的基础语法核心知识 - Web APIs： - DOM 操作文档，比如页面元素的移动、修改等。 - BOM 操作浏览器，比如页面弹窗、数据监测、数据存储等。 JavaScript权威网站：MDN
JavaScript教程--从入门到精通（一）
Terry's Blog
03-24 1974
JavaScript教程--从入门到精通（一）作者：李晓华    文章来源：赛迪网    点击数： 861    更新时间：2004-3-10javascript教程语言概况　　Internet时代，造就了我们新的工作和生活方式，其互联性、开放性和共享信息的模式，打破了传统信息传播方式的重重壁垒，为我们带来了新的机遇。随着计算机和信息时代的到来，人类社会前进的脚步在逐渐加快，每一天都有新的
javascript基本语法学习（一）
linziwang的博客
12-11 769
一、编程语言 1.1、编程 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。 计算机程序:就是计算机所执行的—系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。 从事编程的人员，就是程序员。但是般程序员都比较幽默，为了形容自己的辛苦工作，也成为“码农或者“程序猿”/“程序媛 注意:上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓Pl、服务器等等。 1.2、计算机语言
JavaScript的学习
weixin_51884452的博客
04-16 862
关于js事件，字符串等浅学。
JavaScript网页开发——体验式学习教程.pdf
02-12
这份"JavaScript网页开发——体验式学习教程.pdf"提供了一个深入理解JavaScript语法和实践的平台，帮助初学者和有一定基础的开发者提升技能。 教程首先会介绍JavaScript的基础知识，包括变量、数据类型（如字符串、...
JavaScript学习（一）
05-25
NULL 博文链接：https://jerryzhang.iteye.com/blog/376317
JavaScript 学习
qq_61718994的博客
11-07 1003
学习内容：初识JS，JS代码编写位置，JS基本语法，标识符，字面量和变量 笔记： 1、初识JS JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。 JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中： HTML 用来定义网页的内容，例如标题、正文、图像等； CSS 用来控制网页的外观，例如颜色、字体、背景等； JavaScript 用来实时更新网页中的内容，例
javascript 学习
iuhe_999的博客
01-29 504
JavaScript  使用关键字function 定义函数。 function functionName(parameters){  //执行代码 } 1、分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句，所以不以分号结束。 2、var x = function (a, b) {return a * b};    var z = x(4, 3);
Javascript学习
守灯者的博客
03-04 1449
Javascript 学习记录
JavaScript学习
An_1999的博客
11-03 218
JavaScript学习 &&与 ||或 !取反 逻辑运算符 短路运算（逻辑中断） 短路运算的原理：当有多个表达式（值）时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值。 1.逻辑与(&&) 语法：表达式1 && 表达式2 如果第一个表达式为真，则返回表达式2 如果第一个表达式为假，则返回表达式1 console.log(123 &am...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

张宜强

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

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

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

打赏作者

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

抵扣说明：

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

余额充值