JavaScript小白快速入门、东西少重点多

最新推荐文章于 2024-08-11 18:40:36 发布

土豆和西红柿

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量153

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_39939537/article/details/103677682

版权

引言

1、什么是JavaScript？

简称为js 是一门独立的编程语言，能够完成页面动态效果（动的是页面结构）

注意：
i、js使用在html中
ii、JavaScript和java无关，js全称为W3C
iii、js是一门解释性的语言
编译性 C C++ 不能跨平台运行效果高
解释性 js 可以跨平台运行效率低
先编译，再解释的语言 java（可以跨平台效率高）
iv、js的解释器是浏览器
IE内核：IE浏览器
WebKit内核：Google
2、第一个JavaScript程序

<head>
    <meta charset="UTF-8">
    <title>MyFirstJavaScript</title>
    <script type="text/javascript">
        //js代码
        document.write("Hello JavaScript")  //把数据写入到页面中
        console.log("Hello World")
        console.info("hello world")
    </script>
</head>

为什么JavaScript每行的末尾不需要加“；”？
因为：js是解释性的编程语言，逐行解释运行。

Js是一门独立额编程语言

js弱类型，java强类型
a）变量没有变量类型关键字：var

var a = 10

b）数据类型
i.数字类型

var a = 1

ii.字符串类型

var b = “liuzf”

iii.布尔类型

var b = true|false

iv.特殊类型
NAN：Not A Number 不是一个数字数字计算有误 “liuzf”/4
undefined：

声名变量之后没有赋值直接使用
直接使用没有声名的变量 not define
Null：
通过变量手工赋值为null
函数的返回值返回为null
关键字：typeof变量获取变量的类型

c)运算符

i.赋值运算符 =
ii.算术运算符 + - * / %
iii.比较运算 > >= == != <= <
注意：双等和三等分别判断的是值、值和类型

console.info(a==b)	//只判断值
console.log(a===b)	//判断 值 和 类型

iv:逻辑运算符 && || ！
v：三元运算符 a>b ? true : false

d)流程控制

i.分支（和java一样）
ii.循环（和java一样）

e)函数【重点】
function方法名参数表方法体
function add(i,j){return i+j}
调用：add(1,2)；–>3

function mul(i,j,k){
    return i+j*k
}
console.info(mul(1,2,1))  //3
console.info(mul(1,2,2))  //5

特殊函数的定义和使用

通过变量存储函数

通过一个变量去接受函数的返回值

匿名函数（函数没有名字）

var add = function(i,j){
	return i+j
}
//调用
alert(add(1,2))

函数可以作为其他函数的参数

将定义好的函数作为另外一个函数的参数

function add(i,j){
	return i+j
}
function test(func){
	alert(func(2,2))	
}
test(add)

匿名函数作为另外一个函数的参数

functionn test(func){
	var result = func(2,3)
	alert(result)
}
//调用
test(function(i,j){
	return i+j
})

函数参数可以不按照规定传递

在调用js函数时，可传递的参数个数和指定函数的参数个数没有关系。
传递的参数比函数指定的参数多选取对应个参数
传递的参数比函数指定的参数少可能会出错

内置对象：arguments 代表函数运行是的参数的相关内容
用arguments判断函数参数的相关内容个数类型（增强函数的健壮性）
在这里插入图片描述
f)对象
1、自定义对象
a)创建对象var per = new Object();
b) josn串特定形式的字符串
{key:value; key2:value2; key3:value3……}

var Student = {
	id:1,
	name:"liuzf",
	age:18,
	getId:function(){
		return this.id
	},
	setId:function(id){
		this.id=id
	}
}
alert(Student.getId())

2、内置对象
a）数组【重点】 Array
js数组：不定长元素类型也可以不相同等价于java中ArrayList集合
b）字符串
js中不区分字符串和字符
c）日期 Date
var date = new Date()
d）数学Math

JS的事件编程

a）js事件编程的三要素
i：事件源头：html标签
ii：事件属性：单击事件、双击事件、键盘按下等
iii：事件监听用function
b）常用的事件监听属性
i.所有标签可用

1.onclick
2.ondblclick 双击事件
3.onmouseover 鼠标移入事件
4.onmouseout 鼠标移除事件

ii.body

onload

iii.form表单相关

