JavaScript的初步探索(JS的入坑笔录)

简介:

Java script简称js,是web学习的一个重要组成部分。

首先,Js是什么?JS简介

这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 它是一种浏览器脚本语言,它由由若干语言组成,语句是基本单位。语句是由函数、数据、表达式组成。它严格区分大小写,当然事件响应句柄不区分,因为事件响应句柄属于DOM,也属于html。它是也是与HTML一样是一种解释性语言。


注:下文中很多类似的图片,您可以点击一下图片,图片自动放大便于查看。





js的历史:

• JavaScript语言最初称为LiveScript语言,是由Netscape(网景)公司开发的脚本语言。希望借助流行的Java使LiveScript流行起来,因此改名为JavaScript。

• Microsoft在IE3.0中引入了JavaScript。因为Microsoft没有被授权使用JavaScript商标,因此将其改名为Jscript。

• 1997年,JavaScript 1.1被提交到ECMA(欧洲计算机制造商协会)。并在1997.6ECMA制定了第一个正式语言规范ECMA-262,并命名为ECMAScript。

• 各浏览器中的脚本是对ECMA-262语言规范的具体实现。


总结一下它的特征:

  1. 它是脚本语言。
  2. 是一种轻量级的编程语言。
  3. 是可插入 HTML 页面的编程代码。
  4. 插入 HTML 页面后,可由所有的现代浏览器执行。
  5. 很容易学习。

主要特色:

基于对象的,但不是纯对象的。

动态性的,反映响应,是采用以事件驱动的方式进行的。

简单易用,一是变量类型全部为弱类型,没有严格的代码约束,二是基于Java基本语句和控制流之上的简单紧凑设计。

安全性,不允许访问本地磁盘,并不能存储数据与服务器上,不允许对网络文档进行修改与删除,只能通过Brower信息浏览器或动态交互。有效的防止信息丢失。

跨平台性,之依赖于Brower兼容就可以执行。

改善用户体验,最大的魅力就是——减低网络流量,做出动态效果,提升用户满意度。



它能做什么?




执行顺序:从上到下,从左到右。

简单介绍一下JS的变量(您可以把变量看做存储数据的容器)的声明,以证明js的相关特点:

它和代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

要求:

1,可以一条语句,多个变量。(用逗号分开,并可以跨越多行)

2,从var重新申请声明变量,原变量名一致则其变量值不变。(不重新赋值,声明无值变量在实例中也会生效)

3,JS的变量类型是动态类型的,相同变量可用作不同类型。

变量类型有:String,Number,boolean,Array,Object,null,Undefined(js中可以用双引号也可以用单引号,两者没有差别,

在String类型中有一个小技巧:当需要在String语句中包含单引号或是双引号时,可以用转义字符‘\’进行转义,或是双引号与单引号相互嵌套的方式进行区分)

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)
  • 切忌:JavaScript 语句和 JavaScript 变量都对大小写敏感。

当我们使用访问一个没有声明的变量时,JS会报错。而当我们给一个没有声明的变量赋值时,JS不会报错,相反它会认为我们是要隐式申明一个全局变量,这一点一定要注意。


<script></script>脚本的位置

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

脚本语言的控件会在HTML文档加载完后进行加载,为了避免js的控件加载不完整,所以建议将脚本放在</body>的后边,也就是最下方,在标签之间加上这样一句window对象函数<script>window.load = function(){ }</script> 。

js在的脚本位置主要分为三种:1,内嵌式(就是写在jsp或html页面的)2,行内式(写在对应的html标签元素内的)3,外外链式(从外部引入写好的js的脚本)在这里附上一段获取目标文件绝对路径的代码段(JSP):



  
  
  1. <%

  2. String path = request.getContextPath();

  3. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

  4. %>

  5. //这要加入到<head>标签中

<base href="<%=basePath%>">//加入到<body>中

因为从外部引入的话,本人经常就会把此代码段给不小心拼错,所以打好之后保存起来,之后复制粘贴就好了。



接着,JavaScript 通常用于操作 HTML 元素:

