2.web JavaScript基础语法

<!DOCTYPE html>
<html>
<head>
    <title></title>
<body>
    <script>
        document.write("你好"); // 在浏览器中显示提示信息
        alert("haha"); // 弹出对话框显示提示信息
    </script>
</body>
</head>
</html>

3.2HTML文档中链接脚本文件---外部式

在<head></head>中书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="first.js"><</script>
</head>
<body>

</body>
</html>

    document.write("你好");
    alert("haha");

3.3HTML标记内嵌入JavaScript代码

在<body></body>中间书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点我一下" onclick="alert('haha')">

</body>
</html>

4.JavaScript的输入输出

4.1输入：prompt---输入框

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

4.2输出：alert---弹框

// 弹出一个输出框
alert("hello");

4.3输出：Document对象的write()方法---浏览器页面

仅在文档加载时使用，如果文档完成加载再执行会覆盖整个HTML页面

    document.write("你好");

4.4输出: console.log---开发者工具

给程序员查看

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

4.4输出: 确认框---弹框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="first.js"></script>
</head>
<body>
</body>
</html>

    var value = confirm("您确定要继续执行吗？");
    alert("您的选择是"+value);

二、JavaScript语法概览

1.变量的使用

创建变量(变量定义/变量声明/变量初始化)

如果在声明时没有对变量进行初始化，变量会自动取值undefined

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

JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)

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

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

var a = 10; // 数字
a = "hehe"; // 字符串

2.基本数据类型

number：数字，不区分整数和小数
boolean： true 真, false 假.
string：字符串类型.
undefined：只有唯一的值 undefined表示未定义的值
null：只有唯一的值 null表示空值

3.number数字类型

JS 中不区分整数和浮点数, 统一都使用 "数字类型" 来表示.

3.1数字进制表示

var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头

3.2特殊的数字值

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围

-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围

NaN: 表示当前的结果不是一个数字

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

1. 负无穷大和无穷小不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity
2. 'hehe' + 10 得到的不是 NaN, 而是 'hehe10', 会把数字隐式转成字符串, 再进行字符串拼接
3. 可以使用 isNaN 函数判定是不是一个非数字

console.log(isNaN(10)); // false
console.log(isNaN('hehe' - 10)); // true

4.string 字符串类型

字符串字面值需要使用引号引起来, 单引号双引号均可

var a = "haha";
var b = 'hehe';
var c = hehe; // 运行出错

如果字符串中本来已经包含引号，那么此时需要用到转义字符

var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引号
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号

求长度，使用 String 的 length 属性即可

var a = 'hehe';
console.log(a.length); // 4
var b = '哈哈';
console.log(b.length); // 2

字符串拼接，使用 + 进行拼接

var a = "my name is ";
var b = "zhangsan";
console.log(a + b); // my name is zhangsan

var c = "my score is ";
var d = 100;
console.log(c + d); // my score is 100

console.log(100 + 100); // 200
console.log('100' + 100); // 100100

5.boolean 布尔类型

Boolean 参与运算时当做 1 和 0 来看待

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

6.undefined 未定义数据类型

如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型

var a;
console.log(a) // undefined

console.log(a + "10"); // undefined10

console.log(a + 10); // NAN

7.null 空值类型

null 表示当前的变量是一个 "空值

null参与运算时的值为10

var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10

三、JavaScript运算符

1.算术运算符

 + 
 -
 *
 /
 %

2.赋值运算符 & 复合赋值运算符

 =  
+=  
-=   
*=   
/=   
%=

3.自增自减运算符

++ // 自增
-- // 自减

4.比较运算符

<  
> 
= 
== 比较相等(会进行隐式类型转换) 
!= 
=== 比较相等(不会进行隐式类型转换) 
!==

== 带类型转换的比较
=== 不带类型转换的比较

5.逻辑运算符

&& // 与: 一假则假
|| // 或: 一真则真
!  // 非

6.位运算

& // 按位与
| // 按位或
~ // 按位取反
^ // 按位异或

7.移位运算

<<  // 左移
>>  // 有符号右移(算术右移)
>>> // 无符号右移(逻辑右移)

四、JavaScript流程控制

1.条件语句

if (条件) {
    语句1
} else {
    语句2
}

例1：判定一个数字是奇数还是偶数

不能写成 num % 2 == 1 就是奇数. 负的奇数 % 2 结果可能是 -1

