JavaScript 基础知识

JavaScript 基本语法

JS如何在HTML中使用

• <script type="text/javascript"></script>
• <script src=""></script>

注释

• 单行注释 //
• 多行注释 /* */

指令结束符

• ；
• 换行

变量和直接量

直接量

变量

• var 变量名 = 值;
• var 变量名;
• var 变量名 = 值, 变量2=值, 变量3=值;

JavaScript的 数据类型

数据类型

• 原始类型(基础类型)
  • Number
  • String
  • Boolean
  • Null
  • Undefined
• 对象类型

Number

• 整型和浮点型
• Number直接量
  • 直接写数字(整数、小数)
  • 八进制直接量 010
  • 十六进制直接量 0x10
  • 科学计数法
  • NaN （not a number）
  • inFinite /-inFInite
• NaN
  • 与任何值运算 结果仍然是NaN
  • 与任何职都不行等
• 数值的表示范围
• 浮点数的精度问题

String

• 声明字符串 单引号 /双引号
• 注意字符
  • \n
  • \r 回车符
    • "
    • '
    • t 制表符 tab
    • \v 垂直制表符
    • \f 换页符
    • \

Boolean

• true
• false

Null 和 Undefined

数据类型转换

自动转换（在某种运算环境下）

• Number环境
• String环境
• Boolean环境

强制类型转换

• Number()
  • 字符串： 纯数字字符和空字符转为正常数字，其他NaN
  • 布尔值： ture:1 false:0

• String()

• Boolean()
  • 转换为false: 数字0, 空字符串， null 和 undefined
  • 转换为true: 值表示有东西
• parseInt()
  • 转换为整数
  • 与Number的区别： 以数字开头的字符串， 不会转换为NaN
• parseFloat()
  • 转换为小数或整数
  • 与Number的区别：以一数字开头的字符串， 不会转换为NaN

JS操作 HTML

事件

• onclick

函数

• 声明函数

    function 函数名(){
        代码;
    }

• 调用函数

    函数名()

获取元素

• document.getElementById("")
• js代码写在 html元素的后面

JS 操作html元素的属性以及css数据

• 元素对象.属性名

            //定义函数
    function changeBig(){
        var img=document.getElementById("myImg");
        //改变img 元素的宽度
        var width=img.width;
        img.width=img.width+50;
    }

• 元素对象.style.属性名

            <style>
        #box{
        width:300px;
        height:100px;
        border:1px solid #ccc;
    }
        </style> 
        <script>
        var div=document.getElementById("box");
        console.log(div.style.width);//获取不到,只能获取标签内的style属性值
        console.log(div.style.padding);
        div.style.width=400+"px";//虽然不能获取，但是可以改变宽度值
        div.style.margin=40+"px";
        </script>

• css属性名用小驼峰命名法。 只有写在元素style中的css属性，才可以被获取

        <script>
        function changeRed(){
        //获取元素
        var box=document.getElementById("box");
        //修改字体颜色的属性
        box.style.color="red";
        //背景颜色 变绿
        box.style.backgroundColor="green";
        }
    </script>

• innerHTML属性 获取或设置双标签内的内容

        var res=num1Value+num2Value;
        //把结果输出到 resBox 中
        var resBox=document.getElementById("resBox");
        resBox.innerHTML=res;

表达式

• 简单表达式； 变量、直接量
• 复杂表达式； 运算符与简单表达式的组合
• 函数调用表达式

运算符

算术运算符

• 加号运算符 +
• 减号运算符 -
• 乘号运算符 *
• 除号运算符 /
• 取余运算符(取模) %
• 负数运算符 -
• 正数运算符 +
• 递增运算符 ++
• 递减运算符 --

比较运算符

• 相等运算符 ==
• 不等运算符 !=
• 全等运算符 ===
• 不全等运运算符 !==
• 小于运算符 <
• 小于等于运算符 <=
• 大于运算符 >
• 大于等于运算符 >=
• in运算符

逻辑运算符

• 逻辑与 （并且） &&
• 逻辑或 (或者) ||
• 逻辑非 !

位运算符

• 按位与 &
• 按位或 |
• 按位非 ~
• 按位异或 ^
• 左移 <<
• 右移 >>

赋值运算符

• =
• +=
• -=
• *=
• /=
• %=

其他运算符

• 字符串连接符 +
• ,运算符
• typeof 运算符
• 比较运算符 表达式 ? 表达式1 ： 表达式2

转载于:https://www.cnblogs.com/pangwl/p/7360519.html