举一个栗子:创建和删除HTML元素节点.

首先是创建一个HTML元素节点:



  
  
  1. <!DOCTYPE html>

  2. <html>

  3. <body>

  4. <div id="div1">

  5. <p id="p1">这是一个段落。</p>

  6. <p id="p2">这是另一个段落。</p>

  7. </div>

  8. <script>

  9. var para=document.createElement("p");//利用Document对象调用一个creatEleent()的方法来创建一个新的html元素节点

  10. var node=document.createTextNode("这是新段落。");//然后再创建一个新的元素节点的文本文档

  11. para.appendChild(node);//在这个新建的html元素节点中插入刚刚生成的文本文档

  12. var element=document.getElementById("div1");//再获取要加入的元素节点的html文档地址

  13. element.appendChild(para);//在该位置中追加新的节点

  14. </script>

  15. /*运行结果:

  16. 这是一个段落。

  17. 这是另一个段落。

  18. 这是新段落。*/

  19. </body>

  20. </html>

然后是删除:

如需删除 HTML 元素,您必须首先获得该元素的父元素。



  
  
  1. <!DOCTYPE html>

  2. <html><body>

  3. <div id="div1">

  4. <p id="p1">这是一个段落。</p>

  5. <p id="p2">这是另一个段落。</p>

  6. </div>

  7. <script>

  8. var parent=document.getElementById("div1");//先找到父级元素

  9. var child=document.getElementById("p1");//然后找到目标元素

  10. parent.removeChild(child);//使用removeChild()的方法进行删除

  11. </script>

</body> </html>

接着是两个常用的js函数对象:



  
  
  1. document.write(str)

  2. 该方法在浏览器中输出参数字符串str。

  3. document是文档对象模型(DOM)中的一个对象,表示当前浏览器中的网页文档。

  4. document提供了许多访问和控制页面中元素的属性和方法,write()是其中的一个方法。

  5. JS通过“.”运算符调用对象的属性和方法。

  6. window.alert(str)

  7. 该方法在浏览器中弹出一个对话框,对话框中显示参数str的内容。

  8. Window对象同样是浏览器提供的对象(BOM),对象提供了许多访问和控制窗口元素的属性和方法,alert()方法是其中一个方法。

我的第一个js程序:



  
  
  1. var age = 25; //定义变量

  2. var city = “北京”;

  3. if ( age > 18 ) {

  4. alert( “你已成年,可以做任何你想做的事!”);

  5. if( city == “北京”) {

  6. alert( “你好,北京土著!”);

  7. }else{

  8. alert(“你好,北漂一族!”);

  9. }

  10. }else{

  11. alert(“小同学你好,小心被拐卖了哦!”);

  12. }

原文发布时间:2018年05月16日

本文来源CSDN博客如需转载请紧急联系作者

相关文章
|
1月前
|
人工智能 JavaScript 前端开发
使用Node.js模拟执行JavaScript
使用Node.js模拟执行JavaScript
|
1月前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
44 1
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
101 1
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
1月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
17 0
|
1月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
21 0
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
3月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
50 1
|
3月前
|
Java 数据库连接 数据库
从零到精通:揭秘 Hibernate 构建持久层服务的全过程,你离数据持久化大师还有多远?
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先,通过在 Maven 项目中添加必要的依赖,确保项目具备使用 Hibernate 的条件。接着,配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库,并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外,还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
40 0
|
3月前
|
缓存 JavaScript 前端开发
Vue.js与JavaScript性能优化终极揭秘:掌握这些技巧,让你的Web应用飞一般地流畅!
【8月更文挑战第30天】随着前端应用复杂度的增加,性能优化变得至关重要。本文深入探讨了如何利用Vue.js和JavaScript实现高效的应用性能。主要内容包括:优化组件设计以减少不必要的渲染,采用异步组件与懒加载技术加速应用启动,利用虚拟滚动和分页处理大数据集,改进Vuex使用方式以及合理运用浏览器缓存等策略。通过具体示例和最佳实践,帮助开发者充分挖掘Vue.js潜力,打造高性能的前端应用。
69 0