初识javascript

js

js是一门跨平台，面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

js引入方式

内部脚本：将js代码定义在html界面中

• js代码必须位于之间
• 在html文档中，可以在任意地方，放置任意数量的

<script>
    alert("helo world")
</script>

外部脚本：将js代码定义在外部js文件中，然后引入到html页面中

• 外部js文件中，只包含js代码，不包含标签不能自闭合

alert("hello world")

js的三种输出

<script>
    window.alert("hello js")//浏览器弹出警告框
	document.write("hello javascript")//写入html，在浏览器中显示
	console.log("hello js")//写入浏览器控制台
</script>

js变量

1. js中用var关键字(cariable)来声明变量
2. js是一门弱类型语言，变量可以存放不同类型的值
3. 变量名需要遵循以下规则：

• 组成字符可以是任何字母，数字，下划线或美元符号
• 数字不能开头
• 建议使用驼峰命名法

var a=20;
a="张三"

还有两个变量的声明方法，一个是let，let所声明的变量旨在let所在的代码块内有效，而且不允许重复声明，const关键字只能声明一个只读的常量，一旦声明，常量的值就不能改变。

使用typeof关键字可以获取数据类型，例如var a=20;alert(typeof(a))此时会输出(number类型)，js中有五种数据类型，分别是number,string,boolean,null,undefined

js运算符

与java语法一样，不过这里我们着重说明一下和=的区别，==判断时会进行类型转换，===不会进行类型转换

js函数

1. 介绍：函数是被设计为执行特定任务的代码块
2. 定义：js函数通过function关键字及逆行定义，语法为：

function key(参数1，参数2){
    //要执行的代码
}

3. 注意：

1. 形式参数不需要类型，应为Javascript是弱类型语言
2. 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

4. 调用：函数名称(实际参数列表)

function add(a,b){
    return a+b;
}

js对象

1. array：js中array对象用于定义数组

定义var arr=new Array(1,2,3,4);或者var arr=[1,2,3,4]

访问：arr[10]="hello";

js中的数据可以是任何类型

方法	描述
length	返回数组中元素的数量
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素
foreach()	遍历数组中的每个有值的元素，并调用一次传入的函数

2. string字符串

创建string字符串：var str=new string("hello string")或者var str="hello stirng"(单引号还是双引号都可)

属性	描述
length	字符串的长度
charAt()	返回指定位置的字符
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符

js自定义对象

格式：

var user={
    name :"Tom";
    age:20;
    gender:"male";
    eat(){
        alert("用膳~")；
    }
}；

调用格式：

1. 对象名.属性名：console.log(user.name);
2. 对象名.函数名：user.eat();

json介绍

• javaScript Object Notation ,javascript对象标记法
• json是通过javascript对象标记法书写的文本
• 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

{
    "name":"Tom",
    "age":20,
    "gender":"male"
}

value的数据类型为：

• 数字（整数或浮点数）

• 字符串（在双引号中）

• 逻辑值（true或false）

• 数组（在方括号中）

• 对象（在花括号中）

• null

示例

var userstr='{"name":"jerry","age":28,"addr":["北京","上海","西安"]}'

json字符串转js对象/js对象转json字符串

1. json字符串转为js对象：var jsObject=JSON.parse(userstr);
2. js对象转JSON字符串：var jsonstr=JSON.stringify(jsobject);

bom

概念：browser object model浏览器对象模型，允许javascript与浏览器对话，javascript键浏览器的各个部分封装为对象。

组成：

• window:浏览器窗口对象
• navigator：浏览器对象
• screen：屏幕对象
• history：历史记录对象
• location：地址栏对象

window

介绍：浏览器窗口对象

属性：

• history：对history对象的只读引用
• location：用于窗口或框架的location对象
• navigator：对navigator对象的只读引用

方法：

• alert:显示带有一段消息和一个确认按钮的警告框
• confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
• setInterval()：按照指定的周期(以毫秒计算)来调用函数或计算表达式
• settimeout（）：在指定的毫秒数后调用函数或计算表达式。

location

介绍：地址栏对象

属性：

• herf:设置或者返回完整的URL
• location.href=“https://www.itcast.cn”

dom

概念：Document Object Model，文档对象模型。

将标记语言的各个组成部分封装为对应的对象：

• document:整个文档对象
• element：元素对象
• attribute：属性对象
• text：文本对象
• comment：注释对象

javascript通过DOM，就能对HTML进行操作：

• 改变html元素的内容
• 改变html元素的样式（css)
• 对html DOM时间做出反应
• 添加和删除html元素1

DOM是w3c（万维网联盟）的标准，定义了访问html和xml文档的标准，分为三个不同的部分：

1. core DOM-所有文档类型的标准模型

2. XML DOM-xml文档的标准类型

3. HTML DOM-html文档的标准模型

   • image:
   • Button:</input type=‘button’>

doucument对象获取element元素

• html中的element对象可以通过doument对象获取，而document对象是通过window对象获取的
• document对象中提供了以下获取element元素对象的函数

1. 根据id属性值获取，返回单个Element对象var h1=document.getElementById('h1');
2. 根据标签名称获取，返回Element对象数组var divs=document.getElementsByTagName('div')
3. 根据那么属性值获取，返回Element数组var hobbys=document.getElementsByName('hobby')
4. 根据class属性值获取，返回Element对象数组var clss=document.getElementsByclassName('cls')

js事件监听

事件绑定

1. 通过html标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
	function on(){
        alert('我被点击了！');//创建函数on对事件做出相应
    }
</script>

2. 通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
	document.getElementById('btn').onlick=function(){
        alert('我被点击了');//通过document找到元素进行匹配
    }
</script>

注：onclick是单击绑定事件

js常见事件