JavaScript一辆车,入门如上车
作者:互联网
超基础的入门JavaScript第一篇
既然是入门,咱先写一些在编写JavaScript代码时,应注意基本的语法规则,避免程序出错:
1.JavaScript严格区分大小写,在编写代码时一定注意大小写的正确。
2.JavaScript代码对空格、换行、缩进不敏感,一条语句可以分成多行书写。
3.如果一条语句结束后,换行书写下一条语句,后面的分号可以省略。
一、JavaScript的引入方式
- 行内式 行内式是将JavaScript代码作为HTML标签的属性值使用。
<input type="button"value="一个按钮" onclick="alert('这是一个行内的JavaScript引入方式')"/>
<a href="javascript:alert('这是另一个行内的JavaScript引入方式');">JavaScript</a>
- 嵌入式 嵌入式就是使用script标签包裹JavaScript代码,直接编写到HTML文件中。
<script type="text/javascript">
JavaScript语句
</script><br>
- 外链式 外链式是指将JavaScript代码保存到一个单独的文件中,通常使用“js”作为文件的扩展名,然后使用script标签的src属性引入文件中。
相比嵌入式,外链式的优势有以下3点:
① 嵌入式会导致HTML与JavaScript代码混合在一起,不利用修改和维护。
② 嵌入式会增加HTML文件的体积,影响网页本身的加载速度,而外链式可以利用浏览器缓存提高速度。
③ 外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器上,利用CDN的优势加快下载速度。
二、变量保存数据
在JavaScript里面有var变量,而且好像只有var变量。
他没有确定的类型,他的类型取决于赋值给他的变量的类型。
也就是说像公交车,不管你是老的少的男的女的都能乘坐一样,数值,字符串都可以用它来声明。
var的本质就是来申明变量的
var str1=’白小白’ //申明并赋值
var str2=‘China’ //申明并赋值
str3=‘小黑’ //赋值
此外,还有非常重要的一点”变量的作用域”。
var关键字声明变量,无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这个可以灵活应用。
全局作用域:在最外层定义的变量
局部作用域:在函数内部定义的变量
JS作用域的特点:首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层,即window对象,并操作window对象的属性。
下面来一个经典案例
<script>
var str = 'China';
function t1(){
var str = 'Japan';
function t2(){
var str = 'USA';
console.log(str);
}
t2();
}
t1();
</script>
三、函数
函数这玩意就有点千变万化了,基于js定义方式比较灵活,而且每个人写代码的风格不同,就衍生处理多种多样的js函数的写法,但确实有章可循。如果不理解,看见一段代码就很容易让人手足无措。
咱也是刚开始学习,就先不深入了,函数这一方面会在以后深深的挖掘一下。
多数的语言中的函数都是基于为了解决代码量增多,维护困难、条理不清、阅读困难,使代码模块化、组件化,以便于更好的维护。常将一些常用的功能模块编写成函数,通过调用函数来完成任务。JS也不例外。
在js中有内置函数(自行百度或者csdn里面就有很多这样的文章)和自定义函数两种
<script type="text/javascript">
//定义函数
function sum(a,b){
var c=a+b;
return c;
}
//调用函数
document.write(sum(22,33))
</script>
//瞅见没?这就是自定义函数
var name = prompt('请输入你的名字:') //这个就是其中一个内置函数
四、对象
刚才说了函数有内置函数和自定义函数两种,而对象也有内置对象和自定义对象两种
- 首先内置对象
(1) Window对象
window对象是JavaScript与浏览器之间交互的主要接入点。
提供了用于JavaScript脚本控制浏览器的一些接口。
举例:弹出警告框、输入框,或者更改网页文档内容等效果。
//常用输出语句
alert() //警告框
console.log() //控制台输出
document.write() //文档页面输出
prompt() //显示可提示用户进行输入的对话框
(2)document对象
document对象是window对象的属性之一,主要用于与网页文档进行交互。
(3)String对象
在代码中直接定义的字符串,就可以作为对象来使用。
String对象用于对字符串进行处理。
var str = 'apple'; // 定义一个字符串
alert(str.length); // 获取字符串长度,输出结果:5
alert(str.toUpperCase()); // 获取转换大写后的结果,输出结果:APPLE
alert('aa'.toUpperCase()); // 直接调用字符串的成员方法,输出结果:AA
- 自定义对象
话不多说上代码
<script type="text/javascript">
var Girlfriend ={} //创建一个女朋友的对象
Girlfriend.name='白小白'; //为Girlfriend对象添加属性
Girlfriend.gender='女';
Girlfriend.age='18';
document.write(name); //调用Girlfriend对象的name属性
//创建Girlfriend对象的introduce介绍方法
Girlfriend.introduce=function(){
return '她叫'+this.name+'今年'+this.age+'岁了';
}
//调用Girlfriend对象的introduce介绍方法
document.write(Girlfriend.introduce())
</script>
五、事件
JS之所以出现就是为了实现与用户的交互,与用户的一次次交互就是一个个事件。
标签:函数,对象,代码,JavaScript,Girlfriend,一辆车,var,入门 来源: https://blog.csdn.net/weixin_45746601/article/details/105740710