JavaScript(1)语法基础

时间:2021-06-17 17:13:27   收藏:0   阅读:0
JavaScript
  • JavaScript:基于对象和事件触发的弱类型脚本语言。脚本通常以文本保存,只在被调用时进行解释或编译。可以动态增删改HTML标签和CSS样式,动态校验数据。
  • JavaScript特点:
  1. 交互性:存在于所有Web浏览器中,能够增强用户与Web站点和 Web 应用程序之间的交互。
  2. 安全性:不能直接访问磁盘
  3. 跨平台:浏览器能解析JavaScript就可以,不需要针对于操作系统。
  • JavaScript组成:
  1. ECMAScript(核心):
  2. DOM(文档对象模型)
  3. BOM(浏览器对象模型)
  • JavaScript引用方式:<script>标签在任意位置使用都可以,但是影响加载顺序。前两种引用方式不可以混用。type="text/javascript"属性不是必需的。JavaScript是HTML中的默认脚本语言。
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一种【内部脚本】:使用<script>声明js代码域。【注意:外部脚本中不能再写内部脚本】 -->
    <script type="text/javascript">
        alert(第一种);
    </script>
    <!-- 第二种【外部脚本】:使用<script>引入外部声明的js文件。src属性:JavaScript文件的相对路径 -->
    <script src="my.js" type="text/javascript"></script>
</head>

<body>
    <!-- 第三种【内嵌脚本】:内嵌在标签内部,通过事件触发属性调用。例如:onclick等 -->
    <input type="button" onclick="alert(‘第三种‘)" value="第三种">
</body>
JavaScript语言
// 单行注释

/* 多行注释 多行注释 多行注释 */
// 声明变量。
var a = 123;
  1. number:数字类型。包含了JavaScript中所有的数字类型(包括浮点数和小数)。数字类型不精准,不能用于金钱计算。
  2. string:字符串类型。可以使用单引号也可以使用双引号。
  3. boolean:布尔类型。只有true和false两种。
  4. null:空类型。输出null为object类型
  5. undefined:未定义的类型。变量声明后不赋值时默认是未定义类型。Undefined和null判定是相等的
  6. object:对象。ECMAScript中的所有对象都由Object继承而来,Object对象中的所有属性和方法都会出现在其他对象中。var obj = new Object();
var a;
// 结果为:undefined
console.log("var:" + typeof (a))
a = 123;
// 结果为:number
console.log("123:" + typeof (a))
a = "cls";
// 结果为:string
console.log("cls:" + typeof (a))
a = true;
// 结果为:boolean
console.log("true:" + typeof (a))
a = null;
// 结果为:object
console.log("null:" + typeof (a))
  • 数据类型比较:实际开发中经常判断某些值是否为null或者为undifend。下面代码进行举例如何判断。
/*
 * 结论:typeof输出的均为小写字符串,需要使用字符串比较。=== 需要使用数据类型比较
 */
var a;
// 输出为:undefined
console.log(a);
// 输出为:undefined(但实际上是‘undefined‘)
console.log(typeof a);
// 输出为:true(直接使用类型判断)
console.log(a === undefined);
// 输出为:false(使用typeof之后输出的均为字符串类型)
console.log(typeof a === undefined);
// 输出为:true
console.log(typeof a === ‘undefined‘);

var b = null;
// 输出为:null
console.log(b);
// 输出为:object
console.log(typeof b);
// 输出为true
console.log(b === null);
// 输出为:false
console.log(typeof b === null);
// 输出为:false
console.log(typeof b === Object);
// 输出为:false
console.log(typeof b === ‘null‘);
// 输出为:true
console.log(typeof b === ‘object‘);

