热门搜索:
您现在的位置是：首页 > 文章详情

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

日期：2018-05-31点击：358

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）：

<%

String path = request.getContextPath();

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

%>

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

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

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



接着，JavaScript 通常用于操作 HTML 元素：

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

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

<!DOCTYPE html>

<html>

<body>

<div id="div1">

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

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

</div>

<script>

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

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

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

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

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

</script>

/*运行结果：

这是一个段落。

这是另一个段落。

这是新段落。*/

</body>

</html>

然后是删除：

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

<!DOCTYPE html>

<html><body>

<div id="div1">

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

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

</div>

<script>

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

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

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

</script>

</body> </html>

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

document.write(str)

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

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

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

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

window.alert(str)

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

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

我的第一个js程序：

var age = 25; //定义变量

var city = “北京”;

if ( age > 18 ) {

alert( “你已成年，可以做任何你想做的事！”);

if( city == “北京”) {

alert( “你好，北京土著！”);

}else{

alert(“你好，北漂一族！”);

}

}else{

alert(“小同学你好，小心被拐卖了哦！”);

}

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

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

原文链接：https://yq.aliyun.com/articles/610569
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章