javascript教程 (1)——javascript基础

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量601 收藏 2
点赞数
文章标签： web前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wydsnza/article/details/87364368
版权

JavaScript基础语法

1.JavaScript的来源和发展

  1. JavaScript介绍
            JavaScript一种直译式脚本语言，是一种动态语言、弱类型，内置支持类型。 它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
     　    在1995年时，由Netscape公司在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Java较为接近，其它的没有关系。  　　
            为了取得技术优势，微软推出了JScript，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
  2. javascript基本特点

            JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。  　　
            通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。是一种解释性脚本语言（代码不进行预编译）。     
            主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。  　　
            可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。  　　
            跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。  　　Javascript脚本语言同其他语言一样，有它自身的基本数据类型， 表达式和算术运算符及程序的基本程序框架。

  3. javascript的用途

    嵌入动态文本于HTML页面;   

    对浏览器事件做出响应;   

    读写HTML元素;      

    在数据被提交到服务器之前验证数据;

    检测访客的浏览器信息;  

    控制Cookies包括创建和修改等;   

    基于Node.js技术进行服务器端编程。 

  4. ECMAScript介绍
            ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。  
            这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript， 但实际上后两者是ECMA-262标准的实现和扩展。
        一般我们认为JavaScript包含三个部分：  　
             1.ECMAScript规定核心语法  　　
             2.DOM (document object model) 文档对象模型 作用：操作文档  
             3.BOM (browser object model) 浏览器对象模型 作用：操作对象

  5. javascript写法

    我们的JavaScript语句可以有几种写法

    可以写在HTML页面里面的script标签里面：

    <scirpt type="text/javascript">
    alert("js你好")
</script>

也可以写在外部的后缀为.js的文件里面,然后在html页面里面指定script标签的scr属性引入：

my.js文件里的内容：alert("js你好") 
html页面里面：<scirpt src="my.js" type="text/javascript"></script>

也可以直接写在标签里面:<a href="javascript:alert('js你好')">点我吧</a>

2.标识符和关键字

  1. 标识符
    所谓的标识符（Identifier），就是一个名称。在JavaScript中，标识符用来命名变量和函数，或者用作JavaScript代码中某些循环的标签。在JavaScript中，合法的标识符命名规则和Java以及其他许多语言的命名规则相同，第一个字符必须是字母、下划线或者是美元符号（$），其后的字符可以是字母、数字、下划线或美元符号。  
    注：标识符不能和javascript 中用于其他目的的关键字同名。数字不允许作为首字符出现，这样JavaScript可以轻易地区别开标识符和数字。
     

  2. 关键字
    关键字是指在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些单词。

    JavaScript关键字是不能作为变量名和函数名使用的。

    常见的关键字：
    break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

  3. 保留字
    “保留字”实际上就是预留的“关键字”，意思是现在虽然现在还不是关键字（也就是本身还不具备特殊含义的），但是未来可能会成为关键字的，你一样是不能使用它们当变量名啊方法名的。

    常见的保留字：
    abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等

  4. 注释
    所谓的注释，从中文含义就是标注解释，而我们代码里的注释就是用来解释代码的作用。在实际开发中我们可能是多人做相同的一个工作，或者大家写完的代码以后会交给别人看，或者很久以后再看，需要去重新理清思路。这个时候注释的作用就非常有用。可以清楚了解代码的思路，便于团队协作。注释是不会影响我们JS代码的运行，所以放心大胆的写注释，良好的注释习惯会让你的代码整齐，思路顺畅。

    注释的写法：  
    单行注释      //注释的内容
    多行注释     /*注释的内容*/

