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

• 声明字符串 单引号 /双引号
• 注意字符
  • 回车符
    • "
    • '
    • 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{
    	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