Javascript基础学习笔记

什么是变量?
变量是用于存储信息的容器
变量的声明
语法:

var  变量名

变量名 = 值;
变量要先声明再赋值
变量可以重复赋值
变量的命名规则
变量必须以字母开头;
变量也能以$和_符号开头(不过我们不推荐这么做);
变量名称对大小写敏感(a和A是不同的变量)。

语句
语句以一个分号结尾;如果省略分号,则由解析器确定语句的结尾。
有个好的编码习惯,都要以 ; 结尾

数据类型
JavaScript中,一段信息就是一个值(value)。值有不同的类型,大家最熟悉的类型是数字。字符串(string)值是包围在引号中的一个或多个单词。
数字    任何数字值。数字可以带小数点,也可以不带    68.57
字符串    引号中的字符。您可以使用单引号或双引号    "hello, world"
布尔值(Boolean)    truefalse    true
Undefined 和 Null    Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。    
对象    与对象相关联的任何值    
函数    函数返回的值

1 var a; //a为undefined
2 var a = 6; //a 为数字
3 var a = "Jason"; // a 为字符串

什么是函数?
函数是一组执行某一任务的JavaScript 语句
基本语法:

function 函数名(){
    函数代码;
}

函数名();
说明:
function定义函数关键字。
"函数名"你为函数取的名字。
"函数代码"替换为完成特定功能的代码。
"第二个函数名"函数调用的一种

1 function add2(){
2 var sun = 3 + 2;
3 alert(sun);
4 }
5 add2();//调用函数直接写函数名直接弹出函数代码
1 <input type="button" value="点击我" onclick="add2()" />
2 <!-- 单击按钮后,调用函数,onclick为点击事件 -->

输出内容(document.write)
document.write()直接在网页中输出内容。
第一种:输出内容用“”括起,直接输出“”号内的内容。

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

第二种:通过变量,输出内容

var mystr = "hello world";
document.write(mysrt);//直接写变量名,输出变量存储的内容

第三种:输出多项内容,内容之间用+号连接。

var mystr = "hello";
document.write(mystr + "I love Java Script");//多项内容之间用+号连接

第四种:输出HTML标签,并起作用,标签使用“”括起来。

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

警告(alert 消息对话框)
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。
语法:alert(字符串或变量);

var mynum = 30;
alert("hello!");
alert(mynum);

结果:按顺序弹出消息框(alert弹出消息对话框包含一个确定按钮)
注意:
1. 在点击对话框"确定"按钮前,不能进行任何其它操作。
2. 消息对话框通常可以用于调试程序。
3. alert输出内容,可以是字符串或变量,与document.write 相似

确认选择(confirm 消息对话框)
除了向用户提供信息,我们还希望从用户那里获得信息。这里就用到了confirm 消息对话框。
confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
语法:confirm(str);
参数说明:str:在消息对话框中要显示的文本 返回值:Boolean值
返回值:
当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false
注: 通过返回值可以判断用户点击了什么按钮

1 <script type="text/javascript">
2     var mymessage=confirm("你喜欢JavaScript吗?");
3     if(mymessage==true){
4         document.write("很好,加油!");
5     }else{
6         document.write("JS功能强大,要学习噢!");
7     }
8 </script>

提问(prompt 消息对话框)
有时候,不仅希望用户回答Yes/No。而是希望得到更特定的响应。这中情况我们可以利用prompt。
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
语法:

prompt(str1,str2);

参数说明:
str1:要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
1、点击确定按钮,文本框中的内容将作为函数返回值
2、点击取消按钮,将返回null

 1 function rec(){
 2     var score; //score变量,用来存储用户输入的成绩值。
 3     score = prompt("请输入你的成绩","90");
 4     if(score>=90){
 5         document.write("你很棒!");
 6     }else if(score>=75){
 7         document.write("不错吆!");
 8     }else if(score>=60){
 9         document.write("要加油!");
10     }else{
11         document.write("要努力了!");
12     };
13 } ;   

1 <script>
2         var myName = prompt("输入您的名字");
3           if(myName != null && myName != ""){
4             document.write("welcom to" + myName);
5         }else{
6             document.write("welcom to my friend");
7         }
8 </script>

打开新窗口(window.open)
语法:

window.open([URL], [窗口名称], [参数字符串])

参数说明:
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2.窗口名称:可选,该字符串是一个由逗号分隔的特征列表,声明了被打开窗口的名称。可以 是"_top"、"_blank"、"_selft"、"_parent"等。
_blank 在新窗口显示目标网页
_selft 在当前窗口显示目标网页
_parent 框架网页中当前整个窗口位置显示目标网页
_top 框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

参数表:
top    Number  窗口顶部离开屏幕顶部的像素数
left    Number  窗口左端离开屏幕左端的像素数
width    Number  窗口的宽度
height    Number  窗口的高度
menubar    yes,no  窗口有没有菜单
toolbar    yes,no  窗口有没有工具条
scrollbars    yes,no   窗口有没有滚动条
status      yes,no   窗口有没有状态栏

