JS入门
2023-03-28 19:59:34 0 举报AI智能生成
JS极速入门
作者其他创作
大纲/内容
js对象
Array
定义
var 变量名 = new Array(元素列表);//方式一
var 变量名 = [元素列表];//方式二
访问
arr[索引] = 值;
属性
length
设置或返回数组中元素的数量
方法
forEach()
遍历数组中的每个有值的元素，并调用一次传入的函数
push()
将新元素添加到数组的末尾，并返回新的长度
splice()
从数组中删除元素
箭头函数(ES6)
是用来简化函数定义语法的。具体形式为：(...) => {...}
arr.forEach((e) => {
console.log(e);
})
console.log(e);
})
String
创建对象
var 变量名 = new String("...");//方式一
var 变量名 = new String("...");//方式一
属性
length
字符串的长度
方法
charAt()
返回在指定位置的字符
indexOf()
检索字符串
trim()
去除字符串两边的空格
substring()
提取字符串中两个指定的索引号之间的字符(含头不含尾)
JSON
JS自定义对象
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};
自定义对象的调用格式
对象名.属性名;
对象名.函数名();
对象名.函数名();
定义
var 变量名 = '{"key1": value1,"key2": value2}';
JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);
value的数据类型
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
BOM(浏览器对象模型)
组成
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址对象
Window
获取：
直接使用window，其中 window. 可以省略
window.alert("Hello Window");
alert("Hello Window");
alert("Hello Window");
属性：
history
location
navigator
方法：
alert()
显示带有一段消息和一个确认按钮的警告框
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()
按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout()
在指定的毫秒数后调用函数或计算表达式
location
获取：
使用 window.location 获取，其中 window. 可以省略
window.location.属性;
location.属性;
location.属性;
属性：
href：设置或返回完整的URL
location.href = "https://www.itcast.cn";
DOM(文档对象模型)
定义了访问HTML和XML文档的标准
Core DOM - 所有文档类型的标准模型
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
Image：<img>
Button：<input type = 'button'>
获取Element元素对象
根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
根据标签名获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');
js引入方式
内部脚本
将JS代码定义在HTML页面中
外部脚本
将JS代码定义在外部JS文件中，然后引入到HTML页面中
js函数
通过 function 关键字进行定义
function functionName(参数1,参数2...){
//要执行的代码
}
//要执行的代码
}
var funcitonName = function(参数1,参数2...){
//要执行的代码
}
//要执行的代码
}
注意
形式参数不需要类型，因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
JS中，函数调用可以传递任意个数的参数
js基础语法
书写语法
大部分同Java相同，结尾分号可有可无
输出语句
使用 window.alert() 写入警告框
使用document.write()写入 HTML 输出
使用 console.log 写入浏览器控制台
变量
使用 var 关键字声明变量
遵守规则：
组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名
注意：
ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变了，只在 let 关键字所在的代码块内有效，且不允许重复声明
ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变
数据类型
原始类型
number
string
boolean
null
undefined
引用类型
注意：
使用运算符 typeof 可以获取数据类型
运算符
算术运算符
+，-，*，/，%，++，--
赋值运算符
=，+=，-=，*=，/=，%=
比较运算符
>，<，>=，<=，!=，==，===
注意：==会进行类型转换，===不会进行类型转换
逻辑运算符
&&，||，！
三元运算符
条件表达式？true_value : false_value
流程控制语句
if...else if...else
switch
for
while
do...while
语法与java类似，详情参考官方文档：https://www.w3school.com.cn/js/js_statements.asp
js事件监听
事件绑定
方式一：通过 HTML 标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1">
<script>
function on(){
alert('我被点击了！');
}
</script>
<script>
function on(){
alert('我被点击了！');
}
</script>
方式二：通过 DOM 元素属性绑定
<input type="button" id="btn" value="按钮2">
<script>
document.getElementById('btn').onclick=function(){
alert('我被点击了！');
}
</script>
<script>
document.getElementById('btn').onclick=function(){
alert('我被点击了！');
}
</script>
常见事件
onclick
鼠标单击事件
onblur
元素失去焦点
onfocus
元素获得焦点
onload
某个页面或图像
onsubmit
当表单提交时触发该事件
onkeydown
某个键盘的键被按下
onmouseover
鼠标被移到某元素之上
onmouseout
鼠标从某元素移开
1- js引入方式
2- js基础语法
3- js函数
4- js对象
5- js事件监听
2- js基础语法
3- js函数
4- js对象
5- js事件监听
0 条评论
下一页
