【JavaScript-基础语法】

---

初识JavaScript

• JavaScript：
  （1）是世界上最流行的编程语言之一
  （2）是一个脚本语言，通过解释器运行
  （3）主要在客户端（浏览器）上运行，现在也可以基于node.js在服务器端运行。

• JavaScript能做的事情：
  （1）网页开发
  （2）网页游戏开发
  （3）服务器开发（node.js）
  （4）桌面程序开发
  （5）手机APP开发’

• JavaScript和HTML和css之间的关系：
  （1）HTML：网页的结果
  （2）css：网页的表现
  （3）JavaScript：网页的行为。

Node.js这是一个js的运行平台，浏览器是运行在客户端的，Node.js既可以运行在客户端，又可以运行在服务器上，就可以给js赋予客户端开发/服务器开发的能力。

• JavaScript的组成：
  （1）ECMAScript：JavaScript语法
  （2）DOM：页面文档对象模型，对页面中的元素进行操作。
  （3）BOM：浏览器对象模型，对浏览器窗口进行操作。

JavaScript的书写形式

行内式

直接嵌入到html元素内部

<button onclick="alert('hello')">这是一个按钮</button>

注：js中字符串常量可以使用单引号表示，也可以使用双引号表示。

内嵌式

把js写到script标签中。

 <script>
        alert('hello');
    </script>

外部式

写到单独的.js文件中。

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

alert('hello');

注：这种外部式下script标签中间不能写代码，必须空着（写了代码也不会执行）。

注释：
（1）js的注释：//，/* /
（2）HTML的注释：<!— —>
（3）css的注释：/ */

输入输出

输入

弹出一个输入框

prompt("请输入你的名字");

输出：alert

弹出一个警示对话框，输出结果

alert("hello");

输出：console.log

在控制台打印。

console.log("这是一条日志");

基本语法

变量的使用

var num = 100;
var s = 'hello';
var arr = [];

js不区分整型和浮点型。

动态类型

• js的变量类型是程序运行过程中才确定的

var a = 10;//数字
var b ="hello";//字符串

• 随着程序的运行，变量的类型可能会发生改变。

var a = 10;
a = "hello";

基本数据类型

js中内置的几种类型

• number：数字，不区分整数和小数
• boolean：true真，false假
  Boolean 参与运算时当做 1 和 0 来看待.

console.log(true+1);//2
console.log(false+1);//1

• string：字符串类型
• underfined：只有唯一的值underfined，表示 未定义的值
• null：只有唯一的值null，表示空值。

比较运算符

• ==，！= ，只是比较两个变量的值，而不是比较两个变量的类型，如果两个变量能够通过隐式类型转换，转成相同的值，此时就认为也是相等。、

• ！== ，=== 既要比较变量的值，也要比较类型，如果类型不相同，就直接认为不相等。

let a = 20;
let b = '20';
console.log(a==b);//true
console.log(a===b);//false

条件语句

if语句

// 形式1
if (条件) {
语句
}
// 形式2
if (条件) {
语句1
} else {
语句2
}
// 形式3
if (条件1) {
语句1
} else if (条件2) {
语句2
} else if .... {
语句...
} else {
语句N
}

数组

创建数组

let arr1 = new Array();
let arr2 = [];
let arr3 = [1,2,3];
let arr4 = [1,'hello',null,undefined,true];

打印数组

let arr4 = [1,'hello',null,undefined,true];
console.log(arr4);
console.log(arr4[1]);

新增数组元素

• 通过修改length新增

let arr = [1,2,3,4];
arr.length = 5;
console.log(arr.length);//5
console.log(arr);//[1,2,3,4,空]

• 通过下标新增

var arr = [];
arr[2] = 10;
console.log(arr);

• 使用push进行追加元素

let arr = [];
for(let i=0;i<10;i++){
    arr.push(i);
}
console.log(arr);

删除数组中的元素

使用splice方法删除元素

let arr = [1,2,3,4,5,6]
//第一个参数表示从下标为2的位置开始删除，第二个参数表示要删除的元素个数是3
arr.splice(2,3);
console.log(arr);

函数

语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

• 函数定义并不会执行函数体内容，必须要调用才会执行，调用几次就会执行几次。

 function hello(){
            console.log('hello');
        }
        hello();
        hello();

• 函数参数的类型：传入的实参是可以任意的，只有能支持函数内部的逻辑。

	 function add(x,y){
            return x+y;
        }
        let result=add(10,20);
        console.log(result);//30
        result = add('hello','world');
        console.log(result);//helloworld
        result = add(10,'hello');
        console.log(result);//10hello

• 函数参数的个数：
  实参和形参之间的个数可以不匹配。
  （1）如果实参个数比形参个数多，则多出的参数不参与函数运算。

		function add(x,y){
            return x+y;
        }
        console.log(add(12,10,11));//22

（2）如果实参个数比形参个数少，则此时多出来的形参值为underfined

function add(x,y){
            return x+y;
        }
        console.log(add(10));//NaN

函数表达式

 	let f = function () {
            console.log('hello');
        }

作用域

在js里面，{}内部的代码是可以访问到{}外部等待变量的。

let num = 12;
        function hello(){
            console.log(num);
        }
        hello();//12

对象

在js中

使用字面量创建对象（常用）

使用{}创建对象

let student = {
            name:"xiaoming",
            age:19,
            height:185,
            weight:110,
            jump:function() {
                console.log('hello');
            },
        };
        console.log(student.name);//使用.成员访问运算符来访问属性
        student.jump();//调用方法

使用new Object创建对象

 let student = new Object();
    student.name = 'xiaoming';
    student.height = 180;
    student.hello = function(){
        console.log('hello');
    }
    console.log(student.name);
    student.hello();

js中一个对象中有哪些成员，也都是动态可以改变的。

使用构造函数创建对象

前两种的创建对象方式只能创建一个对象，而使用构造函数可以很方便的创建多个对象。

function 构造函数名(形参) {
this.属性 = 值;
this.方法 = function...
}
var obj = new 构造函数名(实参);

• JavaScript的对象和Java的对象的区别：
  （1）javascript没有类的概念。
  （2）javascript对象不区分属性和方法
  （3）javascript对象没有private/public等访问控制机制
  （4）javascript对象没有继承
  （5）javascript没有多态