var num = 10;
if (num % 2 == 0) {
console.log("num 是偶数");
} else {
console.log("num 是奇数");
}

例2：判定某一年份是否是闰年

var year = 2000;
if (year % 100 == 0) {
// 判定世纪闰年
if (year % 400 == 0) {
console.log("是闰年");
} else {
console.log("不是闰年");
}
} else {
// 普通闰年
if (year % 4 == 0) {
console.log("是闰年");
} else {
console.log("不是闰年");
}
}

2.三元表达式

三元表达式的优先级是比较低的

条件 ? 表达式1 : 表达式2

var a = num ?true:false;

3.switch语句

例1：判断星期几

switch (表达式) {
case 值1:
语句1;
break;
case 值2:
语句2:
break;
default:
语句N;
}

var day = prompt("请输入今天星期几: ");
switch (parseInt(day)) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("输入有误");

要用parseInt()方法先把输入的字符串转换成数字

4.循环语句

4.1while循环

while (条件) {
循环体;
}

例1：求5的阶乘

var result = 1;
var i = 1;
while (i <= 5) {
result *= i;
i++;
}
console.log(result)

4.2for 循环

for (表达式1; 表达式2; 表达式3) {
循环体
}

例1：求5的阶乘

var result = 1;
for (var i = 1; i <= 5; i++) {
result *= i;
}
console.log("result = " + result);

4.3跳出循环

break 结束整个循环
continue 结束这次循环

五、JavaScript的数组

JavaScript的数组长度是不固定的，类似于Java中的List对象

JavaScript数组的元素类型也是不固定的，什么元素都可以放入

JavaScript数组的元素也不一定连续

方法	描述
concat()	连接两个/更多的数组并返回结果
join()	把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分割
sort()	对数组元素进行排序
reverse()	颠倒数组中的元素
shift()	删除并返回数组的第一个元素
pop()	删除并返回数组的最后一个元素

1.创建数组

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

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素

2.数组的遍历

如果下标超出范围读取元素, 则结果为 undefined

2.1方式1

for(var i = 0;i < arr.length;i++){
    console.log(arr[i]);
}

2.2方式2

for(var i in arr){
    console.log(arr[i]);
}

3.新增数组元素

3.1头插法--- unshift()方法

将一个/多个元素添加到数组的头部，并返回数组的新长度

3.2尾插法---push()方法

将一个/多个元素添加到数组的尾部，并返回数组的新长度

3.3通过下标新增

3.4通过修改 length 新增

相当于在末尾新增元素. 新增的元素默认值为 undefined

4.删除数组中的元素

4.1头删法---shift()方法

从数组中删除第一个元素，返回该元素的值

4.2尾删法---pop()方法

从数组中删除最后一个元素，返回该元素的值

5.根据指定下标进行插入和删除---splice()方法

splice() 方法向/从数组添加/删除项目，并返回删除的项目

5.1例1：在位置 2，添加新项目，并删除 1 个项目

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

5.2例2：在位置 2，删除 2 个项目

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

六、JavaScript的函数

函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次
调用函数的时候进入函数内部执行, 函数结束时回到调用位置继续执行. 可以借助调试器来观察
函数的定义和调用的先后顺序没有要求. (这一点和变量不同, 变量必须先定义再使用)

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

5.1JS中的函数和Java中函数的区别

1.JS中的函数，不要求调用时的实参列表长度和定义的形参列表长度完全一致

function add(a, b) {
    console.log(a);    
    console.log(b);   
    return a + b;       
}
var z = add(1,2,3,4,5);
console.log(z);

function add(a, b) {
    console.log(a);
    console.log(b);
    return a + b;
}
var z = add(1);
console.log(z);

2.JS中的函数是一种数据类型！！！，JS中的函数可以出现在等号右边，函数作为值可以赋值给其他变量(包含隐式赋值，可以作为实参取调用其他函数)

例1：

function add(a, b) {
    console.log(a);
    console.log(b);
    return a + b;
}
var xxx = add;
var x = xxx(1,2);
console.log(x);

例2：

function add(a, b) {
    console.log(a);     // 6    a 的值就是实参 a 的值   var a = 100;
    console.log(b);     // 7    b 的值就是实参 b 的值   var b = 200;
    return a + b;       // 8    返回 300
}

