JavaScript入门学习之一——初级语法

JavaScript是前端编辑的一种编程语言(不同于html,html是一种标记语言),所以和其他的编程语言一样,我们将会从下面几点学习

  • 基础语法
  • 数据类型
  • 函数
  • 面向对象

JavaScript的组成

实际上一个完整的JavaScript是由下面三个不同的部分组成的

  • 核心(ECMAScript)
  • 文档对象模型(DOM),Document object model,整合了JS,CSS及Html
  • 浏览器对象模型(BOM),Broswer object model,整合了JS和浏览器

简单的说,ESMAScript描述了JavaScript语言本身的相关内容,它有着下面一些特点:

  • JavaScript是脚本语言
  • JavaScript是一种轻量级的编程语言
  • JavaScript是可以插入Html内的编程代码
  • JavaScript插入浏览器以后,可以由所有的现代浏览器来执行

JavaScript的引入方式

写在script标签内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        alert(‘弹个窗口出来‘)
    </script>
</body>
</html>

单独写在JS文件中并导入在html内

先写一个1.js文件

##########1.js##########
alert(‘弹出个窗口‘)

然后可以把这个文件导入在html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
    <script src="1.js"></script>
<body>
</body>
</html>

JavaScript的基本语法

注释

//单行注释
/*
多行注释
*/

结束符

JavaScript中的语句要以分号(;)结束,但这个C语言不同,这个结束符不是必须的,但是建议还是加上,因为有些时候会出问题。

变量声明

JavaScript的变量名可以使用下划线_,数字,字幕和$符组成,但不能以数字开头。

变量声明的时候要用var来声明

var name=‘字符串‘;
var value=123;

还有一点要注意的是变量名是要区分大小写的。这里建议使用驼峰式的命名规则。

还有JavaScript里的变量是动态类型,也就是说同一个变量名可以存储不同类型是的数据

JavaScript的数据类型

就像前面说的,JavaScript是可以拥有动态类型的

var x;          //x是underfined
var x = 1;      //x是数字
var x = ‘abc‘   //x是字符串

数字类型

JavaScript里是部分int和float的,只有一种数字类型。

var a = 1
var b = 12.34
var c = 123e4
var d = 123e-4

还有一种数据是NaN,表示不是一个数字(Not a Number)

字符串及其常用方法

方法 说明
.length 返回字符串长度值
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value,...) 拼接
.indexOf(substring,start) 子序列位置
.substring(start,end) 根据索引获取子序列
.slice(start,end) 切片
.toLowerCase() 转换为小写
.toUpperCase() 转换为大写
.split(delimiter,limt) 分割

这里要注意的就是切片(slice)和返回子序列(substring)的区别

先看看两者的相同点:

如果start和end相等,则返回空字符串

如果stop参数省略,则返回到字符串末尾的字符串

如果某个参数超出字符串的长度,这个参数会被替换为字符串的长度

那么再看看两者的不同

substring的特点:

如果start>end则start和end两个值会被交换

如果某个参数为负数,则会被0替换(切片是允许使用-1来表示末尾最后一个字符的)

silce的特点:

如果start>end时二者不会被交换(会返回一个空字符串)

如果start小于0,则切片从字符串末尾往前数的低start个字符串开始(包括该位置)

如果end小于0,则从自佛成末尾往前数的第end个字符结束(不包括该位置)

分割的特点

按照delimiter分割字符串,返回一个列表,列表的长度为limit的值。

布尔类型

布尔值和Python不太一样,true和false都是小写

var a = true;
var b = false;

空字符串(‘’,不是‘ ’)、0、null、underfined、NaN都是false。

数组及其常用方法

数组和Python中的list列表相似,

var a = [0,1,2,3];

看看数组的常用方法

方法 说明
.length 数组大小
.push(ele) 尾部追加元素
.pop() 删除末尾元素并返回该值
.unshift(ele) 头部插入元素
.shift 删除第一个元素并返回该值
.slice(start,end) 切片
.reverse() 反转
.join(seq) 连接
.concat(val,...) 将数组元素连接成字符串
.sort() 排序

要注意的是几点:

1.不能想Python中的列表一样直接切片

a = [1,2,3,4,5]
//注意下面的方法是错误的
a[2:3]

2.join的时候和Python里是反的,先看看Python里的方法

>>> a = [‘a‘,‘b‘,‘c‘]
>>> ‘+‘.join(a)
‘a+b+c‘

再看看JS里的方法

a = [‘a‘,‘b‘,‘c‘]
(3) ["a", "b", "c"]
a.join(‘+‘)
"a+b+c"

3.sort方法的使用事项

如果sort在调用的时候没有参数传入,则会按数组中元素的字符编码的顺序进行排序。

如果想按照其他的标准来进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值,然后返回一个用于说明这两个值相对顺序的数字,比较函数应该具有两个参数a和b,其返回值如下:

若a小于b,在排序后的数组中a应该出现在b之前,则返回一个小于0的值。

若a等于b,则返回0.

若a大于b,则返回一个大于0的值。

>function sortNumber(a,b){
    return a-b
}
<undefined
>var a = [1,3,2,4]
<undefined
>a.sort(sortNumber)
<(4) [1, 2, 3, 4]

4.数组的遍历

可以用for循环来对数组进行遍历

>var a = [1,2,3,4]
<undefined
>for (var i=0;i<a.length;i++){
    console.log(i);
}
VM1843:2 0
VM1843:2 1
VM1843:2 2
VM1843:2 3
undefined

null和underfined

null表示值是空,一般在需要指定或清空一个变量时候才会使用,比方下面的

>name = null
<null
>name
<"null"

而underfined表示当一个变量被声明但没初始化的时候,改变量的默认值为underfined,还有就是函数无明确的返回值时(var一个值但是没有赋值操作),返回的也是underfined。

