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语言规范的具体实现。

总结一下它的特征：

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

主要特色：

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

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

简单易用，一是变量类型全部为弱类型，没有严格的代码约束，二是基于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不会报错，相反它会认为我们是要隐式申明一个全局变量，这一点一定要注意。

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博客如需转载请紧急联系作者

JavaScript的初步探索(JS的入坑笔录)相关推荐

JavaScript设计模式入坑
JavaScript设计模式入坑介绍设计模式编写易于维护的代码. 设计模式的开创者是一位土木工程师.Σ( ° △ °|||)︴,写代码就是盖房子. 模式模式一种可以复用的解决方案.解决软件设计中 ...
【前端圭臬】一：写给入坑前端的你
专栏目录导论 [前端圭臬]一:写给入坑前端的你 HTML 篇 [前端圭臬]二:你知道的和不知道的 HTML CSS 篇 [前端圭臬]三:详解 CSS 选择器 [前端圭臬]四:CSS 核心机制--如何 ...
正则表达式从入门到入坑
正则表达式从入门到入坑入坑前先介绍两个辅助网站: 正则表达式测试网站:https://regex101.com 正则表达式思维导图:https://regexper.com 正则基础(入门) 1.元 ...
api 微信内置浏览器js_多端开发框架uni-app入坑指南，一套代码适用微信、头条等小程序...
前言 hello 小伙伴们,现在我已经正式入坑 uni-app 了.uni-app 已经发布好几个月了,期间也是踩坑无数,但是官方秉承着不抛弃不放弃的精神,积极解决开发者的各种简单的.复杂的问题,在此 ...
「入坑」前端开发，我有一些经验想和你分享
写在前面最近身边有不少朋友想转行去做前端开发,然后跑过来问我,向我了解前端岗位,以及给他们一些建议等等:他们有的还没毕业,对于即将到来的社会毒打充满着迷茫和不安,有的已经工作两三年,突然觉得自己不合 ...
uniapp调用c语言方法,uni-app 入坑指南-web开发
编辑推荐: 本文重点介绍了 uni-app 入坑指南,方便大家更好的了解 uni-app 本篇只讲述 uni-app,不与其他类似框架进行对比本文来自于博客园,由火龙果软件Alice编辑推荐. 什么 ...
传奇工程师卡马克入坑 AI：徒手一周实现反向传播和 CNN
约翰 · 卡马克是何方神圣? 谁是约翰 · 卡马克? 他是一位集传奇工程师.大神.疯狂程序员.黑客之神.第一人称射击游戏之父.业界活化石.一代玄学码神所有称号为一身的老牌程序员,一举一动都牵动人心. ...
vue-seamless-scroll 从入坑到放弃
vue-seamless-scroll从入坑到放弃一.vue-seamless-scroll是什么? 二.使用步骤 1.引入库 2.具体使用三.下面就是我的踩坑之路 1.vue-seamless- ...
微信小程序入坑: 写一个简化版知乎日报
最近开始入坑微信小程序,发现想要练手也不容易,找免费的基于HTTPS的API就要花点时间.在看了网上一些介绍后,决定采用知乎日报的API,写一个简单版的知乎日报作为入坑练习.本文尝试使用微信小程序写一 ...

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

JavaScript的初步探索(JS的入坑笔录)相关推荐

最新文章

热门文章