Web前端基础(4)JavaScript基础

JavaScript基础

JavaScrip对于网页的作用有提供网页特效、用户交互、表单验证、控制结构和样式。

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript是一种脚本语言, 主要目的是动态的控制web标准中的结构和样式(结构、样式、行为)

1
document.getElementById("demo").style.width = "200px";

JavaScript用法

HTML 中的脚本必须位于 <scrip>与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
通常的做法是把函数放入

部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

<head> 中的 JavaScript 函数

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<script>
alert("我的第一个 JavaScript");
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
</body>
</html>

<body> 中的 JavaScript

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<script>
alert("我的第一个 JavaScript");
</script>
</body>
</html>

外部的 JavaScript

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

JavaScript中常用的输出语句

alert()

使用 window.alert()可以弹出一个警示框

1
2
3
4
5
6
<script>
function myTestFunction1(){
window.alert(5+6);
}
</script>
<button type="button" onclick="myTestFunction1()">尝试一下</button>

console.log()

使用 console.log() 可以控制台输出, 按F12查看Console结果

document.write()

使用 document.write() 方法将内容写到 HTML 文档中。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>

innerHTML

使用 innerHTML 写入到 HTML 元素。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>

JavaScript变量

变量的命名规则

  1. 变量命名必须以字母或是下标符号”_”或者”$”为开头。
  2. 变量名长度不能超过255个字符。
  3. 变量名中不允许使用空格。
  4. 不用使用脚本语言中保留的关键字及保留符号作为变量名。
  5. 变量名区分大小写。(javascript是区分大小写的语言)

变量的作用域

根据变量的作用范围可以分为全局变量和局部变量
全局变量

  1. 在最外层声明的变量。
1
2
3
4
5
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
  1. 在函数体内部,但是没有声明var的变量也是全局变量
1
2
3
4
5
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}

局部变量
在函数体内部声明的变量。

1
2
3
4
5
// 此处不可调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 此处可调用 carName 变量
}

JavaScript中的事件

事件名说明
onclick鼠标单击
ondbclick鼠标双击
onkeyup按下并释放键盘上的一个键时触发
onchange文本内容或下拉菜单中的选项发生改变
onfocus获得焦点,表示文本框等获得鼠标光标
onblur失去焦点,表示文本框等失去鼠标光标
onmouseover鼠标悬停,即鼠标停留在图片等的上方
onmouseout鼠标移出,即离开图片等所在的区域
1
事件源.事件 = function(){  事件处理函数 }
1
<button onclick="this.innerHTML=Date()">现在的时间是?</button>

JavaScript函数

函数的定义

函数:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

自定义函数

1
2
3
4
function fun(){
alert("我是自定义函数")
}
fun(); //函数不会被自动调用,主动调用函数fun()

函数直接量声明

1
2
3
4
var fun1 = function(){
alert("直接量声明")
}
fun1(); //也需要主动调用

利用Function关键字声明

1
2
var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();

函数体内变量声明提升

在函数体内,声明变量,会把该声明提升到函数体的最顶端,只会提升变量声明,不会赋值。

1
2
3
4
function fun(){
console.log(num);
var num = 20;
}

相当于

1
2
3
4
5
function fun(){
var num;
console.log(num);
num = 20;
}

例如:

1
2
3
4
5
6
7
8
9
var a = 18;
f1();
function f1(){
var b=9;
console.log(a);
console.log(b);
var a = '123';
}
//输出结果: undefine 9

入口函数

1
2
3
window.onload = function(){
//内部放js
}

这个函数的意思就是说,当我们页面加载完毕(页面结构样式节点等加载完)之后,采取执行函数体里面的js部分。所以这句话可以在页面的顶端。

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×