类型查询

类型查询可以用下面的方式进行

typeof ‘abc‘
typeof 123
typeof null
typeof true

typeof是一个一元运算符,就像++,!,--一样,不是一个函数,也不是一个语句

有些变量或值调用typeof运算后会有下面的返回值

数组、null的返回值是object

undefined的返回值是undefined

运算符

算数运算符

+
-
*
、
%
++
--

比较运算符

>
>=
<
<=
!=
==
===
!==

这里可能对==和===有些疑问,我们看看下面的代码

>1==‘1‘
<true
>1===‘1‘
<false

也就是说==是不考虑数据类型的,而===是强等,会对数据类型一同进行比较

逻辑运算符

&&      //与
||      //或
!       //非

赋值运算符

=
+=
-=
*=
/=

流程控制

if-else

>var a=10
>if (a>5){
    console.log(‘yes‘);
}else{
    console.log(‘no‘)}
<yes

switch判断

switch (day){
    case 0:
        console.log(‘Sunday‘);
        break;
    case 1:
        console.log(‘Monday‘);
        break;
    default:
        console.log(‘...‘);
}

通常switch里的case后都会加上break,否则会执行后续case里的语句。

for循环

>var a = [1,2,3,4]
<undefined
>for (var i=0;i<a.length;i++){
    console.log(i);
}

这个for循环的结构和C语言中类似。

while循环

var i = 0;
while(i<10){
    console.log(i);
    i++;
}

和for循环一样,while循环和C语言中的while循环结构一样。

三元运算

var a = 1;
var b = 2;
var c = a>b?a:b

原文地址:https://www.cnblogs.com/yinsedeyinse/p/12076907.html

时间: 2024-10-13 16:02:01

JavaScript入门学习之一——初级语法的相关文章

JavaScript入门学习书籍的阶段选择

对于许多想学习 JavaScript 的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习 JavaScript 的理由.在 JavaScript 方面,自己不是什么专家,也不是什么高手,但自己一路走来,JavaScript 从迷茫到认识,对于JavaScript 书籍的认识或许还有些借鉴价值.入门推荐首选书籍:<JavaScript DOM 编程艺术>当初读了不下 4 遍,书内容简单,易学,上手快,编程思想严谨.好的入门书,对你未来的编程都会有着深远的影响

Javascript入门学习

编程之道,程序员不仅仅要精通一门语言,而是要多学习几门. 本学习之源出自柠檬学院http://www.bjlemon.com/,特此声明. 第一课1:javascript的主要特点解释型:不需要编译,浏览器直接解释执行基于对象:我们可以直接使用JS已经创建的对象事件驱动:可以对以事件驱动的方式相应客户端的输入,无须经过服务器端程序安全性:不允许访问本地硬盘,不能将数据写入到服务器上跨平台:js依赖浏览器本身,与操作系统无关 第二课如何在网页中写Javascript1:在页面中直接嵌入Javasc

JavaScript入门学习之二——函数

在前一章中讲了JavaScript的入门语法,在这一章要看看函数的使用. 函数的定义 JavaScript中的函数和Python中的非常类似,只不过定义的方式有些不同,下面看看是怎么定义的 //定义普通函数 function f1(){ console.log('hello world!') } //定义带参数的函数 function f2(a,b){ console.log(a) console.log(b) } //定义带返回值的函数 function f3(a,b){ return a+b

JavaScript入门学习之四——DOM介绍及常用方法

在前面我们学习了JavaScript的基本语法,紧靠这些代码我们还无法实现浏览器的交互.也就是说我们还不能做出来平时常见到的网页交互.下面就需要引入一个新的知识点,也就是这一章要讲的:DOM. BOM——Browser Object Module,是指浏览器对象模型.通过这个模型可以实现JavaScript和浏览器之间的对话,包括后面要学习的DOM,可以访问Html中的所有文档中的元素. window对象 所有的浏览器都支持window对象,他表示浏览器窗口.所有的JavaScript全局对象,

JavaScript入门学习(1)

<html> <script type ="text/javascript"> var i,j; for (i=1;i<10;i++){ for (j=1;j<i;j++){ document.write("a") } document.write("<br />"); } </script> </html> http://www.runoob.com/js/js-tutor

JavaScript入门学习之四——JQuery入门

在前面一章我们已经点到过,很多的情况我们都是通过JQuery来对标签进行操作的,在这一章我们就来好好讲一讲这个JQuery. JQuery初识 先看看JQuery的使用 JQuery的特点: 可以用及其简练的语言来做JS做的事情(write less,do more) JQuery就是一个JS文件,相当于一个Python的第三方模块,直接拿过来用就可以了(但是需要按照要求的规则).但是原生的JS DOM是基础,其实还是通过这些基础来实现所有的操作. 我们要学习的,JQuery最常用的方向,也就是

JavaScript入门学习(2)--进度条

<html> <style type="text/css"> #bar{width:0px; height:20px; background:#ee00ff;}//定义进度条的前景色 </style> <script> var act; function over(){ var w=document.getElementById("bar").style.pixelWidth; if (w<400){ docum

JavaScript入门--慕课网学习笔记

 JAVASCRIPT-(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<script></script>之间. <script type="text/javascript">表示在<script></script>之间的是文本类型(text),ja

javascript入门视频第一天 小案例制作 零基础开始学习javascript

JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此,小强老师给大家写了这篇入门的javascript文章.从零基础开始学习js,使大家入门更简单,希望大家喜欢.JavaScript是一种脚本语言. 也是我们web网络中最为流行一种脚本语言.脚本语言:     1.不是独立存在的.需要依附.js就是依附在浏览器中.     2.脚本语言也是语言,也有