JavaScript基础语法

目录

一、JavaScript简介

二、JavaScript基础语法

一、引入方式

二、基本数据类型

三、运算符

四、JavaScript变量

五、条件语句

六、循环语句

七、数组

八、对象基础

九、函数

十、总结

---

一、JavaScript简介

• JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，
• JavaScript 是一种轻量级的编程语言，可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。
• JavaScript的作用：直接写入HTML输出流；对事件作出反应；改变HTML内容；改变HTML图像；改变HTML样式；用于验证用户的输入。

二、JavaScript基础语法 一、引入方式

1、行内引入:

<开始标签 on+事件类型=“js代码”>

行内引入方式必须结合事件来使用，但是内部js和外部js可以不结合事件

点击我

2、内部引入：

在head或body中，定义script标签，然后在script标签里面写js代码。

3、外部引入：

定义外部js文件(.js结尾的文件)

• 在 HTML 文档中，JavaScript 代码必须位于 标签之间：

• 标签可以在HTML文档中出现多次，可以在部分，也可以在部分。
• 可以把JavaScript程序保存为一个单独的文件，JavaScript程序文件的扩展名是.js。
•  Script标签要单独使用，要么引入外部js，要么定义内部js，不要混搭使用
• 外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点。

二、基本数据类型

• 数值(number)：JavaScript 只有一种数值类型，包括整数和小数。

数字大小有限，如果超过了这个范围，会返回 Infinity（正无穷）或者-Infinity（负无穷）。

• 字符串(string)：例如 "911", 'Hello world。

需要用单引号或双引号括起来。

• 布尔值(boolean)：true 或 false。

• undefined：在 JavaScript 中，声明了但未赋值的变量，其值是 undefined。
• null型：只有一个值，与undefined相等。

三、运算符

1. 算数运算符：+   -   *     /   %（求余数） ++（自增）   --（自减）
2. 比较运算符：>   >=   <     <=   ==   !=      ===(全等运算符，不会做自动的类型转换）！==（不全等运算符，不会做自动的类型转换）
3. 逻辑运算符：&&（与）   ||（或）   !（非）
4. typeof运算符：typeof  A   返回 A 的类型

5. 条件运算符：  condition ？ value1：value2；（如果condition为真，执行value1，否则执行value2）

四、JavaScript变量

变量的声明:var

变量的赋值：=（声明和赋值可以同时进行）

变量名：在 JavaScript 中，变量首字符必须是字母、下划线(_)或美元符号($)，之后的字符可以是字母、数字、下划线或美元符号，JavaScript 是大小写敏感的。

定义变量：在JavaScript中，定义变量时，不分类型，使用关键字

例如 ：var  x, y;

x=100;  y="Hello world!";

或  var  x=100,  y="Hello world!";

字面量：字面量实际上就是一些固定的值，例如：1，5，7，false等。

五、条件语句

条件语句（与C语言类似）是通过判断指定表达式的值来决定执行还是跳过某些语句，最基本的条件语句：

• if…else
• switch…case（更适用于多条分支使用同一条语句的情况，需要添加break结束语句）

六、循环语句

循环语句（与C语言类似）和条件语句一样，也是基本的控制语句，只要满足一定的条件将会一直执行，最基本的循环语句：

• while
• do…while
• for

结束语句：

• break：结束最近的一次循环，可以在循环和switch语句中使用。
• continue：结束本次循环，执行下一次循环，只能在循环中使用。

七、数组

1.js数组

• JavaScript 数组用于在单一变量中存储多个值，在最后一个变量后面不要写逗号。

• 通过引用索引号（下标号）来引用某个数组元素。

• 数组是一种特殊类型的对象。

• 在 JavaScript 中对数组使用 typeof运算符会返回 "object"。

• length 属性返回数组的长度（数组元素的数）

• 访问第一个数组元素

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

• 访问最后一个数组元素 

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

• 遍历数组元素

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "
";
for (i = 0; i < fLen; i++) {
     text += "
" + fruits[i] + "
";
} 

• 添加数组元素，向数组添加新元素的最佳方法是使用 push() 方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); 

2.数组方法

把数组转换成字符串，JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

join() 方法可将所有数组元素结合为一个字符串。

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

从数组d出项目Popping，向数组推入项目Pushing 。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();    
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");    

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();  

shift() 方法返回被“位移出”的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();  

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

unshift() 方法返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");  

 通过使用它们的索引号来访问数组元素：数组索引（下标）以 0 开始。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";  

delete 运算符来删除元素 。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];    

splice() 方法可用于向数组添加新项。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

八、对象基础

1、Object类型，是JavaScript中的引用数据类型。

2、创建对象有两种方式：

• 第一种方式

var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);

• 第二种方式 

var person = {
    name: "孙悟空",
    age: 18
};
console.log(person);

3、访问属性的两种方式：

第一种方式：使用  对象.属性名  来访问

第二种方式：使用  对象【‘属性名’】

4、删除对象的属性使用delete关键词：  delete 对象.属性名

var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);

delete person.name
console.log(person);

 5、遍历对象

枚举遍历对象中的属性，可以使用for … in语句循环，对象中有几个属性，循环体就会执行几次。

九、函数

一、创建函数

1、使用函数对象来创建一个函数（不常用）

function 函数名([形参1,形参2,...,形参N]) {
    语句...
}

2、使用函数声明来创建一个函数（常用），

function fun(){
    console.log("这是我的第一个函数");
}

3、使用函数表达式来创建一个函数（常用）

var 函数名  = function([形参1,形参2,...,形参N]) {
    语句....
}

二、函数调用

1、无参调用

var fun =function(){
console.log("调用无参函数");
}

//声明
fun();
//调用

2、有参调用

var sum = function (num1, num2) {
    var result = num1 + num2;
    console.log("num1 + num2 = " + result);
}
//声明
sum(10, 20);
//调用

三、函数的参数

1、按值传递，把函数外部的值赋值给函数内部的参数。

2、解析器不会检查实参的类型，需要对参数进行类型的检查，函数的实参可以是任意的数据类型。

3、如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined。

四、函数返回值

语法格式：return  值

function sum(num1, num2) {
    return num1 + num2;
}

var result = sum(10, 20);
console.log(result);

五、嵌套函数

在函数中声明的函数就是嵌套函数，嵌套函数只能在当前函数中可以访问，在当前函数外无法访问。

function  B() {
    function A() {
        console.log("哈哈哈哈")
    }

    A();
}

B();

六、匿名函数

没有名字的函数就是匿名函数，它可以让一个变量来接收，也就是用 “函数表达式” 方式创建和接收。

十、总结

JavaScript相当于css和HTML来说较难，还需更一步学习和练习。