1 <script type="text/javascript">
2      window.open(‘http://‘,‘_blank‘,‘width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes‘)
3 </script>

关闭窗口(window.close)
close()关闭窗口
用法:

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

例如:关闭新建的窗口。

1 <script type="text/javascript">
2     var mywin=window.open(‘http://www.imooc.com‘); //将新打的窗口对象,存储在变量mywin中
3     mywin.close();
4 </script>

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

1 Object.innerHTML

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

1 <h2 id="con">javascript</H2>
1 <script type="text/javascript">
2   var mychar=document.getElementById("con");
3   document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
4   mychar.innerHTML="hello world"
5   document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
6 </script>

改变HTML样式
语法:

Object.style.property=new style;

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

<h2 id="con">I love JavaScript</h2>
1 <script type="text/javascript">
2     var mychar= document.getElementById("con");
3     mychar.style.color="red";
4     mychar.style.background="#ccc";
5     mychar.style.width="300px";
6 </script>

显示和隐藏(display属性)
语法:

Object.style.display = value

value值:
none 此元素不会被显示(及隐藏)
block 此元素将显示为块级元素(即显示)

mychar.style.display = "block"

控制类名(className属性)
className属性设置或返回元素的class属性。
语法:

object.className = classname

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

p2.className = "two";
时间: 2024-10-19 21:01:00

Javascript基础学习笔记的相关文章

javaScript 基础学习笔记

边看视频和书记得有点杂. 1.插入JS标签 一种是在文档中插入<script></script>标签.另一种是把javaScript代码放在.js文件中.放在head中如. <script src="file.js"></script> 放在body中也可以,JavaScript作为一种脚本语言,可以放在HTML文件中任何的位置,但是浏览器解释HTM时顺序是按先后顺序的.前面的script就先执行.比如页面进行初始化的时候解释必须放在he

ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习

首页 头条 文章 频道                         设计频道 Web前端 Python开发 Java技术 Android应用 iOS应用 资源 小组 相亲 频道 首页 头条 文章 小组 相亲 资源 设计 前端 Python Java 安卓 iOS 登录 注册 首页 最新文章 经典回顾 开发 Web前端 Python Android iOS Java C/C++ PHP .NET Ruby Go 设计 UI设计 网页设计 交互设计 用户体验 设计教程 设计职场 极客 IT技术

ASP.Net MVC开发基础学习笔记:三、Razor视图引擎、控制器与路由机制学习

一.天降神器“剃须刀” — Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASPX引擎或者第三方的NVelocity模板引擎. Razor在减少代码冗余.增强代码可读性和Visual Studio智能感知方面,都有着突出的优势.Razor一经推出就深受广大ASP.Net开发者的喜爱. 1.2 Razor的语法 (1)Razor文件类型:Razor支持两种文件类型,分

js基础学习笔记(二)

2.1  输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出""号内的内容. <script type="text/javascript"> document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出.

js基础学习笔记(一)

* 在js编写过程中,尽量保持统一使用单引号 'XXXX': * 所有变量都要声明 var,避免全局函数调用的冲突: 1.1    输出内容 docment.write(‘aileLi’); 改变某ID元素样式 docment.getElementById(‘ID’).style.color=’样式参数’; 1.2   输出弹出框 alert(‘aileLi’); 1.5  什么是变量?  从字面上看,变量是可变的量: 从编程角度讲,变量是用于存储某种/某些数值的存储器. 定义变量使用关键字va

js基础学习笔记(三)

3.1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,三种常见的DOM节点: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li&g

ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法

一.一个功能强大的页面开发辅助类—HtmlHelper初步了解 1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归.所以抛弃之前的那种事件响应的模型,抛弃服务器端控件也理所当然. 但是,如果手写Html标签效率又比较低,可重用度比较低.这时,我们该怎样来提高效率呢?首先,经过上篇我们知道可以通过ViewData传递数据,于是我们可以写出以下的Html代码: <input name="UserName&quo

JavaScript正则表达式学习笔记之一 - 理论基础

自从年前得空写了两篇文章之后就开始忙了,这一忙就是2个月??.当时信誓旦旦说的定期写篇博客的计划也就泡汤了??,不过好在最近有空,顺便总结一下这两个月遇到的几个问题.第一个问题就是项目中用到了一些正则才发现之前被自己忽略的正则是时候补一补了.恰逢今天周六??,就把自己学习JavaScript正则表达式的笔记整理成文,写了这篇关于正则表达式理论基础的文章,希望本文能对有需要的同学提供帮助.号外:本文相对基础,大神请忽略??. 一. 基本概念 正则表达式是用于匹配字符串中字符组合的模式. 一种几乎可

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.