1.onsubmit
2.onblur 失去焦点
3.onfocus获取焦点
4.onchange 针对于下拉列表。修改值

vi.键盘

onkeydown 键盘按键按下
onkeyup 键盘按键弹起

阻止默认请求提交

a）超级链接send
b）表单：<./form>
注意：οnsubmit=”return test();” 属性值可以写 return 函数调用函数调用的结果为turn|false

event对象（事件对象）

事件源：发生事件的HTML标签event.target
获取发生事件的横向坐标event.clientX
获取发生事件的纵向坐标event.clientY

事件冒泡

描述：内部和外部定义了相同的事件属性。当触发了内部事件运行时，同时外部事件也会运行。

解决：浏览器存在差异
IE: event.cancelBubble=true;//阻止事件冒泡
webKit: event.stopPropagation();//阻止事件冒泡

DOM【重点】

a）DOM概念：Document Object Model文档对象模型。
DOM模型：将整个页面以及页面中的每一个标签看作是一个对象节点。所有的对象以一颗树状结构存储。
在这里插入图片描述
b)获取节点对象

document.getElementById(“div”); // 获取唯一的一个对象
document.getElementByTagName(“div”); //通过标签名获取标签对象返回一组对象
document.getElementByname(“Liuh”)； //获取标签name属性值相同的一组标签

c)修改标签的属性内容
标签对象.属性名 //获取标签的属性值
标签对象.属性名=“值” //修改标签的属性值
注意：标签中的属性不能修改id,class

d)获取标签的文本内容
i. 标签对象.InnerText 获取内部文本只获取内部的文本信息
标签对象.InnerText = “值” 修改标签内部文本替换内部所有的内容
ii. 标签对象.innerHTML 获取标签内部文本包括内部嵌套的标签内容
标签对象.InnerHTML = “值” 修改标签内部文本替换内部所有的内容

e)标签对象的其他属性
i. 标签对象.InnerText 获取内部文本只获取内部的文本信息
标签对象.InnerText = “值” 修改标签内部文本替换内部所有的内容
ii. 标签对象.innerHTML 获取标签内部文本包括内部嵌套的标签内容
标签对象.InnerHTML = “值” 修改标签内部文本替换内部所有的内容

f)具体的页面结构操作
i. 创建
1、创建文本节点对象：document.createTextNode(“文本信息”)
2、创建标签节点对象：document.createElement(“标签名”)
3、将节点添加到父节点上父节点对象.appendChild(子节点对象);
ii. 删除
父节点对象.removeChild(子节点对象)

BOM

a）浏览器对象模型
在这里插入图片描述
b)方法
i.window.alert
ii.window.confirm(“s提示内容”) 返回值确认是否操作确认 true 取消 false
iii.window.prompt(“提示内容”) 可输入提示框返回值就是你输入的内容
iv.定时任务只执行一次

/**
            一定时间执行函数的内容   只执行一次
            参数1：执行的内容
            参数2：时间  单位毫秒
            返回值：定时任务的id
         */
        var id = window.setTimeout(function(){
            alert("等等……")
        },2000)
         window.clearTimeout(id)

v.定时任务循环执行，每隔一定时间执行一次

/**
         * 定时任务   循环执行     每隔一定时间执行一次
         * 参数1：执行的内容
         * 参数2：时间  单位毫秒
         * 返回值：定时任务的id
         */
        var id = window.setInterval(function(){
            alert("123")
        },1000)
        window.clearTimeout(id)

vi.Location【重点】等价于地址栏
发送请求：location.href=“url”

发送请求的4中方式

1.地址栏
2.超级链接
3.表单
4.Js Location.href=“”

以上内容对于小白人员入个门就已经够用了，建议看完这边博客之后，再去看看他人写的关于JQuery的博客进行深入学习。

土豆和西红柿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript小白快速入门、东西少重点多

引言1、什么是JavaScript？简称为js 是一门独立的编程语言，能够完成页面动态效果（动的是页面结构）注意：i、js使用在html中ii、JavaScript和java无关，js全称为W3Ciii、js是一门解释性的语言编译性 C C++ 不能跨平台运行效果高解释性 js 可以跨平台运行效率低先编译，再解释的语言 java（可以跨平台效率高）iv、js...
复制链接

扫一扫