var c = 1;
var d = ‘曹老三‘;
var e = false;
console.log(c === 1);
console.log(d === ‘曹老三‘);
console.log(e === false);
var x = "12.05";
// 转换成String
console.log(x.toString() + ":" + typeof x.toString());
// 转换成Boolean
console.log(Boolean(x) + ":" + typeof Boolean(x));
// 转换成Number
console.log(parseFloat(x) + ":" + typeof parseFloat(x));
console.log(parseInt(x) + ":" + typeof parseInt(x));
  1. 算术运算符:+,-,*,/,%。在算术运算中,数据类型会自动使用Number()强转成数字类型,然后进行运算
  2. 关系运算符:>,>=,<,<=,!= ,++(自增),--,=,==(等值符,只比较值),===(等同符,比较值和类型)
  3. 三元运算符:条件?表达式1:表达式2(如果条件为true,返回表达式1的结果,如果条件为false,返回表达式2的结果
  4. 逻辑运算符:&&,||,!
  5. void运算符:javascript:void(0)。一般用于<a>标签的href属性,防止查看地址,阻止跳转。
  6. 类型运算符:typeof判断数据类型、instanceof(判断类型是否是你定义的,返回boolean类型【注意:不能使用instanceof判断null和undefined】)
var a = 10;
var b = 20;
var c = "10";
// 加法
console.log(a + b);
// 等值符和等同符
console.log((a == c) + ":" + (a === c));
// 关系运算符:大于
console.log(a > b);
  1. 判断选择结构:if(){},else if(){},else{},switch(){}
  2. 循环结构:for(){},while(){},do{}while(),for(in){}增强for循环
var a = 15;
var b = ["呵呵", "哈哈", "垃圾"];

// 判断:if else
if (a == 10) {
    console.log("a为10");
} else if (a == 20) {
    console.log("a为20");
} else {
    console.log("a未匹配");
}
// 判断:switch
switch (a) {
    case 10:
        console.log("a为10");
        break;
    case 20:
        console.log("a为20");
        break;
    default:
        console.log("a未匹配");
        break;
}
// 循环:for
for (var i = 0; i < b.length; i++) {
    console.log(i);
    console.log(b[i]);
}
// 循环:增强for(i代表的角标,这个和java中不一样)【经常用于遍历对象】
for (var i in b) {
    console.log(b[i]);
}
// 循环:while
while (a < 20) {
    console.log(++a);
}
// 循环:do while
do {
    console.log(a++);
} while (a < 25);
对象、函数
// 创建对象
var student = {
    "name": "曹老三",
    "age": 18,
    "grade": 50,
    "isBy": false,
    "study": function () {
        console.log("我在学习")
    }
}
// 修改对象(属性)
student.name = "王大妞";
// 读取对象(属性)
console.log(student.name);
console.log(student["name"]);
// 删除对象(属性)
delete student.name;
console.log(student.name);
// 调用对象的函数属性
student.study();

 

// 创建对象
var student = {
    "name": "曹老三",
    "age": 18,
    "grade": 50,
    "isBy": false,
    "study": function () {
        console.log("我在学习")
    }
}
// 遍历对象
for (item in student) {
    console.log(student[item]);
}

 

 

 

  1. JavaScript中的函数不需要定义返回值。如果需要返回值,直接return,默认返回undefined。
  2. 形参不需要声明类型,函数的形参在调用的时候可以不赋值,默认为undefined。如果不完全赋值,则为依次赋值。
  3. 没有函数重载,只有函数覆盖。
  4. 实参可以是任意类型对象:实体类、函数、匿名函数
// 第一种声明方式:普通函数声明【常用】(函数声明提前)
function test1(a, b) {
    alert("我是第一种声明方式" + (a + b));
}
// 第二种声明方式:构造函数方式
var test2 = new Function("a", "b", "alert(a+b);");
// 第三种声明方式:匿名函数并赋给一个变量【常用】
var test3 = function (a, b) {
    alert("我是第三种声明方式" + a + b);
};
// 定义需要返回值的函数
function sum(a, b) {
    return a + b;
}
// 调用函数 test1(5, 6); // 调用函数(有返回值) var c = sum(5, 6);
// 全局变量
var d = 789;
// 方法
function test1(a, b) {
    // 局部变量
    var c = 654;
    // 输出局部变量
    console.log(c);
    // 输出全局变量
    console.log(d);
    return c;
}
// 输出局部变量【报错】
// console.log(c);
// 输出全局变量
console.log(d);
test1();
// 实参传入(1)函数
function test1(a) {
    console.log("test1 -------------- ");
    // 方式一对应:调用函数test2
    console.log(a(5, 6));
    // 方式二对应:输出函数test2返回值
    console.log(a);
}
function test2(a, b) {
    console.log("test2 -------------- ");
    return a + b;
}
// 方式一:将函数对象传入
test1(test2);
// 方式二:调用函数,将返回值传入
test1(test2(5, 6));
// 实参传入(2)对象
var person = {
    "name": "曹老三",
    "age": 15
};
function test1(a) {
    console.log(a.name);
    console.log(a.age);
}
// 调用函数传入对象
test1(person);
/**
 * 立即执行函数:
 * 外边括号防止编译报错,表示为一个整体
 * 后边括号为立即调用函数。
 **/
(function () {
    console.log("123")
})();
// 提前打印a:undefined。声明未赋值就是undefined
console.log(a);
// 提前打印b:报错!因为b还没有声明
console.log(b);
// 使用var声明a
var a = "123";
// 不使用var声明b
b = "456";

 

// 正常使用函数
test1();
// 报错:函数不存在
test3();
// 声明提前,页面加载时候就被创建,也就是说无论什么时候使用都行。
function test1() {
    console.log("我是第一种声明方式");
};
// 声明不提前:只有执行这段代码之后test3方法才能调用。
var test3 = function (a, b) {
    console.log("我是第三种声明方式");
};

 

 

 

// 全局变量
var a = 10;
var b = 33;
// 函数
function test1() {
    // 局部变量
    var a = 20;
    // 优先使用局部变量
    console.log("函数中:" + a);
    // 局部变量没有b使用全局变量b
    console.log("函数中:" + b);
};
// 外部访问的就是全局变量
console.log("全局:" + a);
test1();

 

 

 

 this
  1. 方法方式调用:this 表示该方法所属的对象。
  2. 函数方式调用:this 表示全局对象。在严格模式下,this 是未定义的(undefined)。
  3. 事件方式调用:this表示接收事件的元素。
  4. 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!