Javascript语法必知必会

大家好。这边文章个人学习慕课网JavaScript入门篇JavaScript进阶篇所做的笔记,较基础,主要是语法内容。

1-1学习JavaScript的起点就是处理网页,我们先学习如何使用DOM进行简单操作。

<body>
  <p id="p1">我是第一段文字</p>
  <p id="p2">我是第二段文字</p>

  <script type="text/javascript">
    document.write("hello");  # 输出文本
    document.getElementById("p1").style.color="blue";  # 第一段文字变蓝色了
  </script>
</body>

1-2 内部引用 <script type="text/javascript">

1-3 外部引用 <script src="script.js"></script>

1-4 一般放在网页的head或者body部分:

放在<head>部分

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

放在<body>部分

JavaScript代码在网页读取到该语句的时候就会执行。果是通过事件调用执行的function那么对位置没什么要求的。

1-5 JavaScript语句是发给浏览器的命令。

1-6 注释 // or /* */

1-7 var 变量名 区分大小写

1-8 if语句

if(条件)  注意:没有分号哦。
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

1-9 函数

function add2(){
   var sum = 3 + 2;
   alert(sum);
}

调用: add2()

1-10 字符串方法+

2-2 alert

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

2-3 confirm

confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

var mymessage=confirm("你喜欢JavaScript吗?");

2-4 promte

弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。

prompt(str1, str2);

参数:

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

对话框中点击确定按钮,文本框中的内容将作为函数返回值;对话框中点击取消按钮,将返回null

2-5 打开新窗口

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

参数:

URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。

窗口名称:可选参数,被打开窗口的名称。

  1.     该名称由字母、数字和下划线字符组成。
  2.     "_top"、"_blank"、"_self"具有特殊意义的名称。

           _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>

2-6 关闭窗口

window.close();   //关闭本窗口 或 window.close();   //关闭本窗口

关闭新建的窗口

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

注意:上面代码在打开新窗口的同时,关闭该窗口,看不到被打开的窗口。

2-7 略

3-1

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

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

  1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
  2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
  3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"

3-2 通过ID获取元素

 document.getElementById(“id”)

该示例打印并非理想结果,是因为从浏览器读取html文件来说,是从上到下读取的:如果将JavaScript放在head中,HTML文件读取时会先读取并执行JavaScript的内容,然后才会执行body标签内的内容;如果放在body标签内,HTML文件读取时,会先读取在JavaScript前面的内容,再读取JavaScript的内容;

从上面这个原理与课程结合进行分析:

结果为null是因为,JavaScript没有找到id名为“con”的标签,所以返回null。

结果为[object HTMLParagraphElement],则说明JavaScript找到了id名为“con”的标签,以对象的形式返回该标签

但是我们发现在HTML中明明存在id=“con”的标签,这又是怎么回事?这是因为,前面说的浏览器读取HTML文件,是从上到下读取的:

如果将JavaScript放在id=“con”的标签之前,这就导致了浏览器在读取HTML文件时,JavaScript先读取,读取完JavaScript后,才开始读取到id=“con”的标签,这就是说JavaScript读取时是没有读取到id=‘con’的标签,只能返回null,表示没有读取到该标签

如果将JavaScript放在id=“con”的标签之后,在浏览器读取HTML文件时,先读取到了id="con"的标签,才读取JavaScript,这时由于id="con"的标签名存在,JavaScript可以发现,所以以对对象的形式([object HTMLParagraphElement])返回该标签

要返回正确的结果应该在前后加双引号或者在mychar变量后加上.innerHTML

 

3-3 innerHTML属性

获取元素内容

  var mychar= document.getElementById("con");  
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML = 'Hello world!'
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

 

3-4 改变HTML样式

Object.style.property=new style;  //Object是获取的元素对象

3-5 显示和隐藏

Object.style.display = value

3-6 控制class属性元素

object.className = classname 注意中间有个大写的N

进阶内容

2-2

变量取名规则:

  1. 必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。如下:
  2. 变量名区分大小写,如:A与a是两个不同变量。
  3. 不允许使用JavaScript关键字和保留字做变量名。

2-9 “&&”表示and操作符

2-10 "||" 或

2-11 "!" 否

2-12 操作符之间的优先级(高到低):

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

如果同级的运算是按从左到右次序进行,多层括号由里向外。

3-1 数组

3-2

var myarray= new Array(8); //创建数组,存储8个数据。

注意:

1.创建的新数组是空数组,没有值,如输出,则显示undefined

2.虽然创建数组时,指定了长度,但实际上数组都是变长的,也就是说即使指定了长度为8,仍然可以将元素存储在规定长度以外。

3-3 添加元素

只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素。

myarray[5]=88; //使用一个新索引,为数组增加一个新元素

3-6 length属性

myarray.length; //获得数组myarray的长度

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值