JS引入方式，事件/调试，组成，数据类型

zhu646455882
444 阅读4分钟

###js引入方式 内嵌： 在元素身上添加JS代码

<div class="box" onclick="alert('珠峰')"></div>

内链 Script标签一般放到body结束标签的上方 通过ID的方式去获取 CSS: #box JS: document.getElementById(' ') 外链 需要 .js 后缀的文件 通过标签的Src 属性来添加JS文件地址 《script src=""》《script》

注意：使用外链的script中不能写代码，是没用的

###事件： onclick：点击

###调试： alert：调用浏览器内置的弹框；每个浏览器的弹框可能不同； alert会阻塞下面的代码 console.log() 浏览器的控制台打印 JS 结果 console.dir() 浏览器控制台打印JS 结果细节 每段代码之间用 ； 分隔

###注释 单行注释： //注释内容 多行注释： /* 注释 内容 */

###通过ID的方式去获取元素/标签

document.getElementById（‘ID的名称‘）

###函数 = 一个等号代表赋值

###JS的组成： ECMAscript 标准语法，能够允许进行数据的操控、处理

ActionScript AS，用来制作flash，逐渐被Javascript取代

Javascript JS，

DOM 文档对象模型/页面

BOM 浏览器对象模型

###JS的数据类型 /* JS的数据类型： 基本类型：数字、字符串、布尔值、空、未定义 引用类型：对象

        Number\String\Boolean\Null\undefined\object
    */
   //数字
    console.log(3);//蓝色的阿拉伯数字
   
    //字符串（页面中的所有文本内容都是字符串，在赋值样式的时候都是字符串）
    console.log('珠峰'); //被单双引号包裹的内容都是字符串
                        //在控制台中是灰黑色
                        //在写文字内容时必须使用字符串

    //布尔值    只有两个值，true/false
   console.log(true);

    //空   空对象，空地址(空指针)：在前期只要出现null，就需要考虑元素是否存在
    //               两种可能：元素存在但是写错了：
    //                        元素真的不存在
   console.log();

    //未定义    undefined   有这个东西，但是没有赋值；有可能将来会用
   console.log();

    对象 
    有很多种表现形式     
   1.（名字叫对象的对象类型）由键值对的形式表示，一对属性值和另一对属性值
   {
       key:value,
       style:display
   }
   */
  console.log({});
  console.log(new Date())
	
	2.数组对象 （名字叫数组的对象类型）
		[1，2，3，4]

	3. 时间对象 （名字叫时间的对象类型）
				new date

###typeof 专门来运算某个数据时什么类型的，会返回某个数据类型的小写（字符串的）类型值。

  console.log(typeof _________)

typeof 能够检测出string，number，Boolean，undefined 和 object。

注意，检测 null 的时候会为object。

#####typeof 也可以检测函数

在设置复合样式的时候，去掉-线，首字母大写 ex: font-size:50px; fontSize='50px'

###变量 变量： 把JS中的数据存储到一个自定义的名字中，以便于复用

    声明变量使用
    var自定义的名字=数据
    let 自定义的名字=数据

###常量 常量（不可变的量）： 只能复用，不能修改

声明常量 定义之后便不能随意改变 const 自定义的名字=数据

###NaN NaN -> not a number 不是一个合法的数字 进行了一个非法的数学运算 NaN依然算作number类型

console.log(1*'px')

###JS的属性操作 /* 原始数据类型（基本、简单） 引用数据类型（复杂、复合） / / 标准key值要加上双引号，不过js本身比较随意，可以不加，但是在真实的开发中后台传输的数据时标准的格式 . 下的

     输出对象下的key值，就等于这个key对应的value值

     我们叫name、age、ary为属性名
     boi、18、[1,2,3,4] 为属性值
   */

let obj = { name:"boi", "age":"18", "ary":[1,2,3,4], "style":{ "display":"none" } }

    //console.log(doucment.getElementById('box'))
    console.log(obj.style.display);//读操作 打印输出
    obj.style.display = 'block';//写操作 赋值

###变量命名规则 //不管是变量还是常量，在取名字的时候，不能有关键字或者保留字，也不能以数字开头 // 关键字： // 系统已经使用的名字 // let const var // 保留字： // 系统现在没有使用的名字，但是未来可能会使用 // class

    //一般取变量或者常量名字是按照小驼峰命名法
    //    开头字母小写，之后一个单词与一个单词之间的首字母大写

###InnerHTML和 innerText 在属性操作的过程中，正常来说，CSS如何写，JS就如何写 link.href style.width style.height

    innerText  在元素中添加文本
    innerHTML   在元素中添加内容（包括文本和结构）
    
    在JS中，属性打印输出为读操作，赋值为写操作

const box = document.getElementById('box') document.onclick = function(){ box.innerText = 'New Text' }

avatar
文章
阅读
粉丝