zoukankan      html  css  js  c++  java
  • JavaScript基础——JavaScript入门(笔记)

    JavaScript入门(笔记)

      JavaScript是一种轻量级、解释型的Web开发语言,该语言系统不是很庞杂,简单易学。由于所有现代浏览器都已嵌入JavaScript引擎,JavaScript源代码可以在浏览器中直接被解释执行,用户不用担心支持问题。

    一、在网页中插入JavaScript代码

      使用<script>标签,可以把JavaScript源代码直接放到网页文档中。

    【示例1】新建HTML文档并保存为test.html,然后在<head> 标签内插入<script>标签,在<script>标签中输入代码"<h1>Hello,World!</h1>"。完整页面代码如下。

    <html>
        <head>
            <meta charset="utf-8">
            <title>JavaScript "Hello"</title>
            <script>
                document.write("<h1>Hello,World!</h1>")
            </script>
        </head>
    <body>
    
    </body>
    </html>

      <script>和</script>标签配合使用,作为脚本语言的标识符来分割其他源代码,避免与HTML标签和CSS样式代码混淆。

      在浏览器解析网页源代码的时,浏览器检索到<script>标签时,会自动调用JavaScript引擎对其中包含的字符信息进行解释处理。

      document是JavaScript在浏览器中定义的一个对象,它表示HTML文档内容。write()是document对象的一个方法,它表示在网页文档中输出显示指定的参数内容。

    【效果】

    【注意】

    1 考虑到HTML文档的DOM结构模型规范性,建议用户把JavaScript脚本写在<head></head>标签之间,或者写在<body></body>标签之间
    2 <script>标签包含了2个属性,type和language。在实际开发中,可以省略这2个属性,因为浏览器默认<script>标签包含的字符信息是JavaScript脚本

    二、使用JavaScript文件

      与CSS文件一样,JavaScript代码也可以存放在独立的文件中,以增强JavaScript脚本的可重复使调用。JavaScript文件是hi一个文本类型的文件,在任何文本编辑器中都可以被打开和编辑,JavaScript文件的扩展名为js。

    【示例】

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>使用JavaScript文件</title>
    		<script type="text/javascript" src="test.js"></script>
    		<script>
    			var str="JavaScript编程语言";
    			document.write("<h2>"+str+"</h2>"); //输入变量的值
    			document.write("<p>实际长度=" + strlen(str) + "字节</p>"); //调用函数
    		</script>
    	</head>
    <body>
    </body>
    </html>
    
    //公共函数,计算字符串的实际长度
    function strlen(str){
    	var len;	//临时标量,存储字符串的实际长度
    	var i;		//声明循环变量 
    	len=0;		//初始化临时变量len为0
    	for (i=0; i<str.length; i++){ 	//循环检测字符中每个字符
    		if (str.charCodeAt(i) > 255) len+=2; //如果当前字符串为双字节字符,则递增2次
    		else len++;		//如果当前字符为单字节字符,则递增1次
    	}
    	return len;		//返回字符串的实际长度
    }
    

    【效果】

  • 相关阅读:
    syntax error near unexpected token `then'
    Redis与Memcached的比较
    移动端H5---页面适配问题详谈(一)
    JS 面向对象 编程设计
    测试点实例
    fiddler工具的使用
    功能测试之测试基础
    自动化测试之4——Xpath使用方法
    移动端自动化测试-Mac-IOS-Appium环境搭建
    移动端自动化测试-Windows-Android-Appium环境搭建
  • 原文地址:https://www.cnblogs.com/zuoyang/p/9501277.html
Copyright © 2011-2022 走看看