1.JavaScript 第一章 基础
JavaScript 第一章 基础
一、JavaScript组成
ES 基础语法
DOM 操作HTML
BOM 操作浏览器 前进，后退，刷新
二、JS引入方式
1.内部JS：使用html下的<script>标签
<script type="text/javascript">
document.write("初学JavaScript");
document.write("<h1>HELLO </h1>")
</script>
2.外部JS：创建js文件，使用<srcipt src="JS路径">即可
<!--外部调用-->
<script src="js/index.js"></script>
3.行内JS：使用触发属性（src，事件，href）
<a href="javascript:alert(1)">点击</a>
三、核心语法
变量定义
使用var关键字（可以省略，但不推荐）
var 变量名 = 值;
数据类型
undefined 创建变量，不赋值，就是undefined
null 等价于undefined
number 数字类型
Boolean true和false
string
使用typeof（变量）检测数据类型
核心语法—String对象
属性
字符串对象.length var str=“this is JavaScript”;
var strLength=str.length; //长度是18
方法
字符串对象.方法名();
| 方法名称 | 说 明 |
|---|---|
| charAt(index) | 返回在指定位置的字符 |
| indexOf**(str，**index) | 查找某个指定的字符串在字符串中首次出现的位置 |
| substring(index1**，**index2) | 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符 |
| split(str) | 将字符串分割为字符串数组 |
数组
创建方式：
var arr = new Array(大小);
var arr = new Array(值1，值2);
var arr = [值1，值2];
| 类别 | 名称 | 描述 |
|---|---|---|
| 属性 | length | 设置或返回数组中元素的数目 |
| 方法 | join( ) | 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔 |
| sort() | 对数组排序 | |
| push() | 向数组末尾添加一个或更多 元素，并返回新的长度 |
循环
for
while
for-in
var ages = ["zhang","李四","王五"];
//i是下标
for(var i in ages){
document.write(ages[i]);
}
运算符
| 类型 | 运算符 |
|---|---|
| 算术运算符 | + - ***** / % ++ — |
| 赋值运算符 | = += -= |
| 比较运算符 | > < >= <= == != === !== |
| 逻辑运算符 | && || ! |
if判断与switch
Java一样
注释
单行注释 //
多行注释 /* */
弹出层
alert() 警告框或提示框
prompt()输入提示框
confirm()询问框
if(confirm("是否删除此数据？")){
alert("删除成功");
}else{
alert("取消删除");
}
var msg = prompt("输入提示","这是一个框子");
alert(mskg);
var ages = ["张三","李四","王五"];
for(var i in ages){
alert(ages[i]);
}
四、程序调试
五、函数
系统函数
parseInt("字符串") 将字符串转换为Int类型，便于计算
parseFloat("字符串") 将字符串转换为Float类型，便于计算
isNaN(变量) 检测是否非数字，如果不是数字返回true
自定义函数
function 函数名(参数列表){
[return 返回值]
}
function show(name,age){
}
//无返回值
使用函数名 show
//有返回值
var a = show();
注意：形参与实参类型或个数可以不对应
//创建对象
function User(n,a){
this.name = n;//成员变量
this.age = a;//成员变量
this.show = function(a){//成员方法
document.write(a+"这是对象的show方法"+this.name)
}
}
var u1 = new User("李四",18);//创建对象
u1.show("xxxx");
六、事件
使用html的属性
| 名称 | 说明 |
|---|---|
| onload | 一个页面或一幅图像完成加载 |
| onlick | 鼠标单击某个对象 |
| onmouseover | 鼠标指导移到某元素上 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
<!DOCTYPE html>
<htm1 onkeydown="keydown(event)">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="login()">登录</button>
</body>
<script type="text/javascript">
function keydown(e){
if(e.keycode==13){
login();
}
}
function login(){
alert('登录成功');
}
</script>
</htm1>
原文地址：https://blog.csdn.net/QAZ412803/article/details/142374076
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！