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
posted @ 2017-08-14 22:12  在水伊人  阅读(191)  评论(0)  编辑  收藏  举报