javaScript 入门基础

js 介绍

  JavaScript不是一门编程语言，它是一个轻量级的脚本语言， 不同于编程语言的是它不需要编译器，只需要浏览器就能实现js代码。

用途： js代码主要给html页面加入动态交互体验，使其页面不在单一和乏味

1. JavaScript的组成

1.1 ECMAScript

ECMAScript是javascript的核心，定义了javascript的语法规范。

1.2 DOM(Document Object Model) - 文档对象模型

一套操作页面元素的API(API应用程序接口）,DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

1.3 BOM(Browser Object Model) - 浏览器对象模型

一套操作浏览器功能的API（接口-类库-方法）,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

2.引入方式

    2.1 行内样式

给a标签加入js属性
<a href="javascript:alert('Hello JavaScript')">点我</a>
给div设置点击事件
<div onclick="alert('别点了')"> 盒子</div>

    2.2 内嵌样式

<script >
	alert('Hello JavaScript')
</script>

    2.3 外链样式

<script src="test.js" type="text/javascript"></script>

3.变量

3.1 js变量命名规范

   由大小写字母、数字、下划线和美元符号（$）组成。且保留关键字不能用。注意（保留关键字首字母大写或者加数字、下划线和美元符号（$）就可以避免不能使用的规则）

3.2 变量创建方法

   （1）字面量

<script>
var num =10;

也可以同时创建多个变量(不推荐使用)
var num,str,arr;
    num=10;
    str=20;
    arr=30;
</script>

3.3 变量的声明提升

     在创建变量之前去访问这个变量（必须要有这个变量），由于变量的声明会被提升到当前作用域的最顶端，而赋值并不会被提升，因此上面的代码输出 undefined ，我们称这个为变量的声明提升。

<script>
        console.log(arr);
        var arr;
</script>


<script>
        console.log(arr);
        var arr=10;
</script>

4 JS数据类型

4.1 基本数据 或（简单数据）类型

  number    数字类型

  string       字符串类型

  boolean    布尔类型

  undefined 未定义（没有赋值）

  null            空（没有该变量）

<script>
        //  基本数据类型
                 
        var name = '胡歌'              string
        var age = 18;                  number
        var suer = true;               boolean
        var arr = undefined;           undefined
        var hu = null;                 null 


         console.log（）打印日志
        console.log(name, age, suer, arr, hu);
</script>

4.2 引用数据 或（复杂数据）类型

object  对象  （花括号里面可以包含所有的数据类型）

 <script>
        var obj = {
            name: '中绪',
            age: 18,
            sex: '女',
        }
        console.log(obj);
 </script>

5. typeof 检测数据类型

// 基本类型或原始类型

var myName = '张三';

var age = 18;

var gender = false;

var weight = undefined;

var phone = null;

// 检查原始数据的类型

console.log(typeof myName); // 'string'

console.log(typeof age); // 'number'

console.log(typeof gender); // 'boolean'

console.log(typeof weight); // 'undefined'

console.log(typeof phone); // 'object'

// 引用类型

var car = {

color: '蓝色',

brand: '哈喽单车'

};

// 检查引用数据的类型

console.log(typeof car); // 'object'

6.window 属性和方法

.  6.1window方法

<script>


// 警告框

window.alert('哈哈');

// 确认框

window.confirm('确认退出该应用吗？');

// 输入框

window.prompt('请输入密码？');


</script>

.6.2 window 属性

<script>

// 日志信息
//（重点）
window.console.log('日志信息');

// 显示一个对象的所有属性和方法

window.console.dir(window);

//document对象输出的方法，使用该方在文档中输出 HTML

window.document.write("输出到文档");

</script>