function callFunction(f, a, b) {
    console.log(f);     // 2    f 的值就是实参 add    var f = add;
    console.log(a);     // 3    a 的值就是实参 100    var a = 100;
    console.log(b);     // 4    b 的值就是实参 200    var b = 200;
    var r = f(a, b);    // 5    调用 f 函数，实际就是调用了 add 函数  // 9 var r = 300
    console.log(r);     // 10   打印 300
    return r;           // 11 返回 r 也就是 300
}

var z = callFunction(add, 100, 200);    // 1 调用 callFunction 函数 // 12 var z = 300
console.log(z);     // 13 打印 300

例3：

function add(a, b) {
    console.log(a);          // 6. 打印 a 1
    console.log(b);          // 7. 打印 b 2
    return a + b;            // 8. 返回 a+b 3
}

function getFunction(){
    return add;              // 2. 返回add() 函数，把add() 函数赋给func
}
var func = getFunction();    // 1. 调用getFunction() 函数                3. func == add()
console.log(func);           // 4. 输出func 也就是 add() 函数
var z = func(1,2);           // 5. 调用 func 也就是调用add() 函数         9. z = 3
console.log(z);              // 10. 打印 z 的值 3

3.JS可以有匿名函数，上面的可以写成callFunction(function(a,b{return a+b;} ,100,200))，JS允许在函数中定义函数，或者在实参列表中定义函数

例1：

var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function

例2：

function call(f,x,y) {
    console.log(f);         
    console.log(x);
    console.log(y);
    return f(x,y);
}

var r = call(function (a,b){
    console.log(a);
    console.log(b);
    return a+b;
}  , 100,200);

console.log(r);

七、JavaScript的对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象

每个对象中包含若干的属性和方法

属性: 事物的特征

方法: 事物的行为

1. 使用字面量创建对象

使用 { } 创建对象
属性和方法使用键值对的形式来组织
键值对之间使用 , 分割. 最后一个属性后面的 , 可有可无
键和值之间使用 : 分割，key是无序的，不是按照定义时的顺序
方法的值是一个匿名函数

var a = {}; // 创建了一个空的对象
var student = {
name: '小花',
age: 18,
sayHello: function() {
console.log("hello");
}
};

2. 使用 new Object 创建对象

使用 { } 创建的对象也可以随时使用 student.name = "李四"; 这样的方式来新增属性

var student = new Object(); // 和创建数组类似
student.name = "张三";
student.age = 17;
student['gender'] = '男';
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['gender']);
student.sayHello();

3. 使用构造函数创建对象

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

在构造函数内部使用 this 关键字来表示当前正在构建的对象
构造函数的函数名首字母一般是大写的
构造函数的函数名可以是名词
构造函数不需要 return
创建对象的时候必须使用 new 关键字

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

function 自我介绍() {
    console.log(`A: 我是 ${this.name}`);
}

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.自我介绍 = function() {
        console.log(`B: 我是 ${this.name}`);
    };
    this.自我介绍2 = 自我介绍;
}

4.注意

function Person() {
    this.name = '你好';
    return{
        '消息':'世界'
    };
}

var a = Person();      // { 消息: '你好世界' }
var b = new Person();  // { 消息: '你好世界' }，当没有返回值，走 this，有返回值走返回值
var c = Person;        // Person函数

5.JavaScript 的对象和 Java 的对象的区别

1.JS里面没有封装，继承，多态这些面向对象的这些特性.
2. JavaScript 没有 "类" 的概念对象其实就是 "属性" + "方法" ，类相当于把一些具有共性的对象的属性和方法单独提取了出来,在 JavaScript 中的 "构造函数" 也能起到类似的效果. 而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象.
3. JavaScript 对象不区分 "属性" 和 "方法",方法和普通的变量一样. 存储了函数的变量能够通过 ( ) 来进行调用执行.
4. JavaScript 对象没有 private / public 等访问控制机制. 对象中的属性都可以被外界随意访问.

学习java的张三

关注

4
点赞
踩
32

收藏

觉得还不错? 一键收藏
打赏
1
评论
2.web JavaScript基础语法

一、JavaScriptJavaScript主要用于客户端脚本程序，通常嵌入再HTML代码中，由浏览器解释和运行1.JavaScript的功能控制文档的外观和内容：用户可以通过Document对象的write方法将内容写入文档中，也可以调用Document对象的getElementById方法找到文档中某个对象，然后动态的改变其内容和外观验证表单输入内容：再客户端取得的表单中输入数据并进行验证，只有当数据合法时候才提交给服务器，减轻服务器的处理负荷实现客户端的计算和处理：从表单中..
复制链接

扫一扫