3.变量和常量

  1. 变量的定义
    变量是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。对于变量的使用首先必须明确其命名规则、声明方法及其作用域。简而言之，就是可以变化的量。类似我们初中数学题目的时候假设变量的含义类似。

  2. 变量的命名规则
    必须以字母或下划线开头，中间可以是数字、字母或下划线变量名     不能包含空格、加号、减号等符号     不能使用JavaScript 中的关键字。   JavaScript  的变量名是严格区分大小写的。
    注：UserName 与username 代表两个不同的变量。与标识符的命名规则差不多。

  3.  变量的声明和赋值
    在JavaScript中，使用变量前需要先对其进行声明，所有的JavaScript变量都由关键字var 声明，语法格式如下：
            var age;
    在声明变量的同时也可以对变量进行赋值。
            var age=20;

    可以使用一个关键字var 同时声明多个变量：
            var a，b，c；
    也可以在声明变量的同时对其赋值，即初始化，如：
            var i = 1, j = 2, k = 3;
            
    如果只是声明了变量，并未对其赋值，则其值默认为undefined。var语句可以用作for循环和for/in循环的一部分，这样就使循环变量的声明成为循环语法自身的一部分，使用起来比较方便。 

    也可以使用var语句多次声明同一个变量，如果重复声明的变量已经有一个初始值，那么此时的声明就相当于对变量的重新赋值。

    由于JavaScript采用弱类型的形式，因此大家可以不必理会变量的数据类型，即可把任意类型的数据赋值给变量。

  4. 变量的作用域
    变量的作用域是指某变量在程序中的有效范围，也就是程序中定义该变量的区域。在JavaScript中变量根据作用域可以分为两种：全局变量和局部变量。  局部变量是定义在函数体内，只作用于函数体的变量，函数的参数也是局部性的，只在函数内部起作用。  例如，下面的程序代码说明了变量的作用域作用不同的有效范围。

    <script language="javascript"> 
var a;  //该变量在函数外声明，作用域整个脚本代码
function send(){
       a = "JavaScript";
       var b = "语言基础";//该变量在函数内声明，之作用于该函数体
       alert(a + b);
}
</script>

     

  5. 变量的生存期
    变量的生存期是指变量在计算机中存在的有效时间。从变成的角度来说，可以简单地理解为该变量所赋的值在程序中的有效范围。JavaScript 中变量的生存期有两种：全局变量和局部变量。全局变量在主程序中定义，其有效范围从其定义开始，一直到本程序结束为止。局部变量在程序的函数中定义，其有效范围只有在该函数之中，在函数结束后，局部变量的生存期也就结束了。

  6. 常量
    当程序运行时，值不能改变的量为常量。常量主要用于为程序提供固定和精确的值，如数字，逻辑值真（true）、逻辑值假（false）等都是常量。需要改变的常量可以使用变量来进行提供。  在我们的ES5里面没有常量的概念，我们会使用大写的变量来假设是常量，从ES6开始我们有了常量的定义方法const,后面我们的介绍到。
     

4. 基本数据类型

        所谓的数据类型我们从字面含义，可以了解到就是描述数据的类型，数据就和我们人一样也有类型，人有男人，女人。数据也分，数据的类型有数字的，字符的，描述对错的。这就是我们的数据类型。那我们常见的基本数据类型有：数字型，字符串型，布尔型，undefined,null这五种基本的数据类型;同时还有我们对象类型 数组和对象 。

  1. 数字型(number)
    只有一种数字类型。数字可以带小数点，也可以不带；
    JavaScript 数字型数据可以为正数也可以为负数；JavaScript 数值极大或者极小的时候可以用e来表示。

    var x = 10; //整数 型  
var y = 10.00;  //浮点型
var x2 = 10;    //正数
var y2 = -10 ;  //负数
var x3 = 122e5; //12200000
var y3 = 122e-5;    //0.00122

    JavaScript数字型数据可以使用八进制、十进制、十六进制运算十进制：是一个数字系列，如：1，2，-3，0十六进制：是以16为基数的数据，是以“0X”和“0x”开头，其后跟随十六进制数字串的直接量。十六进制的数字可以是0到9中的某个数字，也可以是a（A）到f（F）中的某个字母，它们用来表示0到15之间（包括0和15）的某个值。

    var x = 0xff ;  //  15*16+15 = 255  
var y = 0xCAFE911;  // 212855057

    八进制：尽管ECMAScripr标准不支持八进制数据，但JavaScript的某些实现却允许采用八进制（基数为8）格式的整型数据。八进制数据以数字0开头，其后跟随一个数字序列，这个序列中的每个数字都在0和7之间（包括0和7）。

    var x = 0377;   // 3*64+7*8+7 = 255

  2. 字符串(string)
    字符串是存储字符的变量。用来表示文本的数据类型，程序中的字符串是包含单/双引号中的，由单引号定界的字符串中包含有双引号，反之也是如此。
     

    var x = "javascript";  
var y = 'javascript基础';
var str = '本节课的内容是："javascript基础"';
var str2 = "本节课的内容是：'javascript基础'";

  3. 布尔型(boolean)
    布尔值通常用于流程控制。字符串和数字型的值都是无穷尽的，然而布尔数据类型（逻辑）只能有两个值：true或false，这两个值分别用来说明某个事物是真还是假。布尔值通常在JavaScript 程序中用来比较所得的结果。例如：

    n==1    
