JavaScript基础

JavaScript简介

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

JavaScript组成及作用

  • JavaScript 实现是由以下 3 个不同部分组成的:
  1. 核心(ECMAScript)
  2. 文档对象模型(DOM)
  3. 浏览器对象模型(BOM)
  • JavaScript的作用:
  1. JavaScript 能够对页面中的所有 HTML 元素进行增删改
  2. JavaScript 能够对页面中的所有 HTML 元素的属性进行设定和修改
  3. JavaScript 能够对页面中的所有 CSS 样式进行设定和修改
  4. JavaScript 能够对页面中的所有事件作出反应

如何在HTML页面中使用JavaScript

  1. 在网页中加入< Script > < / Script > 标记JavaScript的开始和结束,将JavaScript代码放到
    < Script >< / Script >之间
  2. 引入外部的JavaScript文件,文件扩展名为 .js,这种方式为开发首选

Javascript基础语法

变量

JS作为一种弱类型语言,定义变量只有一种格式:

var 变量名=值;
  • ES6 新增定义常量的规范:
const 常量名=值;
数据类型

JavaScript只具有几个原始的数据类型:

  1. Number 数字类型(整数,小数)
  2. String 字符串类型 (字符, 字符串)
  3. Object 引用类型 (对象)
  4. undefined 未定义类型
  5. NaN 保留字(表明数据类型不是数字)
  • 使用运算符typeof可以得到变量的原始数据类型:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var num = 100;
        var num2 = 3.14;
        var str = "abc";
        var obj = new Object();
        var flag = true;
        document.write(typeof num+"
"
); document.write(typeof num2+"
"
); document.write(typeof str+"
"
); document.write(typeof obj+"
"
); document.write(typeof flag+"
"
); </script> </head> <body> </body> </html>

JavaScript基础_第1张图片

运算符
  • 数学运算符
  1. 数学运算符::+ , - , * , / , % , ++ , --
    +:相加
    -:相减
    *:相乘
    /:相除
    %:百分之
    ++:自增
    --:自减

  2. 比较运算符:== , === , >= , <= , < , > , != , instanceof
    ==:比较是否相等(会发生自动类型转换)
    ===:先比较数据类型,数据类型一致再比较值
    >:比较是否大于
    <:比较是否小于
    >=:比较是否大于且等于
    <=:比较是否大于且等于
    !=:比较是否不等于
    instanceof:比较是否为同一数据类型

自动类型转换

当这个运算符运算的值,和他期望的值不一样,就会发生自动类型转换。

  1. 字符串类型转数字类型:
var a="a2";
var b="2";
var c=3
document.write(a*c);
document.write("
"
); document.write(b*c);

JavaScript基础_第2张图片
字符串参与运算时,字面值允许的情况下会自动转为数字型,字面值无法转换时会转为NaN(不是数字的数字)。

  1. 布尔类型转数字类型:
ar flag1=true;
var flag2=false;
document.write(flag1+1-1);
document.write("
"
); document.write(flag2+1-1);

JavaScript基础_第3张图片
布尔类型参与运算时转为数字类型,true 转为 1 ,false转为 0。

  1. 字符串转布尔类型:
var str="";
        if (str) {
            document.write("字符串转为了true")
        }else {
            document.write("字符串转为了false")

JavaScript基础_第4张图片

var str="aaa";
        if (str) {
            document.write("字符串转为了true")
        }else {
            document.write("字符串转为了false")

JavaScript基础_第5张图片

字符串转为布尔类型: 空串转为 false 非空串转为 true。

  1. 数字类型转布尔类型:
for (var i = -2; i <= 2; i++) {
            if (i) {
                document.write("i=" + i + "时转为true
"
) } else { document.write("i=" + i + "时转为false
"
) } }

JavaScript基础_第6张图片
数字类型转为布尔类型: 0转为 false 非 0转为 true。

  1. Object类型转为布尔类型:

对象非null转为 true,对象为 null转为 false。

  1. undefined转为布尔类型:
var v;
        if (v) alert("undefined转成了true")
        else alert("undefined转成了false")

JavaScript基础_第7张图片
undefined转布尔类型,转为 false。

  1. NaN转为布尔类型:
var v = NaN;
        if (v) alert("NaN转成了true")
        else alert("NaN转成了false")

JavaScript基础_第8张图片
NaN转布尔类型,转为 false。

函数

函数:对一段功能逻辑的封装,以实现重复调用。

定义函数的语法:

  1. function 函数名(参数){逻辑体}
  2. var 函数名=function(参数){逻辑体}

调用函数的语法:

函数名(参数); 
  • 函数的参数和返回值:
  1. 函数的形式参数,不需要写数据类型。

  2. JS中调用函数时,可以不传参,可以少传,也可以多传。

  3. 函数内部有arguments属性是一个数组,可以把所有传递过来的参数,放到这个数组中。

<script>
    function show(){
        for(var i=0;i<arguments.length;i++){
            document.write(arguments[i]+"
"
); } } show(10,20,30,40,50,60); </script>

JavaScript基础_第9张图片

  1. 函数的length属性可以获取形参个数。

你可能感兴趣的:(前端)