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变量
- js中用var关键字(cariable)来声明变量
- js是一门弱类型语言,变量可以存放不同类型的值
- 变量名需要遵循以下规则:
- 组成字符可以是任何字母,数字,下划线或美元符号
- 数字不能开头
- 建议使用驼峰命名法
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函数
- 介绍:函数是被设计为执行特定任务的代码块
- 定义:js函数通过function关键字及逆行定义,语法为:
function key(参数1,参数2){
//要执行的代码
}
- 注意:
- 形式参数不需要类型,应为Javascript是弱类型语言
- 返回值也不需要定义类型,可以在函数内部直接使用return返回即可
- 调用:函数名称(实际参数列表)
function add(a,b){
return a+b;
}
js对象
- 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() | 遍历数组中的每个有值的元素,并调用一次传入的函数 |
- 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("用膳~");
}
};
调用格式:
- 对象名.属性名:console.log(user.name);
- 对象名.函数名: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字符串
- json字符串转为js对象:
var jsObject=JSON.parse(userstr);
- 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文档的标准,分为三个不同的部分:
-
core DOM-所有文档类型的标准模型
-
XML DOM-xml文档的标准类型
-
HTML DOM-html文档的标准模型
- image:
- Button:</input type=‘button’>
doucument对象获取element元素
- html中的element对象可以通过doument对象获取,而document对象是通过window对象获取的
- document对象中提供了以下获取element元素对象的函数
- 根据id属性值获取,返回单个Element对象
var h1=document.getElementById('h1');
- 根据标签名称获取,返回Element对象数组
var divs=document.getElementsByTagName('div')
- 根据那么属性值获取,返回Element数组
var hobbys=document.getElementsByName('hobby')
- 根据class属性值获取,返回Element对象数组
var clss=document.getElementsByclassName('cls')
js事件监听
事件绑定
- 通过html标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1">
<script>
function on(){
alert('我被点击了!');//创建函数on对事件做出相应
}
</script>
- 通过DOM元素属性绑定
<input type="button" id="btn" value="按钮2">
<script>
document.getElementById('btn').onlick=function(){
alert('我被点击了');//通过document找到元素进行匹配
}
</script>
注:onclick是单击绑定事件