//这行代码测试了变量n的值是否与数值1是否相等，如果相等， 则表示结果为true，否则为false

  4. undefined(未定义)
    这个值表示变量不含有值，没有定义的值；或者被赋予了一个不存在的属性值。

    var i;  
document.write(i) ; //结果就是undefined；

  5. null(空)
    关键字null是一个特殊的值，它表示为空值，用于定义空的或不存在的引用。如果试图引用一个没有定义的变量，则返回一个null值。这里必须要注意的是：null不等同于空的字符串（""）或0。  null与undefined的区别是： null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值。

    var i = 10;
document.writeln(i);    //结果 10
i = null;
document.writeln(i);    //结果 null

    typeof  
    我们使用typeof函数，来检测变量的数据类型

    var aa = "你好";
var res =  typeof(aa);  
//或者简写  var res =  typeof aa; 
console.log(res)  // string

5.运算符

        所谓的运算符是用于执行程序代码运算，会针对一个以上操作数项目来进行运算。例如我们以前数学学习中的加减乘除等等这种就属性运算符。

  1. 算术运算符
    加减乘除，取模，累加，累减

    运算符描述例子(y=5)x 运算结果y 运算结果
    +加法x=y+275
    -减法x=y-235
    *乘法x=y*2105
    /除法x=y/22.55
    %取模（余数）x=y%215
    ++自增x=++y66
    --自减x=--y44



    所谓的累加是 ++运算符，所谓的累减是--运算符。

    var a = 10;
a++;  // 实质是 a = a +1 结果a变成了11

    但是我们的累加和累减分为前后，在有的时候有点区别。

    var a = 10;
++a;  // 实质是 a = a +1  结果还是11 和 ++a没区别

    可是如果我们在将累加和累减放在运算中就会有点不同。

    var a = 10;
var res = 9 + ++a;
console.log(res);  //console.log()函数适用于控制台输出
console.log(a);

    你会以为结果是res是20，a的值是11。这符合大家的思考逻辑。好的看下面的代码。

    var a = 10;
var res = 9 + a++;
console.log(res);  //console.log()函数适用于控制台输出
console.log(a);

    这个时候你发现 res是19，a的值还是11。这个就让大家觉得很奇怪。 这里强调一点：我们的前++是将自己先进加1后再去和别人运算。这里我们可以看出来上面个案例 a在和9相加之前已经将自己加了1，而下面那个案例是先去和9进行运算，当运算完了以后再回来将自己加1 。口诀：前++是先加完自己再去和别人运算，后++是先和别人运算，运算结束后再将自己加一下。

  2. 比较运算符
    比较运算符在逻辑语句中使用，以测定变量或值是否相等。

    运算符例子(y=5)等同于运算结果
    ==等于x==8false
    ===全等x==="5"false
    !=不等于x!=8true
    !==不全等x!=="5"true
    >大于x>8false
    <小于x<8true
    >=大于或等于x>=8false
    <=小于或等于x<=8true

    全等于需要值相同并且数据类型相同
     

  3. 赋值运算符
    赋值语句是JavaScript程序中最常用的语句。在程序中，往往需要大量的变量来存储程序中用到的数据，所以用来对变量进行赋值的赋值语句也会在程序中大量出现。赋值运算符用于给 JavaScript 变量赋值。给定 x=10 和 y=5，下面的表格解释了赋值运算符：

    运算符例子(y=5)等同于运算结果
    = x=yx=5
    +=x+=yx=x+yx=15
    -=x-=yx=x-yx=5
    *=x*=yx=x*yx=50
    /=x/=yx=x/yx=2
    %=x%=yx=x%yx=0

    用于字符串的 + 运算符 。+运算符用于把文本值或字符串变量加起来（连接起来）。如需把两个或多个字符串变量连接起来，请使用 + 运算符。

    var str = "javascript";
var str2 = "基础";
var str3 = str + str2;
console.log(str3)  // "javascript基础"

    对字符串和数字进行加法运算  

    var x=15+15;  // 30 数字型
var y="5"+5;  // 55  字符串
var z="Hello"+5;  // Hello5 字符串

     

  4. 逻辑运算符
    逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符：

    运算符描述例子
    &&and(x < 10 && y > 1) 为 true
    llor( x<6 || y=3 ) 为true
    !not!(x==y) 为 true

  5. 三元运算符

    var 变量 = 条件 ？ 结果1 : 结果2

    我们的条件成立的时候我们将结果1赋给变量，条件不成立的时候我们将结果2赋给变量。

    var a = 20;
