1. JavaScript函数:

function 函数名() {

函数代码;//完成特定功能的代码。

}
PS:函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了

2. 输出内容(document.write)

a. 输出内容用“”括起,直接输出""号内的内容

document.write("I love JavaScript!");

b.通过变量,输出内容

  var mystr="hello!";
  document.write(mystr); 

c.输出多项内容,内容之间用+号连接。

var mystr="hello";

  document.write(mystr+"world");

d.输出HTML标签,并起作用,标签使用“”括起来。

var mystr="hello";

document.write(mystr+"<br>");//输出hello后,输出一个换行符

document.write("JavaScript");

3. 警告(alert 消息对话框)

alert(字符串或变量);

4.  确认(confirm 消息对话框)

confirm(str);

参数说明:

str:在消息对话框中要显示的文本 返回值: Boolean值

返回值:

当用户点击"确定"按钮时,返回true 当用户点击"取消"按钮时,返回false

var mess=confirm("是否允许打开新窗口?")
if(mess==true){
var myurl=prompt("要打开的网址:","http://www.imooc.com/");
window.open('myurl','width=400,height=500,menubar=no,toolbar=no');
}

5.提问(prompt 消息对话框)

prompt(str1, str2);

参数说明:

str1: 要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改

返回值:1. 点击确定按钮,文本框中的内容将作为函数返回值2. 点击取消按钮,将返回null

6.打开新窗口(window.open)

open() 方法可以查找一个已经存在或者新建的浏览器窗口。window.open([URL], [窗口名称], [参数字符串])

URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。 窗口名称:可选参数,被打开窗口的名称。 1.该名称由字母、数字和下划线字符组成。 2."_top"、"_blank"、"_selft"具有特殊意义的名称。   _blank:在新窗口显示目标网页   _self:在当前窗口显示目标网页   _top:框架网页中在上部窗口中显示目标网页 3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。   4.name 不能包含有空格。 参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')</script>
7.关闭窗口(window.close)
window.close(); //关闭本窗口

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

var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象,存储在变量mywin中
mywin.close();

8.DOM

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

a. 通过ID获取元素

document.getElementById(“id”)

b. innerHTML 属性

Object.innerHTML

注意:

1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

c. 改变 HTML 样式

Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素

d.显示和隐藏(display属性)

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

Object.style.display = value
value取值none或者block

e.控制类名(className 属性)

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

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的

var p1 = document.getElementById("p1");

p1.className="one";

JavaScript基础(慕课)的更多相关文章

  1. JavaScript进阶--慕课网学习笔记

                         JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...

  2. JavaScript入门--慕课网学习笔记

     JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...

  3. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  4. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  5. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  6. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  7. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  9. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

随机推荐

  1. MVC+EF OA观看视频记录

    搭建基本框架 创建基接口: using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  2. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  3. 关于Js添加版本号

    背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就 ...

  4. bootstrap入门-1.可视化布局

    下载地址:http://v3.bootcss.com/getting-started/#download   HTML模板: <!DOCTYPE html> <html> &l ...

  5. 从零开始学Linux[三]:shell脚本学习

    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

  6. session 存储方式

    Session 的存储方式 在 php.ini 文件中,进行配置. 涉及配置参数: - session.save_handler - session.save_path 注意:这两个参数可以在 PHP ...

  7. Android 5.1 open data flow 数据开启流程

    首先我们来看看下面的关系图: 底层Settings.apk 在Settings -> Data Usage Summary中的某个SIM tab下开启数据开关 android/packages/ ...

  8. 夺命雷公狗-----React---4--props变量的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. Redhat 7使用CentOS 7的Yum网络源

    由于redhat 的更新包只对注册的用户生效,所以需要自己手动更改成CentOS 的更新包,CentOS几乎和redhat是一样的,所以无需担心软件包是否可安装,安装之后是否有问题,另外CentOS公 ...

  10. Asp.net MVC进入请求管道的过程

    Asp.net MVC进入请求管道的过程 Asp.Net MVC 跟AspNet 入口解释 Asp.Net MVC请求处理过程 mvc 请求模型 mvc的原理 mvc模型 NewMVCPipleLin ...