JavaScript 基础

阅读量：6037 次

发布时间：2019-06-20

本文共 4897 字，大约阅读时间需要 16 分钟。

Hello, JavaScript !

Hello, JavaScript!

我是第一段文字

我是第二段文字

运行效果：

我是第一段文字
我是第二段文字
hello,JavaScript!

HTML引用JS：

在HTML中加入由JavaScript标签包裹的JS代码：

HTML引用独立的JS文件：

// zms.jsdocument.write("Hello, JavaScript!");

这样JS代码就直接运行了。

注意：

能够将JavaScript代码放在html文件里不论什么位置。一般放在网页的head或者body部分。

放在head部分:最经常使用的方式是在页面中head部分放置script元素，浏览器解析head部分就会运行这个代码，然后才解析页面的其余部分。

放在body部分:JavaScript代码在网页读取到该语句的时候就会运行。

也就是说， javascript作为一种脚本语言能够放在html页面中不论什么位置，可是浏览器解释html时是按先后顺序的，所曾经面的script就先被运行。比方进行页面显示初始化的js必须放在head里面，由于初始化都要求提前进行（如给页面body设置css等）；而假设是通过事件调用运行的function那么对位置没什么要求的。

每行语句的末尾一般加上分号。也可不加。只是用分号结束的话。能够在同一行写多条语句。

凝视

单行：//
多行：/* */

变量

定义变量：

var 变量名

命名规则：

变量必须使用字母、下划线(_)或者美元符($)開始。

然后能够使用随意多个英文字母、数字、下划线(_)或者美元符($)组成。

不能使用JavaScript关键词与JavaScript保留字。

注意：

在JS中区分大写和小写，如变量mychar与myChar是不一样的，表示是两个变量。

变量尽管也能够不声明，直接使用，但不规范，须要先声明，后使用。

推断语句(if…else)

函数

基本的语法：

function handleTask(){
          var number = 5;    alert("number is" + number);}

函数定义好，须要在对应的地方调用才会运行：

警告

会出现一个带有确认按钮的信息提示框。

注意：

在点击对话框”确定”按钮前，不能进行不论什么其他操作。

消息对话框通常能够用于调试程序。

alert输出内容，能够是字符串或变量，与document.write 类似。

确认（confirm 消息对话框）

"

); if(mymessage==true) { document.write("非常好,加油!"); } else { document.write("JS功能强大。要学习噢!"); } </script>

注意:

提问（prompt 消息对话框）

弹出消息对话框,通经常使用于询问一些须要与用户交互的信息。

弹出消息对话框（包括一个确定按钮、取消按钮与一个文本输入框）。

语法:

prompt(str1,str2);

參数说明：

str1: 要显示在消息对话框中的文本，不可改动
str2：文本框中的内容，能够改动

返回值:

点击确定按钮。文本框中的内容将作为函数返回值

点击取消按钮，将返回null

演示样例:

var name=prompt("请输入你的姓名:","默认值");if(name!=null)  {   alert("你好"+name); }else  {  alert("你好.");  }

打开新窗体（window.open）

语法：

window.open(
      
       , 
       <窗体名称>
        , 
        <參数字符串>
         )

參数说明：

URL：打开窗体的网址或路径。
窗体名称：被打开窗体的名称。能够是”_top”、”_blank”、”_selft”等。

參数字符串：设置窗体參数，各參数用逗号隔开。

參数字符串：

參数	取值	说明
top	Number	窗体上边距
left	Number	窗体左边距
width	Number	窗体宽度
height	Number	窗体高度
menubar	yes,no	是否有菜单
toolbar	yes,no	是否有工具条
scrollbars	yes,no	是否有滚动栏
status	yes,no	是否有状态栏

演示样例：

关闭窗体（window.close）

window.close();   //关闭本窗体
      <窗体对象>
       .close();   //关闭指定的窗体

演示样例：

编程练习

    new document

 window.open(myurl, '_blank', 'width=400,height=500,menubar=no,toolbar=no'); } } </script> </head> <body> <input type="button" value="新窗体打开站点" onclick="openWindow()" /> </body> </html>

···················· 低调的切割线 ····················

DOM

文档对象模型DOM（Document Object Model）定义訪问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档能够说由节点构成的集合。三种常见的DOM节点:

1. 元素节点：、、

等都是元素节点。即标签。2. 文本节点:向用户展示的内容，如

...

中的文本。3. 属性节点:元素属性，如标签的链接属性href="http://www.zms.com"。

通过ID获取元素

document.getElementById

JavaScript

运行结果：

JavaScript
结果:[object HTMLParagraphElement]

innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法：

Object.innerHTML

演示样例代码：


      innerHTMLjavascript

改变 HTML 样式

语法：

Object.style.property=new style;

基本属性表（property）:

属性	描写叙述
backgroundColor	背景颜色
height	高度
width	宽度
color	文本颜色
font	字体
fontFamily	字体系列
fontSize	字体大小

演示样例代码：

Hello World!

显示和隐藏（display属性）

语法：

Object.style.display = value

value取值：

取值	说明
none	隐藏
block	显示（块级元素）

演示样例代码：

display

JavaScript

做为一个Web开发师来说，假设你想提供美丽的网页、令用户惬意的上网体验，JavaScript是不可缺少的工具。

</p> <form> <input type="button" onclick="hidetext()" value="隐藏内容" /> <input type="button" onclick="showtext()" value="显示内容" /> </form> </body> </html>

控制类名（className 属性）

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

作用:

1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观

演示样例代码：

className属性

JavaScript使网页显示动态效果并实现与用户交互功能。

</p> <input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript"> function add(){

          var p1 = document.getElementById("p1"); p1.className="one"; } function modify(){ 
          var p2 = document.getElementById("p2"); p2.className="two"; } </script> </body> </html>

编程练习


      javascript  JavaScript课程
  
            
       JavaScript为网页加入动态效果并实现与用户交互的功能。
        
       1. JavaScript入门篇，让不懂JS的你，高速了解JS。

</p> <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正則表達式、ajax等课程。</p> </div> <form>  <input type="button" value="改变颜色" onclick="changeColor()"> <input type="button" value="改变宽高" onclick="changeSize()"> <input type="button" value="隐藏内容" onclick="hideContent()"> <input type="button" value="显示内容" onclick="showContent()"> <input type="button" value="取消设置" onclick="resetStyle()"> </form> <script type="text/javascript"> var txtObject = document.getElementById("txt"); //定义"改变颜色"的函数 function changeColor(){

          txtObject.style.color="#00bb77"; } //定义"改变宽高"的函数 function changeSize(){ 
          txtObject.style.width="255px"; txtObject.style.height="255px"; } //定义"隐藏内容"的函数 function hideContent(){ 
          txtObject.style.display="none"; } //定义"显示内容"的函数 function showContent(){ 
          txtObject.style.display="block"; } //定义"取消设置"的函数 function resetStyle(){ 
          var isconfirm = confirm("取消设置？"); if(isconfirm){ txt.removeAttribute('style'); } } </script> </body> </html>