var c = a > 21 ? "a大于21" : "a不大于21";
console.log(c) // 输出 a不大于21


    PS：纯属本人原创，如有错误 欢迎指点  不才会及时更正  互相学习   

Jay953641513
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript基础——this指向
人间草木
09-27 121
Javascript的this指向问题，有些人可能觉得很简单，有些人却觉得扑朔迷离，看完本文之后相应会对this的掌握有一个直观的判断，而不是"开局全靠猜"。 敲黑板 function函数this指向由调用方式确定，跟定义环境无关。 箭头函数this指向由定义环境决定，与调用方式无关，也不可以bind(this)。 严格模式 非严格模式下，全局作用域下的this指向window 严格模式...
Javascript----基础篇(1)
apple_52282345的博客
08-25 267
js三种引用方式js注释
JavaScript的用法与概述（2）
qq_53999369的博客
09-25 99
Java的用法与概述EVENT对象，触发器HTMLDOMLocation对象浏览器对象 EVENT对象，触发器 几种不同的触发器和用法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function test(){ console.log("调
第十三期:你所了解的javascript？
歌谣的博客
10-08 641
在介绍JavaScript之前，首先让我们来简单了解一下脚本语言。大家知道，HTML通常用于格式化和链接文本，各种编程语言通常用于向机器发出一系列复杂的指令，而脚本语言是介于HTML和C++、Java等编程语言之间的语言。脚本语言是一种简单的语言，其语法和规则没有编程语言严格和复杂。用C++、Java等编写的程序必须先经过编译，将源代码转换为二进制代码之后才可执行，而脚本语言是一种解释性的语言，其...
JavaScript基础
lily15241的博客
06-22 282
为什么学习JavaScript JavaScript在网页制作中占有非常重要的地位，可以实现验证表单，制作特效等功能，总结起来学习JavaScript的目的主要基于以下三点： 1.客户端表单验证 当我们注册登录时信息格式错误，这时，使用JavaScript可以及时让用户得到交互，也减轻了服务端的压力。 2.页面动态效果 在JavaScript中，可以编写响应鼠标单击等事件的代码，创建动态页面特效，从而高效地控制页面内容，增加客户端体验 3.JQuery的基础 JavaScript是学习JQuery的基础，为
avaScript中变量的声明和赋值
weixin_34362991的博客
12-14 389
变量是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。变量是相对常量而言的。常量是一个不会改变的固定值，而变量的值可能会随着程序的执行而改变。变量有两个基本特征，即变量名和变量值。为了便于理解，可以把变量看作是一个贴着标签的盒子，标签上的名字就是这个变量的名字（即变量名），而盒子里面的东西就相当于变量的值。 1．变量的声明 在JavaScript中，使用变量...
JavaScript基础知识第二讲续
新白的博客
03-16 225
变量与常量 运算符
JavaScript基础教程——入门必看篇
10-22
本文将深入探讨JavaScript的基础知识，帮助初学者快速入门。 首先，JavaScript是一种基于对象和事件驱动的描述性语言，这意味着它依赖于已有的对象来执行任务，并通过事件（如用户点击按钮）来触发代码执行。它也是...
javascript基础——String
10-21
JS不是那么好学的，本身语言设计的时候就有很多不可思议的地方，这篇文章主要介绍了javascript基础——String。
web前端——JavaScript基础
03-06
思维导图式笔记， 笔记来源https://blog.csdn.net/qq_38490457/article/details/109257751
javascript基础语法——全面理解变量和标识符
10-22
下面小编就为大家带来一篇javascript基础语法——全面理解变量和标识符。小编觉得挺不错的，现在就分享给大家，也给大家做个参考，一起跟随小编过来看看吧
JavaScript基础知识(一)
Ricardo的博客
04-25 181
一、js是由哪几部分组成的？ 1.核心（ECMAScript） 2.文档对象模型（DOM），JS用于操作HTML的api 3.浏览器对象模型（BOM），JS用于操作浏览器的api 二、数据类型 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、Null类型、Undefined类型 引用数据类型：对象(Object)、数组(Array)、函数(Function...
<script language="JavaScript">
AriesSurfer的专栏
04-26 1700
如题： language="javascript" 就是指定编释语言为javascript language="vbscript" 就是指定编释语言为vbscript
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 184
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 91
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 874
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 299
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 196
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值