初识JavaScript

目录

什么是JavaScript

JavaScript的组成

JavaScript的书写形式

行内式

内嵌式

​编辑

外部式

JavaScript的输入输出

输入：prompt

​编辑 输出：alert

 输出：console.log

JavaScript语法 

变量的使用

基本数据类型

运算符

条件语句 与循环语句

数组

创建数组

新增数组元素

删除数组元素 

遍历数组 

函数 

语法格式

对象 

创建对象

使用对象的属性和方法 

获取元素

 操作元素

什么是JavaScript

JavaScript简称（JS）

• 是世界上最流行的编程语言之一
• 是一个脚本语言, 通过解释器运行
• 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.

JavaScript的组成

• ES：JavaScript语法
• DOM：页面文档对象模型，对页面中的元素进行操作
• BOM：浏览器对象模型，对浏览器窗口进行操作

JavaScript的书写形式

行内式

内嵌式

外部式

写到单独的.js文件中

注意：这种情况下script标签中间不能写代码，写了也不会执行 

JavaScript的输入输出

输入：prompt

prompt("请输入您的姓名:"); //弹出一个输入框

 输出：alert

alert（"hello"）; //弹出一个输出框

 输出：console.log

console.log("这是一条日志"); //向控制台输出日志

JavaScript语法 

变量的使用

var name = 'zhangsan';
var age = 20;

var是JS中的关键字，表示这是一个变量，初始化的值如果是字符串，就要用单引号或者双引号引起来。

示例：

var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数");
alert("您的姓名是: " + name);
alert("您的年龄是: " + age);
alert("您的分数是: " + score);

基本数据类型

• number：数字，不区分整数和小数
• boolean：true真，false假
• string：字符串类型（包含字符串内置的属性及方法：length，substring等等）
• undefined：只有唯一的值undefined，表示未定义的值（一个变量未初始化，就是undefined类型；undefined和数字相加为NaN（表示不是一个数字））
• null：只有唯一的值null，表示空值

运算符

JS中的运算符和Java用法基本相同，这里选择不同的几个进行介绍

===  比较相等（不会进行隐式类型转换）

！== 同上

条件语句 与循环语句

条件语句，循环语句都与java一样，这里就不再介绍了 

数组

创建数组

var arr = new Array();   //A要大写

var arr = [];

var arr=[1,2,'haha',true];  //JS的数组不要求元素是相同类型

新增数组元素

1. 通过修改length新增，相当于在末尾新增元素，新增的元素默认值为undefined
2. 通过下标新增，如果下标超出范围赋值元素，则会给指定位置插入新元素
3. 使用push进行追加元素

   var arr = [9, 5, 2, 7, 3, 6, 8];
   var newArr = [];
   for (var i = 0; i < arr.length; i++) {
       if (arr[i] % 2 != 0) {
           newArr.push(arr[i]);
       }
   }
   console.log(newArr);

删除数组元素 

使用splice方法删除元素

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]

遍历数组 

for(var i of arr){
    console.log(i);
}  //另一种方法

函数 

语法格式

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

 注意：函数的定义和调用的先后顺序没有要求. (这一点和变量不同, 变量必须先定义再使用)

 

// 调用函数
hello();
// 定义函数
function hello() {
    console.log("hello");
}

对象 

创建对象

var a = {}; // 创建了一个空的对象
var student = {
    name: '蔡徐坤',
    height: 175,
    weight: 170,
    sayHello: function() {
        console.log("hello");
    }
};

•  使用 { } 创建对象
• 属性和方法使用键值对的形式来组织.
• 键值对之间使用 , 分割. 最后一个属性后面的 , 可有可无
• 键和值之间使用 : 分割.
• 方法的值是一个匿名函数

使用对象的属性和方法 

// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 ()
student.sayHello();

获取元素

document.querySelector(选择器字符串) //获取某个元素，保证选择器只有一个元素
document.querySelectorAll(选择器字符串) //获取多个元素

 操作元素

var content = dom元素.innerHTML   //读
dom元素.innerHTML='内容'       //写